Material Design 3 顶部应用栏没有阴影。如何启用它？

Question

新的“Material Design 3 顶部应用栏”文档称他们摆脱了投影。我怎样才能启用它？在 Toolbar 或 AppBar 上设置高度根本不起作用。

Answer 1

我也有同样的情况。我找到：

1. 阴影从 API 28 开始应用，低于 API 28 - 阴影效果与 MaterialComponents 主题相同。
2. 颜色填充在 API 28 以下工作（在 API 26 上测试）。

顶级应用栏规范的文档表示TopAppBar 的容器具有角色“Surface”和Elevation（滚动） Level 2。

在颜色系统 - 颜色角色页面上我发现了以下信息：

在标高 +2 处，具有表面颜色容器的组件会收到不透明度为 8% 的原色叠加层。

因此，TopAppBarLayout 的默认样式使用?attr/colorSurface作为背景颜色，并使用?attr/colorPrimary和 8% 不透明度作为覆盖层（类似于稀松布效果）。

我的解决方案：

• 情况 1 - 仅启用阴影效果。

为 AppBarLayout 创建样式并将android:outlineAmbientShadowColor和android:outlineSpotShadowColor设置为黑色（因为它是创建阴影的默认颜色）。这些属性在Widget.Material3.AppBarLayout中设置为透明。

<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
      <item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
      <item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
</style>

• 情况 2 - 启用阴影效果并摆脱覆盖。

除了上述内容之外，您还可以添加带有颜色的 android:background属性，或添加materialThemeOverlay属性，将 colorSurface 设置为您的颜色（背景），将 colorPrimary 设置为 @android:transparent（覆盖层）。我更喜欢直接添加android:background因为添加MaterialThemeOverlay可能会对 AppBarLayout 的子视图产生影响。

   <style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
        <item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="android:background">@color/white</item>
    </style>

或者

<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
        <item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.DayNight.NoActionBar</item>
    </style>

    <style name="ThemeOverlay.App.DayNight.NoActionBar" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="colorSurface">@android:color/white</item>
    </style>

不要忘记将您的样式应用到您的 AppBarLayout 或主题。

顺便说一下，Widget.Material3.AppBarLayout中的liftOnScroll属性已设置为 true ，因此无需设置它。一切都只需为滚动视图设置layout_behavior即可。