Flutter中如何实现TabBarView各内容页自适应不同高度

问题原因 #

TabBarView 本身是横向滚动的视口组件，在 ListView 这类无明确高度约束的滚动父组件内，无法自行推导子组件的高度，必须显式设置高度才能完成渲染。写死固定高度会导致短内容下方留白、长内容溢出的适配问题。

实现方案 #

通过 GlobalKey 获取每个标签页内容的实际渲染高度，监听标签切换事件动态更新外层容器高度，完全匹配当前展示内容的尺寸，无需手动写死固定值。
改造步骤：

• 给每个标签页内容绑定唯一 GlobalKey，用于获取组件渲染后的真实尺寸
• 初始化 TabController 并监听标签切换事件，切换时自动计算当前标签内容的高度
• 首帧渲染完成后计算默认选中标签的高度，避免初始状态出现布局异常
• 外层容器使用动态计算的高度值，替换原来写死的固定高度

改造后完整代码 #

class _RecipeDetailPageState extends State<RecipeDetailPage> with SingleTickerProviderStateMixin {
  final ScrollController scrollController = ScrollController();
  late TabController _tabController;
  // 每个tab对应内容的全局key，用于获取实际渲染高度
  final List<GlobalKey> _tabContentKeys = [GlobalKey(), GlobalKey()];
  // 当前tab内容的动态高度，初始给一个临时默认值
  double _currentContentHeight = 200;
  // 替换为你的接口返回对象
  dynamic _response;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    // 监听tab切换
    _tabController.addListener(() {
      if (_tabController.indexIsChanging) {
        _calculateCurrentTabHeight(_tabController.index);
      }
    });
    // 首帧渲染完成后计算第一个tab的高度
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _calculateCurrentTabHeight(0);
    });
  }

  // 计算指定索引tab内容的真实高度
  void _calculateCurrentTabHeight(int tabIndex) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final renderObject = _tabContentKeys[tabIndex].currentContext?.findRenderObject();
      if (renderObject is RenderBox) {
        setState(() {
          _currentContentHeight = renderObject.size.height;
        });
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        controller: scrollController,
        children: [
          Text(
            _response!.strMeal,
            style: const TextStyle(
              fontSize: 22,
              fontWeight: FontWeight.bold,
              color: Color(0xff042628),
            ),
          ),
          Column(
            children: [
              Container(
                decoration: BoxDecoration(
                  color: const Color(0xffE7EAF2),
                  borderRadius: BorderRadius.circular(15),
                ),
                child: TabBar(
                  controller: _tabController,
                  labelColor: Colors.white,
                  unselectedLabelColor: Colors.black,
                  indicator: BoxDecoration(
                    color: const Color(0xff042628),
                    borderRadius: BorderRadius.circular(15),
                  ),
                  tabs: const [
                    Tab(text: 'Ingredients'),
                    Tab(text: 'Instructions'),
                  ],
                ),
              ),
              // 替换原来写死高度的SizedBox，使用动态计算的高度
              SizedBox(
                height: _currentContentHeight,
                child: TabBarView(
                  controller: _tabController,
                  children: [
                    // 每个内容外层包裹容器绑定key，用于计算高度
                    Container(
                      key: _tabContentKeys[0],
                      padding: const EdgeInsets.all(16),
                      child: Text(_response!.strArea),
                    ),
                    Container(
                      key: _tabContentKeys[1],
                      padding: const EdgeInsets.all(16),
                      child: Text(_response!.strInstructions),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

注意事项 #

• 如果标签内容是接口异步加载的，在数据赋值完成、内容重新渲染后，手动调用一次_calculateCurrentTabHeight(_tabController.index)即可更新到正确高度
• 不要给绑定key的内容容器设置固定高度，否则会导致高度计算结果不符合预期
• 这个方案不会影响ListView的整体滚动逻辑，所有内容都在同一个滚动视口内，体验更连贯

内容的提问来源于stack exchange，提问作者Muhammed Anas K P