Flutter无AppBar时如何根据文本行数调整TabView内容高度

你当前代码有两个核心问题导致TabBarView无法自适应内容高度：

• 外层Container写死了全屏高度，最外层布局本身就被强制撑满
• 用Expanded包裹TabBarView，会强制组件占满Column剩余纵向空间，完全忽略子组件本身的高度需求
  直接移除Expanded会触发纵向无界约束报错，因为TabBarView本身要求父组件提供明确的高度边界，我们只需要动态计算当前选中tab的内容高度，给TabBarView传入对应高度即可实现自适应效果。

1. 首先在State类中定义高度测量需要的变量和方法

late TabController tabController;
// 存储每个Tab对应的内容高度
final List<double> _tabContentHeights = List.filled(3, 100);
// 当前展示的内容区域高度
double _currentContentHeight = 100;
// 给每个Tab内容绑定GlobalKey用于测量高度
final GlobalKey _tab1Key = GlobalKey();
final GlobalKey _tab2Key = GlobalKey();
final GlobalKey _tab3Key = GlobalKey();

// 测量指定key对应组件的渲染高度
double _getRenderHeight(GlobalKey key) {
  final RenderBox? renderBox = key.currentContext?.findRenderObject() as RenderBox?;
  return renderBox?.size.height ?? 100;
}

@override
void initState() {
  super.initState();
  tabController = TabController(length: 3, vsync: this);
  // 首帧渲染完成后测量所有Tab的内容高度
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _tabContentHeights[0] = _getRenderHeight(_tab1Key);
    _tabContentHeights[1] = _getRenderHeight(_tab2Key);
    _tabContentHeights[2] = _getRenderHeight(_tab3Key);
    setState(() {
      _currentContentHeight = _tabContentHeights[0];
    });
  });
  // 监听Tab切换，更新内容区域高度
  tabController.addListener(() {
    if (!tabController.indexIsChanging) {
      setState(() {
        _currentContentHeight = _tabContentHeights[tabController.index];
      });
    }
  });
}

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

2. 修改原有布局代码，移除固定高度和Expanded组件

Container(
  // 移除原有写死的全屏高度属性
  child: Column(
    mainAxisSize: MainAxisSize.min, // 核心配置：Column高度跟随内容自适应
    children: [
      Container(
        // 修正原有笔误：宽度应该取屏幕宽度而非屏幕高度
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
            color: Colors.redAccent,
            borderRadius: BorderRadius.circular(5)),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.all(5),
              child: TabBar(
                unselectedLabelColor: Colors.white,
                labelColor: Colors.black,
                indicatorColor: Colors.white,
                indicatorWeight: 2,
                indicator: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(5),
                ),
                controller: tabController,
                tabs: const [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                  Tab(text: 'Tab 3'),
                ],
              ),
            ),
          ],
        ),
      ),
      // 移除原有Expanded包裹，使用动态高度的SizedBox承载TabBarView
      SizedBox(
        height: _currentContentHeight,
        child: TabBarView(
          controller: tabController,
          children: [
            Container(key: _tab1Key, child: const Text("Tab 1\n多行文本会自动撑开高度\n第三行测试内容")),
            Container(key: _tab2Key, child: const Text("Tab 2\n两行内容高度")),
            Container(key: _tab3Key, child: const Text("Tab 3 单行内容")),
          ],
        ),
      ),
    ],
  ),
)

• 所有Column组件必须配置mainAxisSize: MainAxisSize.min，否则Column默认会撑满父组件全部可用高度，自适应配置不生效
• 如果Tab内容为动态渲染（比如接口返回可变长度文本、列表），在内容更新完成后重新调用_getRenderHeight方法更新对应高度值即可
• 上述为Flutter原生实现，无第三方依赖，兼容所有稳定版Flutter SDK

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