Material Design 3 Верхняя панель приложения не имеет тени. Как включить?

Question

В новой документации «Верхняя панель приложений Material Design 3» говорится, что они избавились от тени. Как я могу включить его? Установка высоты на панели инструментов или панели приложений вообще не работает.

Answer 1

У меня была такая же ситуация. Я нашел это:

1. Падение тени применяется, начиная с API 28, ниже API 28 — эффект тени такой же, как и в теме MaterialComponents.
2. Цветовая заливка работает ниже API 28 (проверено на API 26).

Документы для спецификаций верхней панели приложений говорят, что контейнер TopAppBar имеет роль «Поверхность» и уровень высоты (при прокрутке) 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 или теме.

Кстати, для атрибута liftOnScroll в Widget.Material3.AppBarLayout установлено значение true , поэтому его не нужно устанавливать. Все работает с установкой только layout_behavior для просмотра с прокруткой.

Answer 2

Вы можете использовать специальный атрибут для вашей темы из документации материалов.

      <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
    <item name="elevationOverlayEnabled">false</item>
</style>

Answer 3

Кажется, что приведенные выше ответы касаются только Android, но я не вижу тени на iOS, но полагаю, что следующее должно работать и для Android.

      return Scaffold(
  key: _scaffoldMessengerKey,
  appBar: AppBar(
    elevation: 6,
    shadowColor: Colors.black.withOpacity(.5),
    ...
  )
  ...
)

или глобально, чтобы применить на всех страницах

      return MaterialApp(
  title: 'Flutter App',
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
      background: Colors.grey.shade50,
    ),
    useMaterial3: true,
    appBarTheme: AppBarTheme.of(context).copyWith(
      elevation: 6,
      shadowColor: Colors.black.withOpacity(.5),
    ),
  ),
  ...
);