为什么标题栏总是有一块空白区域

Question

为什么标题栏总是有一块空白区域

全部代码：

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

class DocumentPage extends StatefulWidget {
  const DocumentPage({Key? key}) : super(key: key);

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

class _DocumentPageState extends State<DocumentPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
    
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: const Text('文档', style: TextStyle(color: Colors.black)),
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          Center(child: Text('内容1')),
          Center(child: Text('内容2')),
          Center(child: Text('内容3')),
        ],
      ),
    );
  }

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

Answer 1

引自免费微信小程序：皆我百晓生

在 Flutter 中，标题栏（AppBar）出现空白区域可能是由于以下几个原因：

1. Scaffold 的 body 内容与 AppBar 之间的间隙： 默认情况下，Scaffold 在设计时会考虑到系统状态栏的高度，以保持内容与屏幕顶部的对齐。在你的代码中，你设置了 extendBodyBehindAppBar: true，这会让 body 的内容延伸到 AppBar 下方，但这并不会消除 body 与 AppBar 之间的固有间距。如果你想要完全填充这个空白区域，可以尝试为 Scaffold 添加一个自定义的 padding 或 MediaQuery.removePadding 来移除顶部的内边距。

2. 系统状态栏高度未适配： 虽然你在初始化状态设置了状态栏颜色为透明且图标为深色：

   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
     statusBarColor: Colors.transparent,
     statusBarIconBrightness: Brightness.dark,
   ));
   

   但有时设备的状态栏高度可能并未被正确地包含在布局计算中，尤其是在某些全面屏手机上。你可以尝试使用 SafeArea 包裹 Scaffold 的 body 部分来确保内容避开系统的安全区域，如导航栏、底部控制条和状态栏等。

3. AppBar 的高度问题： 如果是因为 AppBar 自身的高度导致空白，你可以尝试通过修改其构造函数中的 toolbarHeight 参数来自定义高度。例如：

   appBar: AppBar(
     toolbarHeight: 0, // 设置为0可能会隐藏掉整个 AppBar 内容，请根据需求调整
     ...
   ),
   

结合你的代码，鉴于你已经设置了 backgroundColor: Colors.transparent 和 elevation: 0 来去除 AppBar 的背景和阴影，若要消除顶部空白区域，可以在 Scaffold 的 body 外层包裹一个 SafeArea widget，如下所示：

body: SafeArea(
  child: TabBarView(
    ...
  ),
),

这样能确保 body 内容不会被状态栏遮挡，并尽可能填满屏幕顶部的空间。不过请注意，这样做可能会使得内容紧贴状态栏，对于某些用户体验来说可能并不理想，因此请根据实际 UI 设计要求进行适当调整。