第二百二十回 如何把异步的CallBack转换成事件流

我们在上一章回中介绍了"修改组件风格的另外一种方法"相关的内容，本章回中将介绍"如何做一个模拟对话框窗口的页面".闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

对话框是我们在项目中经常使用的组件，我们在前面章回中也介绍过该组件，本章回中将介绍如何创建一个模拟对话框窗口的页面，页面的外观和真正的对话框完整相同，
不同的是这个页面是一直显示的，而不是像对话框一样符合条件时才弹出来。

2. 思路与方法

2.1 实现思路

对话框包含标题，内容和按钮，以及窗口背后的灰色背景。我们先使用一个容器组件充当灰色背景，在该容器中再创建对话框窗口。对话框窗口也可以使用容器组件来实现，
只是它的长度和宽度比背景容器的长度和宽度要小一些。接着在对话框窗口容器中使用Text组件来实现标题和内容，窗口中的按钮使用TextButton组件来实现。然后使
用布局类组件把窗口中的标题，内容和按钮组合在一起，组合时可以参考对话框的布局。

2.2 实现方法

有了实现思路后，我们来介绍具体的实现方法：

• 1. 使用Container组件来创建对话框的背景，它的大小与屏幕相同，填充颜色为灰色；
• 2. 使用Container组件来创建对话框，它的长度和宽度小于背景窗口的长度和宽度；
• 3. 在对话框容器中使用Column布局，它把对话框分成三行：标题行，内容行和按钮行；
• 4. 使用Text组件来实现标题和内容，标题的文字比内容的文字大一些，通过修改字号来实现；
• 5. 使用TextButton来实现对话框中的按钮，按钮有两个，使用Row组件来包含这两个按钮；
     除了我们介绍的这些步骤外，还需要给按钮添加点击事件响应的内容，也就是给TextButton的onPress属性赋值，不过这个属于业务的内容。大家依据具体的业务给按
     钮赋值就可以，一定要记得给每个按钮的属性赋值。

3. 示例代码

return Scaffold(
  ///对话框的背景
  body: Container(
    color: Colors.black26,
    width: double.infinity,
    height: double.infinity,
    alignment: Alignment.center,
    ///对话框的背景
    child: Container(
      width: 272.w,
      height: 160.w,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: Colors.white,
      ),
      ///三行内容：标题行，内容行，按钮行
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          ///这个空间可以用来存放标题
          const SizedBox(height: 16,),
          Text("Message of Dialog"),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              TextButton(
                onPressed: () {OpenSettings.openBluetoothSetting();},
                child: Text("Yes",style: const TextStyle(color: Colors.black),),
              ),
              TextButton(onPressed: () {}, child: Text("No",style: const TextStyle(color: Colors.black),),),
            ],
          )
        ],
      ),
    ),
  ),
)

上面是的示例完全按照实现方法中的步骤来编写，并且在关键位置添加了代码。编译并且运行上面的代码可以得到下面的运行效果图。(博客中从jetpakc中拿了一个图片，
不过图片中的内容以及风格与代码中的不一样)

4. 经验分享

有看官提问说，官方已经提供对话框了，直接拿来使用就可以，为什么要模拟一个对话框？其原因源于我的项目经验，主要有两个，详细如下：

• 我在项目中使用FlutterBlePlus.turnOn()方法打开手机中的蓝牙开关时会弹出一个对话框窗口，不过无法修改窗口中的提示内容，以及按钮的内容和风格;
• 在监听蓝牙打开状态的StreamBuilder组件中打开蓝牙时会弹出窗口。但是它会多次弹出窗口，打开蓝牙开关的过对话框提示一次就可以了，弹出多次对话框明显不
  合理。鉴于以上两点原因，我们创建模拟对话框的页面，它只显示对话框，但是没有弹出动作，这样就解决了不能修改窗口中的内容以及多次弹出窗口的问题。

5. 内容总结

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

• 创建模拟对话框的页面只有对话框的外观，没有弹出动作；
• 对话框的背景和窗口本身通过容器组件实现；
• 对话框的标题，内容通过Text组件实现；
• 对话框的按钮通过TextButton实现，依据项目需求添加按钮的点击事件；
• 模拟对话框的页面是依据项目中特定需求定制的，大家也可以定制自己的页面；
  看官们，与"模拟对话窗口的页面"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!