Flutter屏幕中间TabBar使用报错及TabBar消失问题求助

问题现象 #

• 引入TabBarView后触发渲染错误：RenderBox was not laid out: _RenderColoredBox#63150 relayoutBoundary=up2 'package:flutter/src/rendering/box.dart': Failed assertion: line 2001 pos 12: 'hasSize'
• TabBarView添加后，原本的TabBar不再显示

问题原因 #

• Column组件默认让子组件按自身固有尺寸排列，但TabBarView需要明确的空间约束才能完成布局，直接放入Column会导致尺寸无法确定，触发断言错误。
• 原代码中给TabBarView的子容器设置了固定高度1000，超出屏幕可视范围后，会将上方的TabBar挤出显示区域，造成TabBar“消失”的视觉效果。

修复方案 #

通过Expanded组件包裹TabBarView，让它占据Column的剩余空间，同时移除子容器的固定高度设置，改为自适应布局：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar'),
        ),
        body: Column(
          children: [
            const SizedBox(height: 200),
            const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.list, color: Colors.black)),
                Tab(icon: Icon(Icons.grid_view, color: Colors.black)),
              ],
            ),
            // 用Expanded让TabBarView占据Column剩余空间
            Expanded(
              child: TabBarView(
                children: [
                  Container(
                    width: double.infinity,
                    color: Colors.amber,
                    child: const Center(child: Text('ListPage')),
                  ),
                  Container(
                    width: double.infinity,
                    color: Colors.green,
                    child: const Center(child: Text('GridPage')),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

• 新增Expanded包裹TabBarView：为TabBarView提供明确的空间约束，使其在Column中自动填充剩余可用高度，解决布局尺寸无法确定的问题。
• 删除子容器的height: 1000：避免内容超出屏幕范围，确保TabBar始终处于可视区域内。

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