Flutter中如何实现Tabs与TabBarView整体可滚动的页面？

你遇到的两个错误核心原因是：

• 当SingleChildScrollView包裹Column时，会给子组件提供无限高度的约束，而Expanded需要父级有明确的高度限制，两者冲突；
• TabBarView作为横向视口，在无高度约束的情况下会试图占用无限高度，引发报错。

修改后的代码 #

import 'package:buttons_tabbar/buttons_tabbar.dart';
import 'package:flutter/material.dart';

import '../widgets/style_grid.dart';

class StyleScreen extends StatefulWidget {
  const StyleScreen({super.key});

  @override
  State<StyleScreen> createState() => _StyleScreenState();
}

class _StyleScreenState extends State<StyleScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Screen')),
      body: SafeArea(
        child: DefaultTabController(
          length: 5,
          // 用SingleChildScrollView包裹整个可滚动区域
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                ButtonsTabBar(
                  backgroundColor: Colors.grey[300],
                  radius: 16,
                  unselectedLabelStyle: const TextStyle(color: Colors.black),
                  labelStyle: const TextStyle(
                      color: Colors.orange, fontWeight: FontWeight.bold),
                  tabs: const [
                    Tab(icon: Icon(Icons.directions_car), text: "All"),
                    Tab(icon: Icon(Icons.directions_transit), text: "Cat1"),
                    Tab(icon: Icon(Icons.directions_transit), text: "Cat2"),
                    Tab(icon: Icon(Icons.directions_transit), text: "Cat3"),
                    Tab(icon: Icon(Icons.directions_transit), text: "Cat4"),
                  ],
                ),
                // 移除Expanded，改为直接使用TabBarView，并确保子组件StyleGrid能自适应高度
                TabBarView(
                  physics: const NeverScrollableScrollPhysics(),
                  children: <Widget>[
                    StyleGrid(),
                    StyleGrid(),
                    StyleGrid(),
                    StyleGrid(),
                    StyleGrid(),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

配套修改StyleGrid #

另外需要确保你的StyleGrid组件（应为GridView）添加两个关键属性，让它能自适应高度：

GridView.builder(
  // 让GridView根据内容高度自适应
  shrinkWrap: true,
  // 禁用GridView自身的滚动，让整个页面统一滚动
  physics: const NeverScrollableScrollPhysics(),
  // 其他原有属性...
)

说明 #

• 移除Expanded：避免在无限高度约束下触发flex冲突；
• 给StyleGrid的GridView设置shrinkWrap: true：让GridView根据子项数量自动计算高度；
• 禁用GridView和TabBarView的自身滚动：确保整个页面的滚动行为统一由SingleChildScrollView控制。

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