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

2023-12-22 07:39:51


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

1. 概念介绍

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

2. 思路与方法

2.1 实现思路

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

2.2 实现方法

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

    1. 使用Container组件来创建对话框的背景,它的大小与屏幕相同,填充颜色为灰色;
    1. 使用Container组件来创建对话框,它的长度和宽度小于背景窗口的长度和宽度;
    1. 在对话框容器中使用Column布局,它把对话框分成三行:标题行,内容行和按钮行;
    1. 使用Text组件来实现标题和内容,标题的文字比内容的文字大一些,通过修改字号来实现;
    1. 使用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实现,依据项目需求添加按钮的点击事件;
  • 模拟对话框的页面是依据项目中特定需求定制的,大家也可以定制自己的页面;
    看官们,与"模拟对话窗口的页面"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

文章来源:https://blog.csdn.net/talk_8/article/details/135142590
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。