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就會銷魂了