Flutter开发iOS开发杂货铺Flutter

Flutter Dialog(弹出框)

2018-12-12  本文已影响759人  iwakevin

在 Flutter 里有大大小小的弹出框,例如:AlertDialog、SimpleDialog 等。

对于弹出框这些都不会直接使用它的组件,而是使用对应的调用函数(showDialog)。

AlertDialog

AlertDialog 是一个用于向用户传递信息的弹出层。

new MaterialButton(
    color: Colors.blue,
    child: new Text('点我'),
    onPressed: () {
        showDialog<Null>(
            context: context,
            barrierDismissible: false,
            builder: (BuildContext context) {
                return new AlertDialog(
                    title: new Text('标题'),
                    content: new SingleChildScrollView(
                        child: new ListBody(
                            children: <Widget>[
                                new Text('内容 1'),
                                new Text('内容 2'),
                            ],
                        ),
                    ),
                    actions: <Widget>[
                        new FlatButton(
                            child: new Text('确定'),
                            onPressed: () {
                                Navigator.of(context).pop();
                            },
                        ),
                    ],
                );
            },
        ).then((val) {
            print(val);
        });
    },
),

SimpleDialog

SimpleDialog 是一个用于向用户传递确定信息并提供选项的弹出层。

new MaterialButton(
    color: Colors.blue,
    child: new Text('点我'),
    onPressed: () {
        showDialog<Null>(
            context: context,
            builder: (BuildContext context) {
                return new SimpleDialog(
                    title: new Text('选择'),
                    children: <Widget>[
                        new SimpleDialogOption(
                            child: new Text('选项 1'),
                            onPressed: () {
                                Navigator.of(context).pop();
                            },
                        ),
                        new SimpleDialogOption(
                            child: new Text('选项 2'),
                            onPressed: () {
                                Navigator.of(context).pop();
                            },
                        ),
                    ],
                );
            },
        ).then((val) {
            print(val);
        });
    },
),
上一篇下一篇

猜你喜欢

热点阅读