Flutter中ListView嵌套TabBar出现渲染错误，如何无需固定高度解决？

你遇到的RenderBox was not laid out: hasSize断言错误，核心原因是ListView作为滚动容器，其内部子组件没有明确的高度约束，而Expanded需要依赖父级的确定尺寸来分配剩余空间，两者冲突导致TabBar/TabBarView无法正确获取布局尺寸。以下是两种无需固定高度的解决方案：

方案1：用CustomScrollView重构布局（推荐） #

将原ListView替换为CustomScrollView，通过Sliver组件组合布局，让TabBar自适应剩余空间：

CustomScrollView(
  slivers: [
    // 包裹原ListView中的其他非TabBar组件
    SliverToBoxAdapter(
      child: Container(
        height: 200,
        color: Colors.grey[200],
        child: const Center(child: Text("其他滚动内容")),
      ),
    ),
    // TabBar固定在顶部（可通过pinned控制是否固定）
    const SliverAppBar(
      pinned: true,
      backgroundColor: Colors.white,
      elevation: 2,
      bottom: TabBar(
        tabs: [
          Tab(text: "标签1"),
          Tab(text: "标签2"),
          Tab(text: "标签3"),
        ],
      ),
    ),
    // TabBarView自动填充剩余屏幕空间
    SliverFillRemaining(
      child: TabBarView(
        children: [
          ListView.builder(
            itemCount: 30,
            itemBuilder: (context, index) => ListTile(title: Text("标签1内容 $index")),
          ),
          Center(child: Text("标签2内容")),
          Center(child: Text("标签3内容")),
        ],
      ),
    ),
  ],
)

方案2：给TabBar区域添加动态高度约束（保留原ListView） #

如果必须保留ListView，可通过MediaQuery动态计算TabBar区域的高度，避免固定值：

ListView(
  children: [
    // 上方其他组件
    Container(
      height: 150,
      color: Colors.blue[100],
      child: const Center(child: Text("上方固定内容")),
    ),
    // 动态约束TabBar区域高度
    ConstrainedBox(
      constraints: BoxConstraints(
        // 计算方式：屏幕总高度 - 状态栏高度 - 上方组件高度 - 底部安全区高度
        minHeight: MediaQuery.of(context).size.height -
            MediaQuery.of(context).padding.top -
            150 -
            MediaQuery.of(context).padding.bottom,
      ),
      child: Column(
        children: [
          const TabBar(
            tabs: [
              Tab(text: "标签A"),
              Tab(text: "标签B"),
            ],
          ),
          Expanded(
            child: TabBarView(
              children: [
                // 内部滚动组件需设置shrinkWrap和禁止自身滚动
                ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: 20,
                  itemBuilder: (context, index) => ListTile(title: Text("标签A项 $index")),
                ),
                Center(child: Text("标签B内容")),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
)

注意事项 #

• 若TabBarView内部包含滚动组件，需设置shrinkWrap: true和physics: NeverScrollableScrollPhysics()，避免嵌套滚动冲突，让外层ListView统一处理滚动逻辑。
• 方案1的CustomScrollView是更优选择，它统一管理滚动上下文，避免布局约束冲突，同时性能更优。

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