Flutter自定义使用Dialog并更新Dialog中的内容

效果：

引言：

实现一个弹框有两种方式，一种是继承于 Dialog 来定义一个子类实现弹框效果，一种是创建一个新的 StatelessWidget（页面）。

实际上 Flutter 提供的 Dialog 也是继承于 StatelessWidget而实现的。

1 自定义 Dialog

1.1 定义基本的弹出框

如下图所示中，定义一个基本的弹出层，除去下图中的中间的模糊部分

import 'package:flutter/material.dart';/*** 公共弹框*/class CommonDialog extends Dialog {//子布局Widget childWidget;//左侧按钮显示文案String negativeText;//右侧按钮显示文案String positiveText;//标题显示文案String title;//显示标题下的分隔线bool isShowTitleDivi;//显示底部确认按钮上的分隔线bool isShowBottomDivi;//左侧按钮点击事件（取消）Function onCloseEvent;//右侧按钮点击事件（确认）Function onPositivePressEvent;//标题默认高度double defaultTitleHeight = 40.0;CommonDialog({Key key,@required this.childWidget,@required this.title = "提示",this.negativeText,this.positiveText,this.onPositivePressEvent,this.isShowTitleDivi=true,this.isShowBottomDivi=true,@required this.onCloseEvent,}) : super(key: key);@overrideWidget build(BuildContext context) {return new Padding(padding: const EdgeInsets.all(10.0),child: new Material(type: MaterialType.transparency,child: new Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[//白色背景new Container(decoration: ShapeDecoration(color: Color(0xffffffff),shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0),),),),margin: const EdgeInsets.all(12.0),child: new Column(children: <Widget>[//标题new Padding(padding: const EdgeInsets.all(10.0),child: Container(height: defaultTitleHeight,child: Center(child: new Text(title,style: new TextStyle(fontSize: 16.0, color: Color(0xff666666)),),),),),//标题下的分隔线new Container(color: isShowTitleDivi?Color(0xffe0e0e0):Color(0xffffffff),margin: EdgeInsets.only(bottom: 10.0),height: 1.0,),//中间显示的Widgetnew Container(constraints: BoxConstraints(minHeight: 80.0),child: new Padding(padding: const EdgeInsets.all(12.0),child: childWidget,),),//底部的分隔线new Container(color: isShowBottomDivi?Color(0xffe0e0e0):Colors.white,margin: EdgeInsets.only(top: 10.0),height: 1.0,),//底部的确认取消按钮this._buildBottomButtonGroup(),],),),],),),);}Widget _buildBottomButtonGroup() {var widgets = <Widget>[];if (negativeText != null && negativeText.isNotEmpty)widgets.add(_buildBottomCancelButton());if (positiveText != null && positiveText.isNotEmpty)widgets.add(_buildBottomPositiveButton());return Container(height: 54.0,child: new Row(mainAxisAlignment: MainAxisAlignment.end,children: widgets,),);}Widget _buildBottomCancelButton() {return new FlatButton(onPressed: onCloseEvent,child: new Text(negativeText,style: TextStyle(fontSize: 16.0,color: Colors.grey,),),);}Widget _buildBottomPositiveButton() {return new FlatButton(onPressed: onPositivePressEvent,child: new Text(positiveText,style: TextStyle(color: Colors.red,fontSize: 16.0,),),);}
}

1.2 然后在页面中定义中间显示的Widget调用

//是否满意标识位记录int pariseSelectIndex = 0;//不满意原因标识位记录int pariseSelectIndex2 = 0;//在按钮点击的时候直接调用 void showPariseDialog() {showDialog<Null>(context: context,//点击背景不消失barrierDismissible: false,builder: (context) {//StatefulBuilder 来构建 dialog//使用参数 state来更新 dialog 中的数据内容return StatefulBuilder(builder: (context, state) {//创建dialogreturn new CommonDialog(title: "服务完成给个好平吧!",negativeText: "取消",positiveText: "确认",isShowTitleDivi: false,onPositivePressEvent: () {print("确认 关闭");Navigator.pop(context);},onCloseEvent: () {print("取消 关闭");Navigator.pop(context);},//通过state来刷新内容childWidget: buildPariseChildDialog(state),);});});}Widget buildPariseChildDialog(state){return Column(mainAxisSize: MainAxisSize.min,children: <Widget>[Row(//填充mainAxisSize: MainAxisSize.max,//平分空白mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[buildPariseChildWidget(0, "非常满意", pariseSelectIndex == 0 ? true : false,state),buildPariseChildWidget(1, "满意", pariseSelectIndex == 1 ? true : false,state),buildPariseChildWidget(2, "不满意", pariseSelectIndex == 2 ? true : false,state),],),pariseSelectIndex==2?gridViewDefaultCount(state):Container(),],);}//分析文章在这里 https://blog.csdn.net/zl18603543572/article/details/95037826Widget buildPariseChildWidget(int index, String message, bool select,state) {return Expanded(flex: 1,child: Container(margin: EdgeInsets.only(left: 5.0, right: 5.0),//设置 child 居中alignment: Alignment(0, 0),height: 30,child: new Center(child: new Material(child: new Ink(key: ValueKey(index),//设置背景decoration: new BoxDecoration(//背景color: Colors.white,//设置四周圆角 角度 这里的角度应该为 父Container height 的一半borderRadius: BorderRadius.all(Radius.circular(15.0)),//设置四周边框border: new Border.all(width: 1, color: select ? Colors.red : Colors.grey),),child: new InkResponse(borderRadius: new BorderRadius.all(new Radius.circular(15.0)),//点击或者toch控件高亮时显示的控件在控件上层,水波纹下层highlightColor: Color(0xfffbfbfb),//点击或者toch控件高亮的shape形状highlightShape: BoxShape.rectangle,//.InkResponse内部的radius这个需要注意的是，我们需要半径大于控件的宽，如果radius过小，显示的水波纹就是一个很小的圆，//水波纹的半径radius: 0.0,//水波纹的颜色 设置了highlightColor属性后 splashColor将不起效果splashColor: Color(0xfffbfbfb),//true表示要剪裁水波纹响应的界面   false不剪裁  如果控件是圆角不剪裁的话水波纹是矩形containedInkWell: true,onTap: () {pariseSelectIndex = index;print('click ' + pariseSelectIndex.toString());state(() {});},child: new Container(//不能在InkResponse的child容器内部设置装饰器颜色，否则会遮盖住水波纹颜色的，containedInkWell设置为false就能看到是否是遮盖了。width: 300.0,height: 50.0,//设置child 居中alignment: Alignment(0, 0),child: Text(message,style: TextStyle(color: select ? Colors.red : Colors.grey,fontSize: 14.0),),),),),),),),);}Widget gridViewDefaultCount(state) {int count = 3;double height = 60;return Container(margin: EdgeInsets.only(top: 20),//设置 child 居中alignment: Alignment(0, 0),height: height,//边框设置decoration: new BoxDecoration(//背景color: Color(0xfff6f6f6),//设置四周圆角 角度borderRadius: BorderRadius.all(Radius.circular(4.0)),//设置四周边框border: new Border.all(width: 1, color: Color(0xfff6f6f6)),),child: initListWidget(count,state),);}Widget initListWidget(int count,state) {List<Widget> lists = [];List<Widget> clists = [];lists.add(buildPariseSelectChildWidget(0, "出车慢", pariseSelectIndex2 == 0 ? true : false,state));lists.add(buildPariseSelectChildWidget(1, "服务差", pariseSelectIndex2 == 1 ? true : false,state));lists.add(buildPariseSelectChildWidget(2, "态度不好", pariseSelectIndex2 == 2 ? true : false,state));clists.add(Row(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: lists,));return Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: clists,);}Widget buildPariseSelectChildWidget(int index, String message, bool select,state) {return InkWell(//单击事件响应onTap: () {pariseSelectIndex2 = index;state(() {});},child: Row(mainAxisSize: MainAxisSize.min,children: <Widget>[Image.asset(select? ImageUtil.getImgsPath("phone_select_icon"): ImageUtil.getImgsPath("phone_noselect_icon"),width: 20.0,height: 20.0,),Padding(child: Text(message,style: TextStyle(fontSize: 13, color: Color(0xff666666)),),padding: EdgeInsets.only(left: 5.0),)],),);}

Flutter自定义使用Dialog并更新Dialog中的内容相关推荐

如何自定义格式，使单元格中的内容更改颜色？
Question: excel单元格有自定义格式的功能,可以将单元格中的内容更改颜色. 下面有2个问题: 1. 如何设置,使单元格中的字变颜色?比如,当单元格中的数字大于100时,要求该数字变为红色. ...
在jsp页面中点击编辑按钮，显示input边框，可编辑，点击保存按钮，输入框消失，不可编辑，并将文本框中的内容保存到数据库中
寻找的资料一. 默认readonly不允许编辑.点击编辑的时候加上边框样式,去掉readonly属性 <style>.readonly input{border:none}</st ...
浅谈android中的自定义封装易用的Dialog
转载地址:http://blog.csdn.net/u013064109/article/details/51990526 好久没写Android的博客,最近在做一个android的项目,里面用到我们 ...
Flutter更新showDialog以及showModalBottomSheet中的状态中的内容
Flutter更新showDialog以及ModalBottomSheet中的状态中的内容 1.Flutter更新showDialog中的状态中的内容很多人在用showDialog的时候应该都遇到过 ...
自定义实现ProgressDialog样式的Dialog
1. 建立一个my_progress_dialog.xml布局文件 <?xml version="1.0" encoding="utf-8"?> ...
android自定义dialog 例子,android dialog自定义实例详解
本人工作有一个月多了.对于android很多东西,都有了新的了解或者说真正的掌握.为了让更多的像我这样的小白少走弯路,所以我会坚持将我在工作中遇到的一些比较令我印象深刻的知识点整合出来给大家(顺序是按 ...
Android自定义类似ProgressDialog效果的Dialog
2019独角兽企业重金招聘Python工程师标准>>> Android自定义类似ProgressDialog效果的Dialog. 方法如下: 1.首先准备两张自己要定义成哪样子的效果 ...
Android自定义底部弹出窗-dialog(2种实现分析+源码)
Android自定义底部弹出窗-dialog(2种实现分析+源码) 上线项目功能抽取,在项目开发中,我们会在许多地方会用到底部自定义弹窗,比如设置:个人账户退出,切换,照片的拍照或者相册的调出,或者一 ...
android 自定义带输入框的dialog,Android 基本Dialog和自定义Dialog
Android 基本Dialog和自定义Dialog Dialog类是对话框的基类,但你应该避免直接实例化Dialog ,可以使用子类 1.AlertDialog 此对话框可以显示标题,最多三个按钮, ...

Flutter自定义使用Dialog并更新Dialog中的内容

1 自定义 Dialog

1.1 定义基本的弹出框

1.2 然后在页面中定义中间显示的Widget调用

Flutter自定义使用Dialog并更新Dialog中的内容相关推荐

最新文章

热门文章