Flutter – 对话框

Flutter提供了对话框widget，可以用于提醒用户，收集用户输入等操作。在本文中，我们将介绍如何创建不同类型的对话框。

简单对话框

简单对话框可以用于提醒用户某个事件的发生。下面是创建简单对话框的代码示例。

showDialog(
    context: context,
    builder: (BuildContext context) {
        return AlertDialog(
            title: Text("标题"),
            content: Text("内容"),
            actions: [
                FlatButton(
                    onPressed: () {
                        Navigator.of(context).pop();
                    },
                    child: Text("关闭")
                )
            ],
        );
    }
);

在上面的代码中，我们使用showDialog方法创建了一个对话框。方法接受一个BuildContext对象，用于获取当前上下文。builder参数是一个回调函数，需要返回要显示的对话框widget。在我们的代码示例中，我们使用了Flutter提供的AlertDialog widget。

带有选择的对话框

当我们需要让用户进行选择时，我们可以使用IndirectInformationDialog widget。下面是创建带有选择的对话框的代码示例。

showDialog(
    context: context,
    builder: (BuildContext context) {
        return SimpleDialog(
            title: Text("请选择一个选项"),
            children: [
                SimpleDialogOption(
                    onPressed: () {
                        Navigator.of(context).pop(1);
                    },
                    child: Text("选项1")
                ),
                SimpleDialogOption(
                    onPressed: () {
                        Navigator.of(context).pop(2);
                    },
                    child: Text("选项2")
                )
            ],
        );
    }
).then((value) {
    print("选择了 $value");
});

在上面的代码中，我们使用了Flutter提供的SimpleDialog widget。类似于AlertDialog，SimpleDialog也可以接受title和content等参数。

另外，对话框有一个非常有用的特性，即可以通过回调接收用户在对话框中的操作结果。在上面的代码中，我们使用了.then()函数，用于接收用户选择对话框中选中项的值。

输入框

当我们需要收集用户的输入时，我们可以使用TextField widget在对话框中添加一个输入框。下面是创建带有输入框的对话框的代码示例。

String inputText = "";

showDialog(
    context: context,
    builder: (BuildContext context) {
        return AlertDialog(
            title: Text("请输入您的姓名"),
            content: TextField(
                onChanged: (value) {
                    inputText = value; 
                }
            ),
            actions: [
                FlatButton(
                    onPressed: () {
                        Navigator.of(context).pop(inputText);
                    },
                    child: Text("确定")
                )
            ],
        );
    }
).then((value) {
    print("输入的用户名是 $value");
});

在上面的代码中，我们向对话框中添加了一个TextField widget，用于用户输入。当用户点击确定按钮时，我们通过回调函数将用户输入的值返回。