如何让Flutter的TabBarView占据屏幕剩余高度？

你的代码里有几个关键问题导致TabBarView无法正确占据剩余高度：

• TabController放在build方法里，每次组件重建都会重新创建，不仅浪费性能还可能引发状态问题
• 包裹TabBarView的Container设置了height: screenSize.height，直接导致内容超出屏幕高度
• Expanded被放在固定高度的Container里面，失去了自动填充剩余空间的作用

修复步骤及代码 #

1. 将TabController移到initState中初始化，避免重复创建
2. 移除TabBarView外层Container的固定高度，直接用Expanded包裹TabBarView
3. 简化布局结构，确保Column中只有固定高度的组件和一个Expanded来填充剩余空间

修改后的Deneme组件代码：

import 'package:flutter/material.dart';
import 'package:socialuni_deneme/colors.dart';
import 'package:socialuni_deneme/pages/log_in_page.dart';

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

  @override
  State<Deneme> createState() => _DenemeState();
}

class _DenemeState extends State<Deneme> with TickerProviderStateMixin {
  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) {
    Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      body: SafeArea(
        child: Container(
          width: screenSize.width,
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              Container(
                height: screenSize.height * 0.15,
                width: screenSize.width,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("assets/images/social_uni_logo.png"),
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              SizedBox(height: 20),
              TabBar(
                controller: _tabController,
                labelColor: AppColors.lacivert,
                unselectedLabelColor: Colors.grey.shade500,
                tabs: [
                  Tab(
                    child: Text(
                      "Giriş Yap",
                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                    ),
                  ),
                  Tab(
                    child: Text(
                      "Kayıt Ol",
                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                    ),
                  ),
                ],
              ),
              // 直接用Expanded包裹TabBarView，填充剩余空间
              Expanded(
                child: Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: TabBarView(
                    controller: _tabController,
                    children: [
                      LogInPage(),
                      Text("Kayit Ol"),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

LogInPage组件可保持不变，若需要让登录表单在剩余空间更合理分布，也可在外层添加Expanded或调整布局对齐方式：

import 'package:flutter/material.dart';
import 'package:socialuni_deneme/colors.dart';
import 'package:socialuni_deneme/styles.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.only(left: 16),
          child: Text(
            "Email",
            style: ralewayStyle.copyWith(
                fontSize: 12,
                color: Colors.black,
                fontWeight: FontWeight.w700),
          ),
        ),
        SizedBox(height: 6),
        Container(
          height: 50,
          width: double.infinity,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            color: Colors.white,
          ),
          child: TextFormField(
            style: ralewayStyle.copyWith(
                fontWeight: FontWeight.w400,
                color: Colors.black,
                fontSize: 12),
            decoration: InputDecoration(
              border: InputBorder.none,
              prefixIcon: IconButton(
                icon: Icon(Icons.email, color: AppColors.lacivert),
                onPressed: () {},
              ),
              contentPadding: EdgeInsets.only(top: 18),
              hintText: "Okul Emailiniz",
              hintStyle: ralewayStyle.copyWith(
                  fontWeight: FontWeight.w400,
                  color: Colors.black.withOpacity(0.5),
                  fontSize: 12),
            ),
          ),
        ),
        SizedBox(height: 16),
        Padding(
          padding: const EdgeInsets.only(left: 16),
          child: Text(
            "Şifre",
            style: ralewayStyle.copyWith(
                fontSize: 12,
                color: Colors.black,
                fontWeight: FontWeight.w700),
          ),
        ),
        SizedBox(height: 6),
        Container(
          height: 50,
          width: double.infinity,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            color: Colors.white,
          ),
          child: TextFormField(
            style: ralewayStyle.copyWith(
                fontWeight: FontWeight.w400,
                color: Colors.black,
                fontSize: 12),
            decoration: InputDecoration(
              border: InputBorder.none,
              prefixIcon: IconButton(
                icon: Icon(Icons.lock, color: AppColors.lacivert),
                onPressed: () {},
              ),
              contentPadding: EdgeInsets.only(top: 18),
              hintText: "Şifreniz",
              hintStyle: ralewayStyle.copyWith(
                  fontWeight: FontWeight.w400,
                  color: Colors.black.withOpacity(0.5),
                  fontSize: 12),
            ),
          ),
        ),
        SizedBox(height: 32),
        GestureDetector(
          onTap: () {
            print("Giriş Yapıldı");
          },
          child: Container(
            height: 50,
            width: double.infinity,
            decoration: BoxDecoration(
              color: AppColors.buttonColor,
              borderRadius: BorderRadius.circular(15),
            ),
            child: Center(
              child: Text("Giriş Yap",
                  style: ralewayStyle.copyWith(
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                      fontSize: 18)),
            ),
          ),
        ),
      ],
    );
  }
}

修改后，TabBarView会自动填充屏幕剩余高度，同时避免布局溢出问题，TabController也能正确管理标签页状态。

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