Flutter – 对话框

简介

Flutter 中的对话框（Dialog）是一种常见的 UI 元素，用于显示警告、消息、确认等内容。Flutter 提供了多种内置的对话框类型，也允许开发者自定义对话框样式。

内置对话框类型

Flutter 内置了三种对话框类型，分别是：AlertDialog、SimpleDialog 和 BottomSheet。

AlertDialog

AlertDialog 组件用于显示紧急警告或确认信息，允许开发者设置对话框标题、内容和按钮等属性。AlertDialog 的样式可以根据应用主题自定义。

下面是一个 AlertDialog 组件示例：

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text("警告"),
      content: Text("您确定要删除吗？"),
      actions: <Widget>[
        FlatButton(
          child: Text("取消"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        FlatButton(
          child: Text("确定"),
          onPressed: () {
             // TODO: 继续操作
             Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

SimpleDialog

SimpleDialog 组件用于显示一组选项，用户可以从中选择一个选项，允许开发者自定义 SimpleDialog 组件的样式。

下面是一个 SimpleDialog 组件示例：

showDialog(
  context: context,
  builder: (BuildContext context) {
    return SimpleDialog(
      title: Text('选择一种水果'),
      children: <Widget>[
        SimpleDialogOption(
          child: Text('苹果'),
          onPressed: () {
            // TODO: 点击了“苹果”选项
            Navigator.of(context).pop();
          },
        ),
        SimpleDialogOption(
          child: Text('香蕉'),
          onPressed: () {
            // TODO: 点击了“香蕉”选项
            Navigator.of(context).pop();
          },
        ),
        SimpleDialogOption(
          child: Text('橙子'),
          onPressed: () {
            // TODO: 点击了“橙子”选项
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

BottomSheet

BottomSheet 组件用于在屏幕底部显示一个可交互的表单或视图。BottomSheet 允许开发者自定义样式，并提供了两种类型的 BottomSheet：持久的 BottomSheet 和模态的 BottomSheet。持久的 BottomSheet 显示在应用的主界面上，而模态的 BottomSheet 会覆盖整个应用界面，防止用户与其他 UI 元素交互。

下面是一个 BottomSheet 组件示例：

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      child: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Text(
          '这是一个模态的 BottomSheet',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 24.0,
            color: Colors.black54,
          ),
        ),
      ),
    );
  },
);

自定义对话框样式

Flutter 允许开发者根据自己的需求自定义对话框的样式。开发者可以使用 Stack 和 Positioned 组件自定义对话框的位置和大小，并在其中添加任意 UI 元素以及交互组件。

下面是一个自定义对话框的示例：

showDialog(
  context: context,
  builder: (BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          child: GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: Container(
              color: Color.fromRGBO(0, 0, 0, 0.5),
            ),
          ),
        ),
        Positioned(
          top: 200,
          left: 20,
          right: 20,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text(
                    "自定义对话框标题",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: TextField(
                    decoration: InputDecoration(
                      hintText: "请输入内容",
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      FlatButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        child: Text(
                          "取消",
                          style: TextStyle(color: Colors.red),
                        ),
                      ),
                      FlatButton(
                        onPressed: () {
                          // TODO: 执行操作
                          Navigator.of(context).pop();
                        },
                        child: Text("确定"),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  },
);

结论

Flutter 中的对话框是一个非常常见的 UI 元素，Flutter 提供了多种内置的对话框类型，也允许开发者自定义对话框样式。自定义对话框样式可以使用 Stack 和 Positioned 组件，从而实现更加强大的 UI 处理能力，助力开发更加美观的 UI 界面。