Flutter：移除TabBarView固定高度，实现内容自适应动态高度

你遇到的问题核心是TabBarView本身设计为填充父容器的可用空间，当它处于无明确高度约束的SingleChildScrollView中时，无法计算自身高度，导致塌陷。即使给子ListView设置shrinkWrap: true，也无法改变TabBarView的约束问题。下面提供两种可行方案：

方案一：用IndexedStack替代TabBarView（推荐） #

这种方式更适配外层有全局滚动的场景，IndexedStack会根据当前显示的子组件高度自动调整自身高度，同时配合TabController实现页面切换。

修改步骤： #

1. 移除包裹TabBarView的SizedBox和TabBarView组件
2. 替换为IndexedStack，绑定tabController.index作为显示索引
3. 移除子组件中的Expanded（比如AmenitiesTab外层的Expanded，因为Expanded需要父级有确定高度）
4. 确保所有可滚动子组件（如ListView）保持shrinkWrap: true和NeverScrollableScrollPhysics()，让内容自适应高度并由外层SingleChildScrollView统一滚动

修改后的核心代码片段：

// 替换原来的SizedBox+TabBarView
IndexedStack(
  index: tabController.index,
  children: [
    ListView.builder(
      physics: const NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: 6,
      itemBuilder: (context, index) {
        return CoursesTab(
          index: index,
        );
      },
    ),
    // 移除Expanded，直接放置AmenitiesTab
    AmenitiesTab(
      amenities: [
        Amenity(name: 'Wi-Fi', icon: 'wifi'),
        Amenity(name: 'Parking', icon: 'parking'),
        Amenity(name: 'Swimming Pool', icon: 'pool'),
        Amenity(name: 'Gym', icon: 'gym'),
        Amenity(name: 'Spa', icon: 'spa'),
      ],
    ),
    const AboutInstituteTab(),
    ReviewsTab(
      reviews: [
        // ... 你的评论数据
      ],
    ),
    const GalleryTab(),
  ],
),

方案二：为TabBarView添加自适应高度约束 #

如果坚持使用TabBarView，可以通过IntrinsicHeight结合约束的方式实现，但这种方式可能存在性能损耗（因为需要计算子组件高度），且切换页面时高度会跳动：

修改步骤： #

1. 移除包裹TabBarView的SizedBox
2. 用IntrinsicHeight包裹TabBarView
3. 确保每个Tab子组件都能自适应高度（同样需要设置shrinkWrap和禁止内部滚动）

核心代码片段：

IntrinsicHeight(
  child: TabBarView(
    controller: tabController,
    children: [
      ListView.builder(
        physics: const NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: 6,
        itemBuilder: (context, index) {
          return CoursesTab(index: index);
        },
      ),
      // 移除Expanded
      AmenitiesTab(amenities: [...]),
      // ... 其他子组件
    ],
  ),
),

关键注意事项 #

• 所有内部可滚动组件必须设置shrinkWrap: true和NeverScrollableScrollPhysics()，避免嵌套滚动冲突，同时让内容高度自适应
• 移除子组件中的Expanded、Flex等依赖父级高度约束的组件，确保子组件能自主计算高度

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