第二百零四回模拟对话窗口的页面

news2024/10/6 8:28:37

文章目录

1. 概念介绍
2. 思路与方法
- 2.1 实现思路
- 2.2 实现方法
3. 示例代码
4. 经验分享
5. 内容总结

我们在上一章回中介绍了"修改组件风格的另外一种方法"相关的内容，本章回中将介绍" 如何做一个模拟对话框窗口的页面".闲话休提，让我们一起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(S.current.btisOffPlsOpenIt),
          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),),),
            ],
          )
        ],
      ),
    ),
  ),
)

上面是的示例完全按照实现方法中的步骤来编写，并且在关键位置添加了代码。编译并且运行上面的代码可以得到下面的运行效果图。

在这里插入图片描述

4. 经验分享

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

我在项目中使用FlutterBlePlus.turnOn()方法打开手机中的蓝牙开关时会弹出一个对话框窗口，不过无法修改窗口中的提示内容，以及按钮的内容和风格;
在监听蓝牙打开状态的StreamBuilder组件中打开蓝牙时会弹出窗口。但是它会多次弹出窗口，打开蓝牙开关的过对话框提示一次就可以了，弹出多次对话框明显不合理。

鉴于以上两点原因，我们创建模拟对话框的页面，它只显示对话框，但是没有弹出动作，这样就解决了不能修改窗口中的内容以及多次弹出窗口的问题。