如何在Jetpack Compose的ModalBottomSheet中添加固定底部栏

要实现ModalBottomSheet中底部操作栏始终固定（无论展开/收起状态），核心是把操作栏从滚动内容区域剥离，用Stack+Positioned实现悬浮固定：

实现步骤 #

• 用Stack作为Modal的根布局，包含可滚动内容区和固定底部栏两个子组件
• 内容区用SingleChildScrollView包裹，并设置底部内边距，避免内容被底部栏遮挡
• 底部栏通过Positioned固定在Modal底部，确保始终可见

代码示例 #

showModalBottomSheet(
  context: context,
  isScrollControlled: true, // 允许Modal自适应高度，避免内容截断
  builder: (context) {
    return Stack(
      children: [
        // 可滚动内容区域
        SingleChildScrollView(
          padding: const EdgeInsets.only(bottom: 80), // 给底部操作栏预留高度
          child: Column(
            children: List.generate(20, (index) {
              return Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text('列表项 $index'),
              );
            }),
          ),
        ),
        // 固定底部操作栏
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: SafeArea( // 适配全面屏底部安全区域
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              color: Theme.of(context).bottomSheetTheme.backgroundColor ?? Colors.white,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                    onPressed: () => Navigator.pop(context),
                    child: const Text('取消'),
                  ),
                  const SizedBox(width: 16),
                  ElevatedButton(
                    onPressed: () {
                      // 执行确认逻辑
                      Navigator.pop(context);
                    },
                    child: const Text('确认'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  },
);

关键注意事项 #

• 必须开启isScrollControlled: true，否则Modal高度受限，底部栏可能被截断
• 内容区的padding.bottom要和底部栏的实际高度匹配，保证最后一行内容完整显示
• 用SafeArea包裹底部栏，避免在全面屏手机上被底部手势导航栏遮挡

内容的提问来源于stack exchange，提问作者user17554942