Flutter实现类似Snapchat的带Tabs的BottomSheet问题求助

问题分析 #

你需要实现类似Snapchat更换Bitmoji服饰的BottomSheet：

• Tabs和顶部手柄固定，TabView内容独立滚动
• 拉动手柄直接切换到最大高度，无中间档位

当前代码存在两个问题：

1. TabView内容被Tabs遮挡
2. 拖动BottomSheet时出现多个停留档位

解决方案 #

1. 修复TabView内容遮挡问题 #

移除CustomScrollView+SliverAppBar的组合，改用固定布局结构，让TabBar始终悬浮在顶部，TabBarView内容独立滚动：

• 用Column包裹顶部手柄、TabBar和TabBarView
• TabBarView通过Expanded填充剩余空间，确保内容不被顶部遮挡
• 每个Tab内部使用独立的滚动组件（如SingleChildScrollView）实现内容滚动

2. 移除拖动中间档位 #

在DraggableScrollableSheet中添加snap: true属性，开启吸附效果，拖动时只会在minChildSize和maxChildSize两个档位切换，无中间停留。

修正后的完整代码 #

return Scaffold(
  // ...其他页面内容
  bottomSheet: DraggableScrollableSheet(
    maxChildSize: 0.7,
    minChildSize: 0.54,
    initialChildSize: 0.54,
    expand: false,
    snap: true, // 开启吸附，移除中间档位
    builder: (context2, controller2) {
      return Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
          color: Colors.white, // 根据你的主题设置背景色
        ),
        child: Column(
          children: [
            // 顶部手柄
            Container(
              width: MediaQuery.of(context2).size.width / 3,
              margin: const EdgeInsets.symmetric(vertical: 10),
              height: MediaQuery.of(context2).size.width / 60,
              decoration: BoxDecoration(
                color: AppColor.primary,
                borderRadius: BorderRadius.circular(30),
              ),
            ),
            // TabBar
            TabBar(
              controller: tabController,
              isScrollable: true,
              tabAlignment: TabAlignment.start,
              physics: const BouncingScrollPhysics(),
              tabs: const [
                Tab(child: Icon(Icons.ac_unit)),
                Tab(child: Icon(Icons.back_hand)),
                Tab(child: Icon(Icons.ac_unit)),
                Tab(child: Icon(Icons.back_hand)),
                Tab(child: Icon(Icons.ac_unit)),
                Tab(child: Icon(Icons.back_hand)),
                Tab(child: Icon(Icons.ac_unit)),
                Tab(child: Icon(Icons.back_hand)),
                Tab(child: Icon(Icons.ac_unit)),
                Tab(child: Icon(Icons.back_hand)),
                Tab(child: Icon(Icons.ac_unit)),
              ],
            ),
            // TabBarView，独立滚动
            Expanded(
              child: TabBarView(
                controller: tabController,
                children: [
                  SingleChildScrollView(
                    physics: const BouncingScrollPhysics(),
                    child: const Text(
                      "data\ngggg\ngggg\nggggg\ngggg\ng\ng\ng\ng\ng\ng\ng\n"
                      "更多内容\ngggg\ngggg\nggggg\ngggg\ng\ng\ng\ng\ng\ng\ng\n",
                    ),
                  ),
                  const Text("data2"),
                  const Text("data"),
                  const Text("data2"),
                  const Text("data"),
                  const Text("data2"),
                  const Text("data"),
                  const Text("data2"),
                  const Text("data"),
                  const Text("data2"),
                  const Text("data"),
                ],
              ),
            ),
          ],
        ),
      );
    },
  ),
);

关键说明 #

• snap: true：让BottomSheet拖动时直接在最小和最大高度间切换，无中间档位
• 独立滚动：每个Tab内的SingleChildScrollView负责自身内容滚动，不会触发整个BottomSheet的拖动
• 固定布局：顶部手柄和TabBar通过Column固定在上方，不会随TabView滚动移动

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