第二百四十九回

文章目录

  • 1. 概念介绍
  • 2. 思路与方法
    • 2.1 实现思路
    • 2.2 实现方法
  • 3. 示例代码
  • 4. 内容总结

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

1. 概念介绍

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

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()方法;

看官们,与"创建一个可以输入内容的对话框"相关的内容就介绍到这里,大家可以自定义属于自己风格的对话框,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,前端,移动开发Flutter)