Flutter中的七种对话框相关组件使用方法

原创已于 2023-10-12 15:18:56 修改 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2023-10-12 15:06:54 首次发布

flutter 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Flutter中AlertDialog、SimpleDialog、BottomSheet、CupertinoAlertDialog、CupertinoActionSheet和CupertinoPicker等对话框组件的展示方法，以及如何自定义对话框。展示了如何使用这些组件进行警告、信息显示和操作选择。

1. AlertDialog（警告对话框）

方法：

showDialog：用于显示AlertDialog。

作用描述：
AlertDialog通常用于显示警告或信息，包括一个标题、内容和操作按钮。

示例代码：

ElevatedButton(
 onPressed: null,
 style: ButtonStyle(
     // 背景颜色
     backgroundColor: MaterialStateProperty.all(
   const Color(0xFF1D50A2),
 )),
 child: SizedBox(
   height: 40,
   width: double.infinity,
   child: TextButton(
     onPressed: () {
       // TODO 实现登录逻辑
       showDialog(context: context,
           builder: (context) {
              return AlertDialog(
                 title: const Text("警告"),
                 content: const Text("这是一个AlertDialog示例。"),
                 actions: [
                   TextButton(
                     onPressed: () {
                       Navigator.of(context).pop();
                     },
                     child: const Text("取消"),
                   ),
                   TextButton(
                     onPressed: () {
                       // 返回根路由
                       Navigator.of(context)
                           .pushAndRemoveUntil(
                         MaterialPageRoute(
                           builder: (context) {
                             return const Tabs(
                               index: 2,
                             );
                           },
                         ),
                             (route) => route == null,
                       );
                     },
                     child: const Text("确定"),
                   ),
                 ],
               );
           }
       );
     },
     child: const Text(
       "登录",
       style: TextStyle(
         fontSize: 12,
         color: Colors.white,
       ),
     ),
   ),
 )),

2. SimpleDialog（简单对话框）

方法：

showDialog：用于显示SimpleDialog。

作用描述：
SimpleDialog通常用于包含自定义的操作按钮，类似AlertDialog，但可自定义操作按钮。

示例代码：

showDialog(
  context: context,
  builder: (context) {
    return SimpleDialog(
      title: Text("选择操作"),
      children: [
        SimpleDialogOption(
          onPressed: () {
            // 处理操作1
          },
          child: Text("操作1"),
        ),
        SimpleDialogOption(
          onPressed: () {
            // 处理操作2
          },
          child: Text("操作2"),
        ),
      ],
    );
  },
);

3. BottomSheet（底部对话框）

方法：

showModalBottomSheet：用于显示底部对话框。

作用描述：
BottomSheet通常用于包含一个持久性菜单或自定义内容，显示在底部。

示例代码：

showModalBottomSheet(
  context: context,
  builder: (context) {
    return Container(
      child: Text("这是一个底部对话框示例。"),
    );
  },
);

4. CupertinoAlertDialog（iOS风格的警告对话框）

方法：

showDialog：用于显示CupertinoAlertDialog。

作用描述：
CupertinoAlertDialog是iOS风格的对话框，具有iOS外观和体验。

示例代码：

showDialog(
  context: context,
  builder: (context) {
    return CupertinoAlertDialog(
      title: Text("警告"),
      content: Text("这是一个iOS风格的AlertDialog示例。"),
      actions: [
        CupertinoDialogAction(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text("确定"),
        ),
      ],
    );
  },
);

5. CupertinoActionSheet（iOS风格的操作表）

方法：

showCupertinoModalPopup：用于显示CupertinoActionSheet。

作用描述：
CupertinoActionSheet是iOS风格的操作表，类似底部对话框，可包含多个操作选项。

示例代码：

showCupertinoModalPopup(
  context: context,
  builder: (context) {
    return CupertinoActionSheet(
      title: Text("选择操作"),
      actions: [
        CupertinoActionSheetAction(
          onPressed: () {
            // 处理操作1
          },
          child: Text("操作1"),
        ),
        CupertinoActionSheetAction(
          onPressed: () {
            // 处理操作2
          },
          child: Text("操作2"),
        ),
      ],
      cancelButton: CupertinoActionSheetAction(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: Text("取消"),
      ),
    );
  },
);

6. CupertinoPicker（iOS风格的滚动选择器对话框）

方法：

showCupertinoModalPopup：用于显示CupertinoPicker。

作用描述：
CupertinoPicker是iOS风格的滚动选择器对话框，通常用于选择日期、时间等。

示例代码：

showCupertinoModalPopup(
  context: context,
  builder: (context) {
    return Container(
      height: 200,
      child: CupertinoPicker(
        itemExtent: 40,
        onSelectedItemChanged: (int index) {
          // 处理选中项的改变
        },
        children: [
          Text("选项1"),
          Text("选项2"),
          Text("选项3"),
        ],
      ),
    );
  },
);

7. 自定义对话框（Custom Dialogs）

方法：

自定义创建。

作用描述：
你可以创建自定义对话框以满足特定需求。这通常需要使用Flutter的Widget来构建自定义内容。

示例代码：

showDialog(
  context: context,
  builder: (context) {
    return Dialog(
      child: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text("自定义对话框示例"),
            SizedBox(height: 10),
            Text("这是自定义的内容。"),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text("关闭"),
            ),
          ],
        ),
      ),
    );
  },
);