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中的內容刷新。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章