flutter 自定义一个通用的Dialog以及Dialog中的内容刷新


import 'package:flutter/material.dart';

class ShowCommonAlert extends Dialog {
  //子布局      =======  意思是说,上下通用,中间的子布局可以当作参数传过来。
  Widget childWidget;
  //左侧按钮
  String negativeText;
  //右侧按钮
  String positiveText;
  //标题
  String title;
  //显示标题下的分隔线
  bool isShowTitleDivi;
  //显示底部确认按钮上的分隔线
  bool isShowBottomDivi;
  //左侧按钮点击事件(取消)
  Function onCloseEvent;
  //右侧按钮点击事件(确认)
  Function onPositivePressEvent;

  //标题默认高度
  double defaultTitleHeight = 40.0;

  ShowCommonAlert({
    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,
        ),
      ),
    );
  }
}

使用:

showDialog<Null>(
                        context: context,
                       //点击背景不消失
                        barrierDismissible: false,
                        builder: (context) {
                         //StatefulBuilder 来构建 dialog
                         //使用参数 state来更新 dialog 中的数据内容
                           return StatefulBuilder(builder: (context, state) {
                           //创建dialog
                           return  new ShowCommonAlert(
                             title: "生日",
                             negativeText: "取消",
                             positiveText: "确认",
                             isShowTitleDivi: false,
                             onPositivePressEvent: () {
                               setState(() {
                                  birthday= _year.toString()+"-"+_month.toString()+"-"+_day.toString();
                               });
                               Navigator.pop(context);
                             },
                             onCloseEvent: () {
                               Navigator.pop(context);
                             },

                             childWidget: Row(
                        children: <Widget>[
                          new NumberPicker.integer(
                            listViewWidth: 70,
                        minValue: 1919,
                        maxValue: DateTime.now().year,
                        initialValue: _year,
                        itemExtent: 50,
                        infiniteLoop: false,
                        onChanged: ((newValue) =>
                              state(() => _year = newValue)),
                        ),
                          new NumberPicker.integer(
                        minValue: 1,
                        maxValue: 12,
                        initialValue: _month,
                          onChanged: ((newValue) =>
                              state(() => _month = newValue)),
                        ),
                           new NumberPicker.integer(
                        minValue: 1,
                        maxValue: 31,
                        initialValue: _day,
                          onChanged: ((newValue) =>
                              state(() => _day = newValue)),
                        ),

                        ],
                      ),
                           );
                         });
                       });

传递的子布局childWidgetRow为例,showDialogStatefulBuilder有两个参数,其中第二个state,类似于widget中的setState(),可以进行dialog中的内容刷新。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值