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