案例概述

BottomSheet 是从屏幕底部滑出的面板。它常用于显示菜单、选项、表单等内容。Flutter 提供了两种 BottomSheet：模态底部工作表（showModalBottomSheet）和持久底部工作表（BottomSheet）。本案例展示了如何使用 BottomSheet。

核心概念

1. 模态底部工作表

showModalBottomSheet 显示一个模态的底部工作表，用户必须与其交互才能返回。

2. 持久底部工作表

BottomSheet 是一个持久的底部工作表，可以与主内容共存。

3. 自定义内容

可以在底部工作表中放置任何 Widget。

代码详解

示例 1：基础底部工作表

class BasicBottomSheetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (context) => Container(
            padding: const EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Text('底部工作表'),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () => Navigator.pop(context),
                  child: const Text('关闭'),
                ),
              ],
            ),
          ),
        );
      },
      child: const Text('显示底部工作表'),
    );
  }
}

代码解释： 这是最基础的底部工作表。showModalBottomSheet 显示一个模态的底部面板。

示例 2：菜单底部工作表

class MenuBottomSheetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (context) => Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ListTile(
                leading: const Icon(Icons.edit),
                title: const Text('编辑'),
                onTap: () => Navigator.pop(context),
              ),
              ListTile(
                leading: const Icon(Icons.delete),
                title: const Text('删除'),
                onTap: () => Navigator.pop(context),
              ),
              ListTile(
                leading: const Icon(Icons.share),
                title: const Text('分享'),
                onTap: () => Navigator.pop(context),
              ),
            ],
          ),
        );
      },
      child: const Text('显示菜单'),
    );
  }
}

代码解释： 这个示例展示了菜单式的底部工作表。通过 ListTile 显示菜单项。

示例 3：表单底部工作表

class FormBottomSheetExample extends StatefulWidget {
  @override
  State<FormBottomSheetExample> createState() => _FormBottomSheetExampleState();
}

class _FormBottomSheetExampleState extends State<FormBottomSheetExample> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (context) => Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                TextField(
                  controller: _controller,
                  decoration: const InputDecoration(
                    hintText: '输入内容',
                    border: OutlineInputBorder(),
                  ),
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () => Navigator.pop(context),
                  child: const Text('提交'),
                ),
              ],
            ),
          ),
        );
      },
      child: const Text('显示表单'),
    );
  }
}

代码解释： 这个示例展示了表单式的底部工作表。在底部工作表中放置 TextField。

示例 4：自定义底部工作表

class CustomBottomSheetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
          ),
          builder: (context) => Container(
            padding: const EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  width: 40,
                  height: 4,
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
                const SizedBox(height: 16),
                const Text('自定义底部工作表'),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () => Navigator.pop(context),
                  child: const Text('关闭'),
                ),
              ],
            ),
          ),
        );
      },
      child: const Text('显示自定义工作表'),
    );
  }
}

代码解释： 这个示例展示了自定义样式的底部工作表。通过 shape 参数添加圆角。

示例 5：选择底部工作表

class SelectBottomSheetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (context) => Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Padding(
                padding: EdgeInsets.all(16),
                child: Text('选择选项'),
              ),
              ...List.generate(3, (index) {
                return ListTile(
                  title: Text('选项 $index'),
                  onTap: () => Navigator.pop(context, index),
                );
              }),
            ],
          ),
        );
      },
      child: const Text('显示选择'),
    );
  }
}

代码解释： 这个示例展示了选择式的底部工作表。用户可以选择一个选项。

高级话题

1. 动态/响应式设计

根据屏幕大小调整底部工作表。

2. 动画与过渡

自定义底部工作表动画。

3. 搜索/过滤/排序

在底部工作表中实现搜索。

4. 选择与批量操作

支持多选。

5. 加载与缓存

显示加载状态。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义样式。

9. 数据持久化/导出

保存状态。

10. 单元测试与集成测试

测试功能。

PC 端适配要点

• 根据屏幕大小调整工作表大小
• 支持 ESC 键关闭
• 提供清晰的操作按钮

实际应用场景

• 菜单选项：显示操作菜单
• 选择器：选择选项
• 表单输入：输入信息
• 内容展示：展示详细内容

扩展建议

• 学习高级底部工作表库
• 研究性能优化
• 探索自定义动画
• 集成表单库

总结

底部工作表是展示内容和获取用户输入的有效方式。通过灵活使用 showModalBottomSheet，可以创建各种底部工作表效果。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net