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就会销魂了