Flutter中如何让Material组件的阴影正常显示在AppBar上方

问题原因 #

Flutter中Scaffold的默认渲染层级为AppBar高于body区域，因此body内设置了elevation的Material组件的顶部阴影会被AppBar遮挡，无法正常显示。
你当前的实现效果如下：

预期效果：Material组件的阴影完整显示在AppBar上方 #

解决方案 #

方案1：将AppBar移入body的Stack管理层级（最可控，推荐）

该方案完全自定义组件层级，无需依赖Scaffold的内置布局逻辑，修改点如下：

1. 移除Scaffold的appBar配置参数
2. 将AppBar作为Stack的第一个子组件（层级最低），保证AppBar在最下方
3. 关闭SafeArea的顶部安全区域适配，避免AppBar被偏移到状态栏下方
4. 在原有frontSurfaceTopPadding的基础上增加kToolbarHeight（AppBar默认高度），保证Material组件的布局位置和原设计一致
   修改后代码示例：

import 'package:flutter/material.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 移除原有appBar参数
    body: SafeArea(
      top: false, // 关闭顶部安全区域适配
      child: Stack(
        children: [
          // 最底层加入AppBar，层级最低
          AppBar(
            centerTitle: true,
            title: Text('Some Title'),
            elevation: 0.0,
            actions: [
              // 原有actions逻辑保留
            ],
          ),
          BackSurface(), // 背景层组件
          Padding(
            padding: EdgeInsets.only(
              // 原有padding基础上加上AppBar的默认高度，保持布局位置不变
              top: frontSurfaceTopPadding + kToolbarHeight,
              left: frontSurfaceSidePadding,
              right: frontSurfaceSidePadding,
            ),
            child: Material(
              elevation: 30.0,
              color: Theme.of(context).scaffoldBackgroundColor,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(30.0),
                topRight: Radius.circular(30.0),
              ),
              clipBehavior: Clip.hardEdge,
              child: IgnorePointer(
                ignoring: isPanelVisible ? false : true,
                child: FrontSurfaceWidget(),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

方案2：使用extendBodyBehindAppBar属性快速适配

如果不想调整现有组件结构，可以通过Scaffold内置属性实现，修改点如下：

1. 给Scaffold添加extendBodyBehindAppBar: true属性，让body区域延伸到AppBar下方
2. 关闭SafeArea的顶部安全区域适配
3. 调整frontSurfaceTopPadding加上kToolbarHeight，保证Material位置和原设计一致
   修改后代码示例：

@override
Widget build(BuildContext context) {
  return Scaffold(
    extendBodyBehindAppBar: true, // 新增属性，让body延伸到AppBar下方
    appBar: AppBar(
      centerTitle: true,
      title: Text('Some Title'),
      elevation: 0.0, // 保持elevation为0，避免AppBar自带阴影影响视觉
      backgroundColor: /* 和BackSurface保持相同颜色即可 */,
      actions: [
        // 原有逻辑保留
      ],
    ),
    body: SafeArea(
      top: false, // 关闭顶部安全区域适配
      child: Stack(
        children: [
          BackSurface(),
          Padding(
            padding: EdgeInsets.only(
              top: frontSurfaceTopPadding + kToolbarHeight, // 加上AppBar高度
              left: frontSurfaceSidePadding,
              right: frontSurfaceSidePadding,
            ),
            child: Material(
              elevation: 30.0,
              color: Theme.of(context).scaffoldBackgroundColor,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(30.0),
                topRight: Radius.circular(30.0),
              ),
              clipBehavior: Clip.hardEdge,
              child: IgnorePointer(
                ignoring: isPanelVisible ? false : true,
                child: FrontSurfaceWidget(),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

内容的提问来源于stack exchange，提问作者ark-tik