Getx系列之Dialog

针对Dialog的封装，如果封装的widget需要传入context，那就不算好的封装成品。在原生开发中，就很厌烦传入context，有些未封装完美的工具类t，比如oast、dialog等需要传入context。而针对flutter应用开发，Getx就封装了一个不需要传入context对象且可自定义的dialog。

 1、引入依赖 

在pubspec.yaml文件添加

get: ^4.6.1

 我个人喜欢图文并茂，文字看不懂，还能看图片操作，能gif最好，傻瓜式操作。

2、导包 

在需要用getX的文件中导入下面内容，这个不需要图片了吧！

import 'package:get/get.dart';

3、应用程序入口main设置

当我们导入依赖后，在应用程序顶层把MaterialApp改成GetMaterialApp 作为顶层，如下所示

import 'package:flutter/material.dart';
import 'package:get/get.dart';
 
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          primaryColor: Colors.red),
      home: const MyHomePage(title: 'Flutter Getx Dialog'),
    );
  }
}

现在就可以使用GetX的Dialog功能了。

4、使用 Get.defaultDialog()

先浏览下Dialog属性和说明

有点多，本文就大致将以上大部分属性列举一遍看下效果。

4.1 默认效果

Get.defaultDialog()

 4.2  标题

title明显是对话框都标题，但是不能进行自定义标题，但是可以设置标题的样式（titleStyle）以及标题的内边距（titlePadding）,

  Get.defaultDialog(
                    title: "提示",
                    titlePadding: EdgeInsets.all( 50),
                    titleStyle: TextStyle(color: Colors.red)
                  );

设置了标题内容为“提示”，内边距所有方向都为50，当然也可以单独设置某个方向，比如

titlePadding: EdgeInsets.only(left: 50),

标题的样式就设置了字体为红色，当然像文字的大小、加粗、前后背景色啥的都可以加，具体可以查看TextStyle的属性介绍使用。那么看下效果：

 单纯的看标题的设置是看出和设置的效果一样，至于对话框显示的内容，因为咱没设置，所以显示默认的值，不管！OK，三个属性讲完了。

4.3 对话框内容

默认的对话框内容设置

middleText :中间内容区域显示的文字

middleTextStyle:中间内容区域显示的文字样式

之前咱没设置对话框内容，但它还是显示出“Dialog made in 3 lines of code“字样，设置的就是middleText的默认值，所以改变middleText的值，就能取代默认的对话框内容了。middleTextStyle和titleStyle一样，设置文本样式的，用的还是TextStyle的属性。为了稍微不那么丑，title还是加上了，如下：

 Get.defaultDialog(
                     title: "提示",
                    middleText: "您确定退出登录？",
                    middleTextStyle: TextStyle(color: Colors.blue)
                  );

看下效果：

 设置了对话框内容为"您确定退出登录？"并且字体颜色也改成了蓝色。ok,2个属性也搞定了。

接下来看下对话框内容如何自定义呢？middleText只能设置String属性值，但有些对话框内容是包含图片的，所以content属性就派上用场了。它是一个Widget，也就是说可以自定义自己想要添加的任何布局。比如我们添加一个带图片icon的文字提示。

 Get.defaultDialog(
                    title: "提示",
                    content: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.error),
                        Text("您确定退出登录？", style: TextStyle(color: Colors.blue))
                      ],
                    ),
                  );

content使用了Row去包含icon和Text并且居中显示，但是注意一点该值设置后middleText将无效，看下效果：

 还有一个内容的内边距contentPadding设置，这个很好理解，设置内边距为50看下效果

 基本上dialog中的title和content的内容就以上这些了，东西也不多。下面主要看下对话框中下面点击的按钮和点击事件的处理

4.4 对话框底部视图

默认的确定取消样式

textConfirm：确认按钮的文字  ，confirmTextColor：确认按钮文字的颜色，onConfirm：确认按钮回调

textCancel：取消按钮的文字 ，cancelTextColor：取消按钮文字的颜色，onCancel：取消按钮回调

以上都是默认底部取消及确定的显示及点击事件，所以放一起介绍。对应属性介绍的很清楚，直接代码撸下看下效果：

  Get.defaultDialog(
                      title: "提示",
                      middleText: "您确定退出登录？",
                      textConfirm: "确定",
                      confirmTextColor: Colors.red,
                      textCancel: "取消",
                      cancelTextColor: Colors.green,
                      onConfirm: () {
                        print("点击了 确定");
                      },
                      onCancel: () {
                        print("点击了 取消");
                      });

设置了textConfirm内容为“确定”,颜色为红色， textCancel内容为“取消”，颜色为绿色，对应的点击事件都加了一行打印输出语句。

 丑是丑了点，但还能勉强接受。OK，点击确定后控制台就会打印“点击了 确定”，点击取消就会打印“点击了 取消”，默认点击取消会把对话框关闭，但点击确定不会哦。这次给力，一口气说了6个属性了，同样都确定和取消按钮实际开发中也会存在自定义的情况，当然也同样地Getx也提供了自定义确定和取消的widget属性。confirm和cancel，下面来自定义下,换成2个按钮的形式：

 Get.defaultDialog(
                      title: "提示",
                      middleText: "您确定退出登录？",
                      confirm: ElevatedButton(onPressed: (){}, child: Text("确定")),
                      cancel: ElevatedButton(onPressed: (){}, child: Text("取消"))
                      );

 当然如果自定义了取消和确定的widget，那么之前的onConfirm和onCancel的点击事件就会失效了，因此自定义后的点击事件处理需要自己去处理了。如果不是单纯的一个按钮而是组合控件，那么就需要设置宽度了，不然会显示上下两行,比如用Row包裹一个控件：

  Get.defaultDialog(
                      title: "提示",
                      middleText: "您确定退出登录？",
                      confirm: Row(
                        children: [
                          ElevatedButton(onPressed: () {}, child: Text("确定"))
                        ],
                      ),
                      cancel:
                          ElevatedButton(onPressed: () {}, child: Text("取消")));

结果就会显示上下两行了。

 其他剩余属性放在一起介绍下：

backgroundColor：弹出框的背景颜色

 Get.defaultDialog(
                      title: "提示",
                      middleText: "您确定退出登录？",
                    backgroundColor: Colors.green
                  );

效果图：

 

barrierDismissible：是否可以通过点击背景关闭弹窗 

默认地 取消对话框除了点击取消外，还能点击背景去取消，而barrierDismissible属性就是控制点击背景是否关闭弹窗 。true表示可以点击背景关闭，false表示不能点击背景关闭对话框。

radius：弹出框的圆角大小，默认20

这个就是对话框设置圆角的大小，没啥难理解的。

buttonColor:设置默认按钮的边框颜色及填充颜色，改变的是textConfirm和textCancel文字所在的边框及内容填充的颜色

  Get.defaultDialog(
                      title: "提示",
                      middleText: "您确定退出登录？",
                      textConfirm: "确定",
                      textCancel: "取消",
                      buttonColor: Colors.green);

效果如下：

 添加下confirmTextColor: Colors.red,的值，再看下效果：

 onWillPop: 拦截关闭之前做一些操作 ,一般来说对话框关闭之前的操作都在对话框的确定和取消的点击事件里处理完了。这只是一个监听对话框关闭的操作吧。

OK，关于getx中的dialog就说这些，custom的一些属性我设置了发现没用，就没介绍了。相对来说这个还是蛮好用的，不用传context，如果你需要在GetxController里使用对话框，这就派上用场了。