当前位置: 首页 > article >正文

使用Get包显示Dialog

文章目录

  • 1. 概念介绍
  • 2. 使用方法
    • 2.1 Overlay效果
    • 2.1 Dialog效果
  • 3. 示例代码
  • 4. 内容总结

我们在上一章回中介绍了"使用get显示snackBar"相关的内容,本章回中将介绍使用get显示Dialog.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在介绍Get包时提到该包提供了一些实用功能,显示Dialog就是其中之一,Dialog是项目中常用的组件,本章回中将详细介绍如何使用Get包显示Dialog.

2. 使用方法

在Get包中提供了两种显示Dialog的方法,不过它们显示的效果不同,我们将在下面的小节中分开介绍这两种不同显示效果的Dialog。

2.1 Overlay效果

Get包提供了dialog方法来显示Dialog,该方法是静态方法,可以直接调用,该方法中显示的内容通过Widget类型的参数控制,不过该参数不是命名参数,因此没有名
称。该方法提供了其它的命名参数来控制显示效果,我们在这里不展开介绍,大家可以参考方法的源代码。该方法运行后显示的Dialog效果不像我们常见的Dialog,它
和我们在前面章回中介绍的Overlay效果完全相同。因此,我们可以使用该方法显示Overlay.

2.1 Dialog效果

Get包提供了defaultDialog方法来显示Dialog,它的显示效果就是我们常见的Dialog.该方法是静态方法,可以直接调用,该方法会创建一个Dialog,该方法提供了
相关的参数来控制Dialog的内容,颜色等风格,开发人员只需要给参数赋值就可以创建出不同的Dialog.下面是该方法中常用的参数:

  • title:用来控制Dialog的标题,它是String类型;
  • content:用来控制Dialog的内容,它是widget类型;
  • confirm:用来控制Dialog中的确认按钮,它是widget类型;
  • cancel:用来控制Dialog中的取消按钮,它也是widget类型;
  • actions:用来的控制Dialog中的确认或者取消按钮,它可以同时显示多个Action;
    上面介绍的这些参数都是常用的参数,不过action参数最好不要和confirm/cancel一起使用,因为它们的功能相同。如果想显示多个功能按钮,那么可以使用action.
    此外,action的位置在Dialog的右下角,它的风格就是典型的Material风格。

3. 示例代码

ElevatedButton(
  onPressed:() {
    ///和官方Overlay的效果完全一样,不像dialog
    Get.dialog(//const Text("This is dialog"),
      ///这里控制dialog中的组件,可以是简单的文本,也可以是多种组件的组合
      const Column(
        children: [
          Text("Row1"),
          Text("Row2"),
        ],
      ),
      barrierColor: Colors.lightBlueAccent,
      ///不设置此属性不会有淡入淡出的效果,这里相当于给模糊层设置了一个淡入淡出的效果
      transitionDuration: const Duration(seconds: 2,),
    );
  } ,
  child: const Text("show Dialog"),
),
ElevatedButton(
  onPressed:() {
    ///这个才是正常的Dialog,不过大小是自适应的,无法调整窗口的大小
    Get.defaultDialog(
      title: "Title",
      backgroundColor: Colors.greenAccent,
      content: const Text("Content , this ia a long text"),
      ///文字居中显示,无法调整位置
      confirm: const Text("Yes"),
      cancel:  const Text("No"),

      ///在窗口最底部和confirm/cancel按钮在一行
      actions: [
        // Text("Action1"),
        // Text("Action2"),
      ],
      buttonColor: Colors.purpleAccent,
      navigatorKey:Get.key,
    );
  } ,
  child: const Text("show Dialog"),
),

上面的示例代码演示了两种创建dialog的方法,第一种方法的显示效果和Overlay相同,第二种方法的显示效果就是我们常用的dialog。我在这里就不演示程序的运行
效果了,建议大家自己动手去实践。

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • Get提供了两种方法显示Dialog,不过Dialog的显示效果不同;
  • 使用dialog()方法可以创建一个类似Overlay显示效果的窗口;
  • 使用defaultDialog()方法可以创建一个具有经典风格的对话框窗口;
  • Get包中显示Dialog的方法都是静态方法,并且不需要提供Context对象,使用十分方便;
    看官们,与"使用get显示Dialog"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

http://www.kler.cn/a/300569.html

相关文章:

  • 算法与数据结构——复杂度
  • 每打开一个chrome页面都会【自动打开F12开发者模式】,原因是 使用HBuilderX会影响谷歌浏览器的浏览模式
  • Qiankun 微前端框架全面解析:架构、原理与最佳实践
  • 关于高级工程师的想法
  • Android SystemUI——车载CarSystemUI加载(八)
  • Jmeter如何进行多服务器远程测试
  • 《HTML 与 CSS—— 响应式设计》
  • C++:priority_queue(优先级队列)的模拟实现
  • 18070 矩阵行交换或列交换
  • 实时音视频之医疗手术示教技术方案探究
  • DBeaver 连接 MySQL 报错 Public Key Retrieval is not allowed
  • [001-03-007].第26节:分布式锁迭代1->基于setnx命令实现分布式锁:
  • 08-图8 How Long Does It Take(C)
  • Java中的linkedList类及与ArrayList的异同
  • PoS 和 PoW 矿机系统区块链公链开发成本分析
  • 朴素贝叶斯 (Naive Bayes)
  • vue + Element UI table动态合并单元格
  • 前端CSS面试常见题
  • c#中的版本管理和描述
  • 函数的定义
  • Unity3d俯视视角下,通过点击屏幕获取世界坐标是如何实现的
  • windows通过wsl2安装linux系统之Ubuntu,傻瓜式安装
  • C++常用设计模式
  • 数据库视图和索引
  • 【iOS】Masnory的简单学习
  • 【PyQt6 应用程序】在用户登录界面实现密码密文保存复用