Flutter：TabBarView嵌套GridView动态高度适配及顶部padding异常问题

问题1：Expanded包裹GridView.builder触发'child.hasSize': is not true断言错误 #

错误原因 #

TabBarView的子组件需要明确的尺寸约束才能正常渲染，但直接用Expanded包裹GridView时，Expanded依赖父组件的约束分配空间，而TabBarView初始无法给子组件传递有效约束，导致GridView无法确定自身尺寸，触发断言错误。

解决方法 #

将TabBarView的子组件用Column包裹，再把GridView放在Expanded中，让Column提供明确的垂直约束，确保GridView能获取到可用空间：

TabBarView(
  children: [
    Column(
      children: [
        Expanded(
          child: ProductsGrid(), // 你的网格组件
        ),
      ],
    ),
    // 其他Tab页面...
  ],
)

同时确保ProductsGrid中的GridView.builder保持默认配置（不需要开启shrinkWrap: true，避免性能问题）：

class ProductsGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.all(8.0),
      physics: AlwaysScrollableScrollPhysics(), // 确保网格可滚动
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 0.7,
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
      ),
      itemCount: 20,
      itemBuilder: (context, index) {
        return Container(
          color: Colors.grey[200],
          margin: EdgeInsets.all(4.0),
          child: Center(child: Text('商品 $index')),
        );
      },
    );
  }
}

问题2：NestedScrollView搭配SliverToBoxAdapter出现顶部异常内边距 #

错误原因 #

NestedScrollView的body默认会继承MediaQuery的顶部padding（比如状态栏高度），导致GridView顶部出现多余空白。

解决方法 #

用MediaQuery.removePadding包裹GridView，手动移除顶部默认padding：

NestedScrollView(
  headerSliverBuilder: (context, innerBoxIsScrolled) => [],
  body: MediaQuery.removePadding(
    context: context,
    removeTop: true, // 移除顶部冗余padding
    child: ProductsGrid(),
  ),
)

如果内边距来自GridView自身的默认配置，也可以直接在GridView.builder中设置padding: EdgeInsets.zero自定义padding值。

完整示例代码 #

class TabGridPage extends StatefulWidget {
  @override
  _TabGridPageState createState() => _TabGridPageState();
}

class _TabGridPageState extends State<TabGridPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: '全部商品'),
            Tab(text: '热销商品'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // 方案1：Column+Expanded解决尺寸约束问题
          Column(
            children: [
              Expanded(child: ProductsGrid()),
            ],
          ),
          // 方案2：NestedScrollView+移除顶部padding解决内边距问题
          NestedScrollView(
            headerSliverBuilder: (context, innerBoxIsScrolled) => [],
            body: MediaQuery.removePadding(
              context: context,
              removeTop: true,
              child: ProductsGrid(),
            ),
          ),
        ],
      ),
    );
  }
}

class ProductsGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.all(8.0),
      physics: AlwaysScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
        childAspectRatio: 0.8,
      ),
      itemCount: 30,
      itemBuilder: (context, index) {
        return Card(
          child: Column(
            children: [
              Expanded(child: Image.network('https://picsum.photos/200/200')),
              Padding(
                padding: EdgeInsets.all(8.0),
                child: Text('商品名称 $index'),
              ),
            ],
          ),
        );
      },
    );
  }
}

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