国外室内设计网站推荐,wordpress logo图片,河南政务网站建设排名,响应式儿童网站源码文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法 3. 示例代码4. 经验分享5. 内容总结 我们在上一章回中介绍了修改组件风格的另外一种方法相关的内容#xff0c;本章回中将介绍
如何做一个模拟对话框窗口的页面.闲话休提#xff0c;让我… 文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法 3. 示例代码4. 经验分享5. 内容总结 我们在上一章回中介绍了修改组件风格的另外一种方法相关的内容本章回中将介绍
如何做一个模拟对话框窗口的页面.闲话休提让我们一起Talk Flutter吧。 1. 概念介绍
对话框是我们在项目中经常使用的组件我们在前面章回中也介绍过该组件本章回中将介绍如何创建一个模拟对话框窗口的页面页面的外观和真正的对话框完整相同不同的是这个页面是一直显示的而不是像对话框一样符合条件时才弹出来。
2. 思路与方法
2.1 实现思路
对话框包含标题内容和按钮以及窗口背后的灰色背景。我们先使用一个容器组件充当灰色背景在该容器中再创建对话框窗口。对话框窗口也可以使用容器组件来实现只是它的长度和宽度比背景容器的长度和宽度要小一些。
接着在对话框窗口容器中使用Text组件来实现标题和内容窗口中的按钮使用TextButton组件来实现。然后使用布局类组件把窗口中的标题内容和按钮组合在一起组合时可以参考对话框的布局。
2.2 实现方法
有了实现思路后我们来介绍具体的实现方法 使用Container组件来创建对话框的背景它的大小与屏幕相同填充颜色为灰色 使用Container组件来创建对话框它的长度和宽度小于背景窗口的长度和宽度 在对话框容器中使用Column布局它把对话框分成三行标题行内容行和按钮行 使用Text组件来实现标题和内容标题的文字比内容的文字大一些通过修改字号来实现 使用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组件中打开蓝牙时会弹出窗口。但是它会多次弹出窗口打开蓝牙开关的过对话框提示一次就可以了弹出多次对话框明显不合理。
鉴于以上两点原因我们创建模拟对话框的页面它只显示对话框但是没有弹出动作这样就解决了不能修改窗口中的内容以及多次弹出窗口的问题。
5. 内容总结
最后我们对本章回的内容做一个全面的总结
创建模拟对话框的页面只有对话框的外观没有弹出动作对话框的背景和窗口本身通过容器组件实现对话框的标题内容通过Text组件实现对话框的按钮通过TextButton实现依据项目需求添加按钮的点击事件模拟对话框的页面是依据项目中特定需求定制的大家也可以定制自己的页面
看官们与模拟对话窗口的页面相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
