简介

Dialog 向用户传递信息的弹出层。

-这个组件没有任何可操作的选项. 相比使用这个组件, 通常我们更喜欢使用 AlertDialog或者SimpleDialog

基本用法

通常作为子窗口小部件传递给showDialog，后者显示对话框。

进阶用法

犹豫当前组件没有任何可选项目, 我们可以通过自定义样式, 去完成自己想要的各种样式的弹框, 满足我们的个性化需求

注意事项: 当前弹出的dialog并非是一个单纯的组件, 而是一个新路由界面, 如果我想通过操作dialog中的内容, 直接使用setState触发的是原界面中的状态

实例演示

import 'package:flutter/material.dart';


class DialogDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<DialogDemo> {

  void showAlertDialog(BuildContext context) {
    showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return Dialog(
          child: Container(
            height: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Text('我是一个dialog'),
                RaisedButton(
                  child: Text('取消'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                )
              ],
            ),
          )
        );
      },
    );
  }
  Widget build(BuildContext context) {
    return  RaisedButton(
        padding:  EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
        //padding
        child:  Text(
          '点我显示 Dialog',
          style:  TextStyle(
            fontSize: 18.0, //textsize
            color: Colors.white, // textcolor
          ),
        ),
        color: Theme.of(context).accentColor,
        elevation: 4.0,
        //shadow
        splashColor: Colors.blueGrey,
        onPressed: () {
          showAlertDialog(context);
        });
  }
}


class DialogMoreDemo extends StatefulWidget {
  _DialogMoreDemo createState() => _DialogMoreDemo();
}

class _DialogMoreDemo extends State<DialogMoreDemo> {
  int value = 0;
  void showCommonDialog(BuildContext context) {
    showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (context) {
        return StatefulBuilder(
          builder: (context, state) {
            return Dialog(
              child: Container(
                height: 150,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Text('我是一个dialog'),
                    RaisedButton(
                      onPressed: () {
                        state(() {
                          value += 1;
                        });
                      },
                      child:  Text("我是一个Dialog, 点我更新value: $value"),
                    ),
                    RaisedButton(
                      onPressed: () {
                       Navigator.of(context).pop();
                      },
                      child:  Text("取消"),
                    )
                  ],
                ),
              ),

            );
          }
        );
      }
    );
  }
  Widget build(BuildContext context) {
    return  Column(
      children: <Widget>[
         RaisedButton(
          padding:  EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
          //padding
          child:  Text(
          '点我显示Dialog',
          style:  TextStyle(
            fontSize: 18.0, //textsize
            color: Colors.white, // textcolor
          ),
          ),
          color: Theme.of(context).accentColor,
          elevation: 4.0,
          //shadow
          splashColor: Colors.blueGrey,
          onPressed: () {
            showCommonDialog(context);
          }
        )
      ],
    );
  }
}