Flutter CustomScrollView嵌套TabBarView报水平视口垂直空间无限错误

报错本质是Flutter布局约束不匹配：

• TabBarView 属于横向滚动的Viewport类组件，渲染阶段必须获取明确的垂直方向高度约束，才能正常计算自身尺寸
• 原有代码将整套DefaultTabController逻辑包裹在SliverToBoxAdapter下的Column中，Column会向子组件传递无上限的垂直高度约束，TabBarView在无限垂直空间的环境下无法完成布局计算，直接抛出异常
• 内部ListView设置的shrinkWrap: true仅能解决列表自身的高度收缩问题，无法修复父级TabBarView缺失高度约束的核心问题。

调整slivers结构，不要将需要占满剩余视口的TabBarView塞进SliverToBoxAdapter，改用SliverFillRemaining为TabBarView提供明确高度，修改后可正常运行的代码如下：

class _MessageListState extends State<MessageList> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            const SliverAppBar(
              flexibleSpace: FlexibleSpaceBar(
                title: Text('Chats'),
              ),
            ),
            // TabBar高度固定，单独放在SliverToBoxAdapter中
            SliverToBoxAdapter(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 40.0),
                child: TabBar(
                  controller: _tabController,
                  tabs: const [
                    Tab(text: 'Messages'),
                    Tab(text: 'Requests')
                  ],
                ),
              ),
            ),
            // SliverFillRemaining自动占满CustomScrollView剩余视口高度，给TabBarView明确约束
            SliverFillRemaining(
              child: TabBarView(
                controller: _tabController,
                children: <Widget>[
                  messageList(),
                  messageList(),
                ]
              ),
            )
          ],
        ),
      ),
    );
  }
}

Widget messageList() => ListView.builder(
  primary: false,
  // 父组件已有明确高度，无需shrinkWrap，避免不必要的性能损耗
  itemCount: 30,
  itemBuilder: (BuildContext context, int index) {
    return const ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage('https://someimage.jpg'),
        radius: 25.0,
      ),
      title: Text('Zenitsu'),
      trailing: Text('20.00'),
      horizontalTitleGap: 10.0,
      isThreeLine: false,
      subtitle: Text(
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam dolor quis felis facilisis. ',
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    );
  },
);

关键修改说明 #

• 移除了原有包裹整个DefaultTabController的SliverToBoxAdapter和Column，将固定高度的TabBar、需要占满剩余空间的TabBarView拆分到两个独立sliver中
• 手动初始化TabController，避免sliver嵌套场景下DefaultTabController的上下文查找异常
• 用SliverFillRemaining包裹TabBarView，自动计算CustomScrollView剩余可用高度，从根源解决无限高度约束的报错
• 移除了ListView上不必要的shrinkWrap: true，列表在明确高度的父容器中可正常滚动，同时减少性能开销

如果需要实现SliverAppBar折叠、TabBar吸顶、多Tab列表联动滚动的复杂效果，可替换为NestedScrollView作为页面根容器，将SliverAppBar、TabBar放在headerSliverBuilder回调中，TabBarView作为body即可，滚动联动体验更流畅。

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