Flutter中如何在SafeArea内实现extendBodyBehindAppBar效果？

我尝试在SafeArea中使用extendBodyBehindAppBar属性，但未生效。以下是我的代码：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.transparent,
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.bug_report),
          )
        ],
      ),
      body: SafeArea(
        child: Container(
          width: double.infinity,
          height: 100,
          color: Colors.yellow,
        ),
      ),
    );
  }
}

若移除SafeArea，body会覆盖系统栏。希望实现的效果如下：

解决方案 #

核心问题是SafeArea会自动给内容添加顶部内边距避开状态栏，抵消了extendBodyBehindAppBar的效果。提供两种可行方案：

方法一：关闭SafeArea顶部安全区域处理，手动添加内边距 #

保留extendBodyBehindAppBar: true，让SafeArea不处理顶部区域，再给内容添加等于AppBar高度的内边距，避免内容被AppBar遮挡：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final appBarHeight = AppBar().preferredSize.height;
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.transparent,
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.bug_report),
          )
        ],
      ),
      body: SafeArea(
        top: false, // 关闭顶部安全区域适配
        child: Padding(
          padding: EdgeInsets.only(top: appBarHeight), // 避开AppBar高度
          child: Container(
            width: double.infinity,
            height: 100,
            color: Colors.yellow,
          ),
        ),
      ),
    );
  }
}

方法二：仅给需要的内容嵌套SafeArea #

如果页面只有部分内容需要避开底部/侧边安全区域，顶部内容要延伸到AppBar下方，可以拆分布局，只给需要的部分套SafeArea：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.transparent,
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.bug_report),
          )
        ],
      ),
      body: Column(
        children: [
          // 顶部内容延伸到AppBar下方，不使用SafeArea
          Container(
            width: double.infinity,
            height: 100,
            color: Colors.yellow,
          ),
          // 底部内容需要避开安全区域，嵌套SafeArea
          Expanded(
            child: SafeArea(
              top: false, // 顶部已处理，无需重复添加内边距
              child: Container(
                color: Colors.blue,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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