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);

  @override
  Widget 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,
                  ),
                  //中间显示的Widget
                  new 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) {
            //创建dialog
            return 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/95037826
  Widget 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),
          )
        ],
      ),
    );
  }