第二百五十八回

我们在上一章回中介绍了"模拟对话窗口的页面"相关的内容，本章回中将介绍如何创建一个可以输入内容的对话框.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的对话框是一种自定义的对话框，它和普通的对对话框类似，也是弹出式窗口，它最大的特点在弹出式窗口中支持输入功能。下面是具体的效果图，我
们将在本章回中详细介绍它的的实现方法。039inputDialog

2. 思路与方法

2.1 实现思路

实现弹出式窗口可以自己创建，也可以复用官方的AertDialog或者AboutDialog组件，我们选择后者。窗口的输入内容使用TextField组件实现。剩下的两个确认
按钮可以复用Dialog中的，或者自定义。我们选择后者，因为官方的两个按钮布局是固定的，不好修改。

2.2 实现方法

有了实现思路后，我们就可以按照思路来创建对话框，下面是详细的实现步骤，请大家参考：

• 创建一个AlertDialog组件，它负责显示窗口；
• 创建一个布局，布局中包含TextField和两个按钮组件；
• 把上一步中创建的布局赋值给AlertDialog的content属性；
• 使用ShowDialog方法实现对话框的弹出功能；

3. 示例代码

///自定义Dialog:中间是一个输入框，下面是两个按钮
_showCustomDialog() {
  showDialog(context: context,
      builder: (BuildContext context) {
        double width = MediaQuery.of(context).size.width;
        double height = MediaQuery.of(context).size.height;

        ///自定义Dialog，通过container控制大小
        return AlertDialog(
          ///两颜色同时设置才有效果
          surfaceTintColor: Colors.white,
          ///这个是对话框窗口的背景颜色
          backgroundColor: Colors.white,
          ///修改对话框的圆角，默认带圆角，可以不处理,下面的代码给对话框镶了一个金边
          shape: OutlineInputBorder(
            borderRadius: BorderRadius.circular(30),
            borderSide: const BorderSide(color: Colors.yellow,width: 4),
          ),
          content: Container(
            alignment: Alignment.center,
            padding: const EdgeInsets.only(top: 48,bottom: 8),
            width: width - 16*2,
            height: height/4,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(0),
            ),
            child: Column(
              children: [
                Expanded(
                  flex: 2,
                  child: TextField(
                    decoration: InputDecoration(
                      ///输入框最左侧和最右侧的图标
                      prefixIcon: const Icon(Icons.mail),
                      suffixIcon: const Icon(Icons.delete),
                      ///输入框的填充颜色
                      filled: true,
                      fillColor: Colors.black26,
                      ///输入框的边框,不同状态下有不同的边框
                      enabled: true,
                      disabledBorder: OutlineInputBorder(
                        borderSide: const BorderSide(color: Colors.redAccent,width: 4),
                        borderRadius: BorderRadius.circular(16),
                      ),
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(color: Colors.redAccent,width: 4),
                        borderRadius: BorderRadius.circular(16),
                      ),
                      ///输入时显示的边框
                      focusedBorder: OutlineInputBorder(
                        borderSide: const BorderSide(color: Colors.blue,width: 4),
                        borderRadius: BorderRadius.circular(16),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      ElevatedButton(onPressed: (){}, child: const Text("Yes"),),
                      ElevatedButton(onPressed: (){}, child: const Text("No"),),
                    ],
                  ),
                )
              ],
            ),
          ),
        );
      },
      );
}

上面是实现对话框的代码，代码中添加了注释方便大家理解，此外，我再介绍一些细节：对话框的背景颜色需要同时修改前景和背景颜色才有效果；对话框默认有圆角，
如果想修改圆角的大小可以通过它的shap属性来修改；对话框中所有的内容都通过content属性来控制，自定义的空间非常高；对话框的大小与它里面的子控件的大小相
关，可以通过控制content中组件的大小间接控制对话框的大小；

4. 内容总结

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

• 创建自定义对话框以AlertDialog为基础；
• 对话框中自定义的内容通过content属性来实现；
• 对话框的颜色和形状等主题相关的内容仍然使用原来的属性；
• 弹出对话框时仍然使用官方提供的showDialog()方法；
  看官们，与"创建一个可以输入内容的对话框"相关的内容就介绍到这里，大家可以自定义属于自己风格的对话框，欢迎大家在评论区交流与讨论!