Flutter 弹框艺术：轻松驾驭对话框、提示框和底部弹框

2023-11-08 15:19:02

Flutter 弹框：点亮你的应用交互

在 Flutter 中，弹框是与用户交互的强大工具，可用于各种场景，如信息展示、用户输入收集和提供操作选项。Flutter 提供了多种弹框类型，每种类型都有其独特的属性和用途。本文将深入探讨四种常见的 Flutter 弹框类型：AlertDialog、SimpleDialog、SimpleDialogOption 和 BottomSheet，并通过示例代码展示它们的创建和使用。

AlertDialog：经典对话框

AlertDialog 是 Flutter 中最常用的弹框类型，它提供了一个经典的对话框界面，包含标题、内容和操作按钮。它的属性包括：

title: 对话框的标题
content: 对话框的内容
actions: 对话框的按钮列表

使用 AlertDialog ，您可以轻松创建包含信息或确认提示的弹出窗口。

AlertDialog(
  title: Text('标题'),
  content: Text('内容'),
  actions: [
    TextButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text('确定'),
    ),
    TextButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text('取消'),
    ),
  ],
);

SimpleDialog：简约对话框

SimpleDialog 是 AlertDialog 的简化版本，它没有标题，只包含内容和按钮列表。它的属性包括：

children: 对话框内容列表
actions: 对话框的按钮列表

SimpleDialog 适用于需要提供选项列表或简单信息时。

SimpleDialog(
  children: [
    Text('内容1'),
    Text('内容2'),
  ],
  actions: [
    TextButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text('确定'),
    ),
    TextButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text('取消'),
    ),
  ],
);

SimpleDialogOption：对话框选项

SimpleDialogOption 是 SimpleDialog 的一项选项，它允许您添加一个带有标题和点击事件的选项。它的属性包括：

child: 选项的内容
onPressed: 选项的点击事件
enabled: 选项是否可用

使用 SimpleDialogOption ，您可以创建交互式选项列表。

SimpleDialogOption(
  child: Text('选项1'),
  onPressed: () {
    Navigator.pop(context, '选项1');
  },
);

BottomSheet：底部弹框

BottomSheet 是一个底部弹框，它从屏幕底部滑动出来。它的属性包括：

title: 底部弹框的标题
content: 底部弹框的内容
actions: 底部弹框的按钮列表

BottomSheet 适用于需要提供更多信息的场景，如过滤器或设置面板。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return BottomSheet(
      title: Text('标题'),
      content: Text('内容'),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('确定'),
        ),
        TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('取消'),
        ),
      ],
    );
  },
);