Flutter笔记22：Dialog、AboutDialog、SimpleDialog、AlertDialog

Dialog是普通弹窗组件，可定制性非常高，子元素可以放任何内容，按钮可以任意自定义。Dialog仅仅是一个弹窗。其实Dialog完全可以实现下面三种Dialog，只不过需要布局，比较麻烦。
AboutDialog、SimpleDialog、AlertDialog不是组件，而是showDialog方法的一个参数值。
AboutDialog常常用在软件介绍上。
SimpleDialog有点类似于下拉框弹出的选项效果
AlertDialog有点类似于js的confirm弹出框或者alert弹出框或者prompt弹出框，比较常用

class DialogDemo extends StatefulWidget {
  DialogDemo({Key key}) : super(key: key);

  @override
  _DialogDemoState createState() => _DialogDemoState();
}

class _DialogDemoState extends State<DialogDemo> {
  //显示 AboutDialog
  void showAboutDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (_) => AboutDialog(
              applicationName: 'Andriod studio',
              applicationIcon: Icon(Icons.apps),
              applicationVersion: 'V3.1.1',
              children: [Text('这是Android Studio')],
            ));
  }

  //显示 SimpleDialog
  void showSimpleDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (_) => SimpleDialog(
              title: Text('选择'),
              children: [
                //选项
                SimpleDialogOption(
                  child: Text('选项1'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
                SimpleDialogOption(
                  child: Text('选项2'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            ));
  }

  //显示 AlertDialog
  void showAlertDialog(BuildContext context) {
    showDialog<void>(
        context: context,
        builder: (_) => AlertDialog(
              title: Text('AlertDialog'),
              //内容，可以是任意组件
              content: SingleChildScrollView(
                child: ListBody(
                  children: [
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                    Text('list-item'),
                  ],
                ),
              ),
              //AlertDialog的动作按钮，可以放N多个按钮
              actions: [
                FlatButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text('取消')),
              ],
            ));
  }

  @override
  Widget build(BuildContext context) {
    //普通的dialog，可定制性非常强
    // return Center(
    //   child: Dialog(
    //     child: Container(
    //       height: 200.0,
    //       child: Column(
    //         mainAxisAlignment: MainAxisAlignment.spaceAround,
    //         children: [
    //           Text('这是一个dialog'),
    //           RaisedButton(
    //             child: Text('取消'),
    //             onPressed: () {
    //               //关闭dialog，相当于关闭页面
    //               Navigator.of(context).pop();
    //             }
    //           ),
    //         ],
    //       ),
    //     ),
    //   ),
    // );
    //AboutDialog、SimpleDialog、AlertDialog
    return Column(
      children: [
        RaisedButton(
            child: Text('显示AboutDialog'),
            onPressed: () {
              showAboutDialog(context);
            }),
        RaisedButton(
            child: Text('显示SimpleDialog'),
            onPressed: () {
              showSimpleDialog(context);
            }),
        RaisedButton(
            child: Text('显示AlertDialog'),
            onPressed: () {
              showAlertDialog(context);
            }),
      ],
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！