Flutter中DraggableScrollableSheet内TabView的动态高度适配问题

兄弟，我太懂你这个困扰了！DraggableScrollableSheet本身就是靠拖动动态改变高度的，而咱们常用的TabBarView（也就是你说的TabView）偏偏需要明确的高度约束——直接放进去肯定会报“缺失高度约束”的错误，用固定高度的SizedBox又完全失去了动态适配不同设备的意义，确实头疼。

别慌，其实核心思路就是让TabBarView能自动获取DraggableScrollableSheet当前的可用高度，这里给你两个实用的解决办法：

方法一：用LayoutBuilder+Expanded自动适配（最省心） #

DraggableScrollableSheet的builder回调里，我们可以套一个LayoutBuilder，它能实时拿到父容器的约束尺寸，再结合Column里的Expanded组件，就能让TabBarView自动占据Sheet剩下的所有空间，不管你怎么拖动Sheet，高度都会跟着动态变化。

给你写个完整的示例代码：

class MySheetWithTabView extends StatefulWidget {
  const MySheetWithTabView({super.key});

  @override
  State<MySheetWithTabView> createState() => _MySheetWithTabViewState();
}

class _MySheetWithTabViewState extends State<MySheetWithTabView> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    // 初始化TabController，length对应标签数量
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    // 记得释放控制器，避免内存泄漏
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sheet里的TabView')),
      body: DraggableScrollableSheet(
        initialChildSize: 0.6, // 初始高度占屏幕的60%
        minChildSize: 0.3, // 最小可拖动高度
        maxChildSize: 0.9, // 最大可拖动高度
        builder: (context, scrollController) {
          return LayoutBuilder(
            builder: (context, constraints) {
              return Column(
                children: [
                  // 顶部的TabBar
                  TabBar(
                    controller: _tabController,
                    tabs: const [
                      Tab(text: '列表页'),
                      Tab(text: '详情页'),
                    ],
                  ),
                  // 用Expanded让TabBarView自动占据剩余空间
                  Expanded(
                    child: TabBarView(
                      controller: _tabController,
                      children: [
                        // 第一个标签页：可滚动的ListView
                        ListView.builder(
                          padding: const EdgeInsets.all(16),
                          itemCount: 30,
                          itemBuilder: (context, index) => ListTile(
                            title: Text('列表条目 $index'),
                            subtitle: const Text('这是测试内容'),
                          ),
                        ),
                        // 第二个标签页：任意内容
                        const Center(
                          child: Text('这是第二个标签的内容'),
                        ),
                      ],
                    ),
                  ),
                ],
              );
            },
          );
        },
      ),
    );
  }
}

这个方法的好处是完全不用手动计算高度，Expanded会自动处理TabBar和TabBarView的空间分配，不管是手机平板还是不同屏幕尺寸，都能完美适配。

方法二：手动计算高度（适合精细控制） #

如果你需要更精细的控制（比如给TabBarView留一些固定的底部间距），也可以通过LayoutBuilder的constraints.maxHeight手动计算高度，比如：

// 替换上面的Expanded部分
Container(
  height: constraints.maxHeight - kToolbarHeight, // 减去TabBar的高度（kToolbarHeight是系统默认的TabBar高度）
  child: TabBarView(
    // ... 内容和之前一样
  ),
)

不过这个方法需要你自己处理高度计算，不如第一个方法省心，除非有特殊需求，不然优先用方法一。

最后再提醒一句：一定要记得在State类里正确初始化和释放TabController，不然会出现异常哦！

备注：内容来源于stack exchange，提问作者SimpleCoder