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)),
),
],
),
);
});
});
傳遞的子佈局childWidget以Row爲例,showDialog中StatefulBuilder有兩個參數,其中第二個state,類似於widget中的setState(),可以進行dialog中的內容刷新。