如何让Flutter的TabBarView占据屏幕剩余空间？

问题根源 #

你的代码存在两个核心布局问题：

• 外层Column设置了mainAxisSize: MainAxisSize.min，导致Column仅包裹子组件，无法为Expanded提供可用空间计算依据。
• DefaultTabController内部的Column未对TabBarView做高度约束，而TabBarView本身需要明确的高度限制，直接使用会触发布局溢出错误。

修改方案 #

以下是修复后的完整代码，关键修改处已标注：

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

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

  @override
  State<SellersHomePage> createState() => _SellersHomePageState();
}

class _SellersHomePageState extends State<SellersHomePage> {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Epoxy Forever'),
        centerTitle: true,
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.ios_share),
          ),
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.shopping_cart_outlined),
          ),
        ],
      ),
      // 1. 移除mainAxisSize: MainAxisSize.min，让Column默认占满屏幕高度
      body: Column(
        children: [
          Stack(
            children: [
              SizedBox(
                height: screenHeight * 0.3,
                width: screenWidth,
                child: ShaderMask(
                  shaderCallback: (rect) {
                    return const LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.black, Colors.transparent],
                    ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
                  },
                  blendMode: BlendMode.dstIn,
                  child: Image(
                    fit: BoxFit.cover,
                    height: screenHeight * 0.2,
                    image: const NetworkImage(
                        'https://img.freepik.com/free-photo/carpenter-cutting-mdf-board-inside-workshop_23-2149451051.jpg'),
                  ),
                ),
              ),
              Positioned(
                top: 20,
                left: 0,
                right: 0,
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Column(
                    children: const [
                      CircleAvatar(
                        radius: 50,
                        backgroundImage: NetworkImage(
                            'https://t3.ftcdn.net/jpg/01/37/76/72/360_F_137767250_pocwIHgKu5rDuYFDNCTNcPy77gHb1lfh.jpg'),
                      ),
                      Text(
                        'Karls Carpentry',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 24),
                      ),
                      Text(
                        'Specialist in Fine custom furniture and upholstery',
                        style: TextStyle(fontSize: 16),
                        textAlign: TextAlign.center,
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
          Center(
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 30),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25), color: Colors.grey),
              padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
              child: const Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    children: [
                      Text('4.8', style: TextStyle(fontSize: 24)),
                      Text('Avg Rating')
                    ],
                  ),
                  Column(
                    children: [
                      Text('28', style: TextStyle(fontSize: 24)),
                      Text('Followers') // 修复原文本重复问题
                    ],
                  ),
                  Column(
                    children: [
                      Text('200', style: TextStyle(fontSize: 24)),
                      Text('Items Sold') // 修复原文本重复问题
                    ],
                  )
                ],
              ),
            ),
          ),
          // 2. 用Expanded包裹DefaultTabController，让它占据剩余屏幕空间
          Expanded(
            child: DefaultTabController(
              length: 3,
              child: Column(
                children: [
                  const TabBar(
                    indicatorSize: TabBarIndicatorSize.tab,
                    tabs: [
                      Tab(text: 'Shop'),
                      Tab(text: 'Posts'),
                      Tab(text: 'About'),
                    ],
                  ),
                  // 3. 用Expanded包裹TabBarView，让它占据TabBar下方的所有空间
                  Expanded(
                    child: TabBarView(children: [
                      // 示例GridView
                      GridView.builder(
                        padding: const EdgeInsets.all(16),
                        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2,
                          crossAxisSpacing: 16,
                          mainAxisSpacing: 16,
                          childAspectRatio: 0.8,
                        ),
                        itemCount: 20,
                        itemBuilder: (context, index) {
                          return Container(
                            decoration: BoxDecoration(
                              color: Colors.grey[200],
                              borderRadius: BorderRadius.circular(12),
                            ),
                            child: const Center(child: Text('商品')),
                          );
                        },
                      ),
                      // 第二个GridView
                      GridView.builder(
                        padding: const EdgeInsets.all(16),
                        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3,
                          crossAxisSpacing: 12,
                          mainAxisSpacing: 12,
                        ),
                        itemCount: 15,
                        itemBuilder: (context, index) {
                          return Container(
                            decoration: BoxDecoration(
                              color: Colors.blue[100],
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: const Center(child: Text('帖子')),
                          );
                        },
                      ),
                      const Center(child: Icon(Icons.info, size: 48)),
                    ]),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

1. 移除外层Column的mainAxisSize: MainAxisSize.min：让Column默认填充屏幕高度，为后续的Expanded提供正确的空间计算基础。
2. 用Expanded包裹DefaultTabController：确保TabBar区域占据AppBar、顶部Banner、统计栏之后的所有剩余屏幕空间。
3. 用Expanded包裹TabBarView：让TabBarView填充TabBar下方的全部空间，解决TabBarView无高度约束的问题。
4. 修复了原代码中统计栏文本重复的问题（统一为Avg Rating/Followers/Items Sold）。
5. 替换TabBarView的示例内容为可滚动的GridView，无需额外设置固定高度，因为TabBarView已被Expanded约束了高度。

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