Flutter控件之Dialog
下面例子的main方法都如下：
void main(){ runApp( MaterialApp( home: new Scaffold( body: new LearnDialog(), ) ) ); }
常用dialog：
import 'package:flutter/material.dart'; class LearnDialog extends StatefulWidget{ @override State<StatefulWidget> createState() { return __LearnDialog(); } } class __LearnDialog extends State<LearnDialog>{ Widget createDialog(){ return new CustomizeDialog(); } Widget createSimpleDialog(){ return new SimpleDialog( contentPadding: EdgeInsets.all(10.0), title: new Text('我是标题'), children: <Widget>[ new Text('内容1'), new Text('内容2'), new Text('内容3'), ], ); } Widget createAlertDialog(){ return new AlertDialog( contentPadding: EdgeInsets.all(10.0), title: new Text('我是标题'), content: new Text('我是内容'), actions: <Widget>[ new FlatButton( child: new Text('确定'), onPressed: () { Navigator.of(context).pop();//关闭对话框 }, ), new FlatButton( child: new Text('取消'), onPressed: () { Navigator.of(context).pop(); }, ), ], ); } Widget createAboutDialog(){ return new AboutDialog( applicationName: '名称', applicationIcon: new Icon(Icons.ac_unit), applicationVersion: 'V1.0', children: <Widget>[ new Text("关于我们") ], ); } Widget createBottomSheet(){ return new AboutDialog( applicationName: '名称', applicationIcon: new Icon(Icons.ac_unit), applicationVersion: 'V1.0', children: <Widget>[ new Text("关于我们") ], ); } Widget createBottomSheetDialog(){ return new Container( color: Colors.blue, child: new Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch,//填满交叉轴 children: <Widget>[ new Text("111111111111111111111111111111"), new Text("222222222222222222222222222222"), new Text("3333333333333333333333333333333"), new Text("4444444444444444444444444444444"), new Text("55555555555555555555555555555555"), ], ), ); } Widget createModalBottomSheetDialog(){ return new Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ new Text("111111111111111111111111111111"), new Text("222222222222222222222222222222"), new Text("3333333333333333333333333333333"), new Text("4444444444444444444444444444444"), new Text("55555555555555555555555555555555"), ], ); } @override Widget build(BuildContext context) { return new Material( color: Colors.red, child: new Column( mainAxisSize: MainAxisSize.max, children: <Widget>[ new FlatButton( onPressed: (){ //显示 dialog showDialog( context: context, builder: (BuildContext context){ return createSimpleDialog(); }, ); }, child: new Text("SimpleDialog"), ), new FlatButton( onPressed: (){ //显示 dialog showDialog( context: context, barrierDismissible: true,//点击dialog外部 是否可以销毁 builder: (BuildContext context){ return createAlertDialog(); }, ); }, child: new Text("AlertDialog"), ), new FlatButton( onPressed: (){ //显示 dialog showDialog( context: context, builder: (BuildContext context){ return createAboutDialog(); }, ); }, child: new Text("AboutDialog"), ), new FlatButton( onPressed: (){ //显示 dialog showDialog( context: context, barrierDismissible: true, builder: (BuildContext context){ return createDialog(); }, ); }, child: new Text("自定义Dialog"), ), new RaisedButton( onPressed: (){ //显示 dialog, BottomSheet 点击外部不会消失，且外部不是半透明效果 showBottomSheet( context: context, builder: (BuildContext context){ return createBottomSheetDialog();//home 需要为 Scaffold }, ); }, child: new Text("showBottomSheet Dialog"), ), new FlatButton( onPressed: (){ //显示 dialog， 点击外部 会销毁 并且外部是半透明效果 showModalBottomSheet( context: context, builder: (BuildContext context){ return createModalBottomSheetDialog(); }, ); }, child: new Text("showModalBottomSheet 显示模态底部"), ), ], ), ); } } /** * 自定义dialog */ class CustomizeDialog extends Dialog { CustomizeDialog({ Key key, }) : super(key: key); @override Widget build(BuildContext context) { return new Padding( padding: const EdgeInsets.all(12.0), child: new Material( //创建透明层 type: MaterialType.transparency, //透明类型(dialog的半透明效果) 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( "文本内容", style: new TextStyle(fontSize: 12.0), ), ), ], ), ), ), ), ) ); } }
效果图：
自定义dialog：
上面的dialog，其实是把下图的白色区域变成了透明效果，dialog的真正大小，应该是包括设置的透明层区域的，如果点击这个区域，dialog是消失不了了，如果我注释type属性：
对应效果图：
所以如果需要去掉上图中的白色透明层，改变dialog的大小，就只需要将Material去掉就行，如下：
/** * 自定义dialog */ class CustomizeDialog extends Dialog { CustomizeDialog({ Key key, }) : super(key: key); @override Widget build(BuildContext context) { return new Padding( padding: const EdgeInsets.all(12.0), 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( "文本内容", style: new TextStyle(fontSize: 12.0), ), ), ], ), ), ), ) ); }
效果图，此时点击白色以外区域，dialog就会销魂了
