深圳网站建设saote/网站推广与优化平台

我们在上一章回中介绍了"模拟对话窗口的页面"相关的内容，本章回中将介绍如何创建一个可以输入内容的对话框.闲话休提，让我们一起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()方法；
  看官们，与"创建一个可以输入内容的对话框"相关的内容就介绍到这里，大家可以自定义属于自己风格的对话框，欢迎大家在评论区交流与讨论!