Flutter：移除TabBar底部多余空白及AppBar底部小边距

嘿，我明白你遇到的困扰了——用flexibleSpace实现无AppBar的TabBar后出现多余空白，而且AppBar自带的底部小边距也格外烦人。咱们直接动手改代码，彻底解决这两个问题：

核心思路 #

1. 完全移除AppBar，毕竟你本来就不需要它，用flexibleSpace反而会继承AppBar的默认样式和冗余间距
2. 直接把TabBar放在页面顶部，配合DefaultTabController和Column布局，让TabBar和内容区域自然衔接
3. 不用搞复杂的高度计算，Flutter的布局组件会自动帮你处理空间分配

修改后的完整代码 #

import 'package:flutter/material.dart';

class TemplesListingWithTabMode extends StatefulWidget {
  TemplesListingWithTabMode({Key key}) : super(key: key);

  @override
  _TemplesListingWithTabModeState createState() => _TemplesListingWithTabModeState();
}

class _TemplesListingWithTabModeState extends State<TemplesListingWithTabMode> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        backgroundColor: Colors.white, // 保持顶部背景和原AppBar一致
        body: Column(
          children: <Widget>[
            // 直接放置TabBar，摆脱AppBar的多余样式束缚
            TabBar(
              indicatorColor: Colors.pink,
              tabs: [
                Tab(
                  child: Text("ALL", style: TextStyle(color: Colors.pink)),
                ),
                Tab(
                  child: Text("Favorites", style: TextStyle(color: Colors.pink)),
                )
              ],
            ),
            // 用Expanded让TabBarView占满剩余屏幕空间
            Expanded(
              child: Container(
                color: Colors.grey,
                child: TabBarView(
                  children: [
                    ListView.builder(
                        itemCount: 100,
                        itemBuilder: (context, index) {
                          return Container(
                            child: Center(
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Text("i am $index"),
                              ),
                            ),
                          );
                        }),
                    ListView.builder(
                        itemCount: 5,
                        itemBuilder: (context, index) {
                          return Container(
                            child: Center(
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Text("i am $index"),
                              ),
                            ),
                          );
                        })
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

原来的代码为啥会出问题？ #

• 你把Scaffold嵌套在Column和Container里，还手动计算高度，这直接破坏了Flutter的自适应布局逻辑，多余空白就是这么来的
• AppBar的flexibleSpace区域本来是用来放背景图这类内容的，它会默认保留AppBar的内边距和阴影，哪怕你没设置bottom属性，底部也会有冗余间距
• 移除AppBar后，直接用TabBar放在Column顶部，再用Expanded让内容区域占满剩余空间，就完全没有多余的边距和空白了

如果需要适配状态栏，只需要在TabBar外面套一层SafeArea就行：

SafeArea(
  child: TabBar(
    // 你的TabBar代码
  ),
),

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