Flutter - 自定义Dialog
开发中，我们经常需要向用户展示信息，多数情况下，我们使用dialog展示提示信息，那么在Flutter中如何创建dialog, 并使用呢？现在就让我们来看看如何打造我们自己的dialog对象。
So Easy!
Dialog对象，我们需要重写build函数
自定义Dialog对象，需要继承Dialog类，尽管Dialog提供了child参数供写视图界面，但是往往会达不到我们想要的效果，因为默认的Dialog背景框是满屏的。。。那么我们就需要完全定义界面了，就需要重写build函数。下面我们编写一个加载对话框，如图示：
加载对话框
如图，我们需要打造一个类似的对话框，应该具体实现呢？首先，继承Dialog
import 'package:flutter/material.dart';
// ignore: must_be_immutable
class LoadingDialog extends Dialog {
String text;
LoadingDialog({Key key, @required this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Material( //创建透明层
type: MaterialType.transparency, //透明类型
child: new Center( //保证控件居中效果
child: new SizedBox(
width: 120.0,
height: 120.0,
child: new Container(
decoration: ShapeDecoration(
color: Color(0xffffffff),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(),
new Padding(
padding: const EdgeInsets.only(
top: 20.0,
),
child: new Text(
text,
style: new TextStyle(fontSize: 12.0),
),
),
],
),
),
),
),
);
}
}
上面我们已经创建了一个加载对话框，那么我们该如何展示这个dialog呢？showDialog函数
showDialog<Null>(
context: context, //BuildContext对象
barrierDismissible: false,
builder: (BuildContext context) {
return new LoadingDialog( //调用对话框
text: '正在获取详情...',
);
});
对话框展示后，我们还需要关闭呀。关闭其实就很简单了！
Navigator.pop(context); //关闭对话框
不要着急，听我说完嘛
再来个栗子，看客请注意
// ignore: must_be_immutable
class MessageDialog extends Dialog {
String title;
String message;
String negativeText;
String positiveText;
Function onCloseEvent;
Function onPositivePressEvent;
MessageDialog({
Key key,
@required this.title,
@required this.message,
this.negativeText,
this.positiveText,
this.onPositivePressEvent,
@required this.onCloseEvent,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Padding(
padding: const EdgeInsets.all(15.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: new Stack(
alignment: AlignmentDirectional.centerEnd,
children: <Widget>[
new Center(
child: new Text(
title,
style: new TextStyle(
fontSize: 19.0,
),
),
),
new GestureDetector(
onTap: this.onCloseEvent,
child: new Padding(
padding: const EdgeInsets.all(5.0),
child: new Icon(
Icons.close,
color: Color(0xffe0e0e0),
),
),
),
],
),
),
new Container(
color: Color(0xffe0e0e0),
height: 1.0,
),
new Container(
constraints: BoxConstraints(minHeight: 180.0),
child: new Padding(
padding: const EdgeInsets.all(12.0),
child: new IntrinsicHeight(
child: new Text(
message,
style: TextStyle(fontSize: 16.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 new Flex(
direction: Axis.horizontal,
children: widgets,
);
}
Widget _buildBottomCancelButton() {
return new Flexible(
fit: FlexFit.tight,
child: new FlatButton(
onPressed: onCloseEvent,
child: new Text(
negativeText,
style: TextStyle(
fontSize: 16.0,
),
),
),
);
}
Widget _buildBottomPositiveButton() {
return new Flexible(
fit: FlexFit.tight,
child: new FlatButton(
onPressed: onPositivePressEvent,
child: new Text(
positiveText,
style: TextStyle(
color: Color(Colors.teal.value),
fontSize: 16.0,
),
),
),
);
}
}
效果图：
消息对话框
通过查看评论，评论里有朋友说对话框不支持透明区域的点击
逻辑：通过 ** Stack ** 叠加一个 ** GestureDetector ** 布局，添加一个点击事件即可。这个方法是一个网友告诉我的，之前我也很头疼这个，感谢！
查看源码：
WillPopScope(
onWillPop: () {
_onNavigationClickEvent();
return Future.value(false);
},
child: Material(
type: MaterialType.transparency,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
GestureDetector(onTap: _onNavigationClickEvent),
_buildContentView(), //构建具体的对话框布局内容
],
),
),
)
