Flutter AppBar无法填充状态栏空间且需保留滚动自动隐藏功能的求助

要让AppBar延伸填充状态栏区域，同时保留滚动隐藏的动画效果，你可以按以下步骤修改代码：

1. 获取状态栏高度 #

通过MediaQuery获取设备的状态栏高度，将其与原AppBar高度相加，确保整体区域覆盖状态栏。

2. 调整PreferredSize和AnimatedContainer的高度 #

把PreferredSize的高度设为状态栏高度 + 45，同时同步修改AnimatedContainer的动态高度，保证动画时整体区域正确变化。

3. 配置AppBar的toolbarHeight和状态栏适配 #

设置AppBar的toolbarHeight为原45，让内容区域保持原有高度；同时通过systemOverlayStyle配置状态栏文字颜色，避免和背景冲突。

修改后的完整代码片段：

return Scaffold(
  key: _key,
  appBar: PreferredSize(
    // 计算总高度：状态栏高度 + 原AppBar高度45
    preferredSize: Size.fromHeight(MediaQuery.of(context).padding.top + 45),
    child: AnimatedContainer(
      duration: const Duration(milliseconds: 150),
      // 同步动态高度
      height: _showAppbar ? (MediaQuery.of(context).padding.top + 45) : 0,
      child: AppBar(
        backgroundColor: const Color(0xfffafafa).withAlpha(200),
        elevation: 0,
        // 设置toolbar高度为原45，内容区域位置不变
        toolbarHeight: 45,
        // 配置状态栏文字颜色，根据背景调整为深色
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          statusBarIconBrightness: Brightness.dark,
        ),
        flexibleSpace: ClipRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
            child: Container(
              color: Colors.transparent,
            ),
          ),
        ),
        automaticallyImplyLeading: false,
        title: Column(
          children: [
            Row(
              children: [
                InkWell(
                    onTap: () => _key.currentState!.openDrawer(),
                    child: const AvatarWidget(
                      size: 36,
                    )),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text(
                          'Xin chào,',
                          style: TextStyle(
                            fontFamily: 'AvertaStdCY-Light',
                            fontSize: 15,
                            fontWeight: FontWeight.w500,
                            color: Colors.black,
                          ),
                        ),
                        Row(
                          children: [
                            Text(
                              shortName,
                              style: const TextStyle(
                                fontSize: 19,
                                fontFamily: "Montserrat-Bold",
                                color: Colors.black,
                              ),
                            ),
                            if (userCurrent.verified == true)
                              Image.asset(
                                "assets/images/verified.png",
                                height: 18,
                              ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  ),
  // 其他代码...
);

关键说明 #

• 通过MediaQuery.of(context).padding.top获取状态栏高度，适配不同设备的状态栏差异。
• PreferredSize和AnimatedContainer的高度同步包含状态栏高度，确保AppBar整体延伸到状态栏区域。
• toolbarHeight固定为45，保证原AppBar内容的布局位置不变，只扩展背景到状态栏。
• systemOverlayStyle设置状态栏文字颜色为深色，和你的浅色AppBar背景匹配，避免文字看不清。

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