Миграция с Материала 2 на Материал 3 в Compose

Material Design 3 — это следующая эволюция Material Design. Он включает в себя обновленные темы, компоненты и функции персонализации Material You, такие как динамический цвет. Это обновление Material Design 2 , которое сочетается с новым визуальным стилем и системным пользовательским интерфейсом на Android 12 и более поздних версиях.

В этом руководстве основное внимание уделяется переходу из библиотеки Compose Material (androidx.compose.material) Jetpack в библиотеку Compose Material 3 (androidx.compose.material3) Jetpack .

Подходы

В общем , не следует использовать одновременно M2 и M3 в одном приложении в долгосрочной перспективе . Это связано с тем, что две системы дизайна и соответствующие библиотеки существенно различаются с точки зрения дизайна UX/UI и реализации Compose.

Ваше приложение может использовать систему дизайна, например созданную с помощью Figma. В таких случаях мы также настоятельно рекомендуем вам или вашей команде разработчиков перенести его с M2 на M3 , прежде чем начинать миграцию Compose. Нет смысла переносить приложение на M3, если его UX/UI-дизайн основан на M2.

Более того, ваш подход к миграции должен различаться в зависимости от размера, сложности и дизайна UX/UI вашего приложения. Это поможет вам минимизировать влияние на вашу кодовую базу. К миграции следует подходить поэтапно.

Когда мигрировать

Вам следует начать миграцию как можно скорее. Однако важно учитывать, находится ли ваше приложение в состоянии полностью перейти с M2 на M3. Прежде чем приступить к работе, следует изучить некоторые сценарии блокирования :

Сценарий Рекомендуемый подход
Нет блокировщиков Начать поэтапную миграцию
Компонент из М2 пока недоступен в М3. См. раздел «Компоненты и макеты» ниже. Начать поэтапную миграцию
Вы или ваша команда дизайнеров не перенесли систему дизайна приложения с M2 на M3. Перенесите систему проектирования с M2 на M3, затем начните поэтапную миграцию.

Даже если на вас влияют описанные выше сценарии, вам следует применить поэтапный подход к миграции, прежде чем фиксировать и выпускать обновление приложения. В этих случаях вы можете использовать M2 и M3 одновременно и постепенно отказываться от M2 при переходе на M3.

Поэтапный подход

Общие шаги к поэтапной миграции следующие:

  1. Добавьте зависимость M3 рядом с зависимостью M2.
  2. Добавьте версии M3 тем вашего приложения вместе с версиями M2 тем вашего приложения.
  3. Переносите отдельные модули, экраны или составные элементы в M3, в зависимости от размера и сложности вашего приложения (подробности см. в разделах ниже).
  4. После полного переноса удалите версии M2 тем вашего приложения.
  5. Удалите зависимость M2.

Зависимости

M3 имеет отдельный пакет и версию для M2:

М2

implementation "androidx.compose.material:material:$m2-version"

М3

implementation "androidx.compose.material3:material3:$m3-version"

Последние версии M3 смотрите на странице релизов Compose Material 3 .

Другие зависимости материалов за пределами основных библиотек M2 и M3 не изменились. Они используют сочетание пакетов и версий M2 и M3, но это не влияет на миграцию. Их можно использовать с M3 как есть:

Библиотека Пакет и версия
Создание значков материалов androidx.compose.material:material-icons-*:$m2-version
Составление пульсации материала androidx.compose.material:material-ripple:$m2-version

Экспериментальные API

Некоторые API M3 считаются экспериментальными. В таких случаях вам необходимо согласиться на уровне функции или файла, используя аннотацию ExperimentalMaterial3Api :

import androidx.compose.material3.ExperimentalMaterial3Api

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
    // M3 composables
}

Тематика

И в M2, и в M3 компонуемая тема называется MaterialTheme , но пакеты и параметры импорта различаются:

М2

import androidx.compose.material.MaterialTheme

MaterialTheme(
    colors = AppColors,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M2 content
}

М3

import androidx.compose.material3.MaterialTheme

MaterialTheme(
    colorScheme = AppColorScheme,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M3 content
}

Цвет

Сравнение цветовых систем M2 и M3
Рисунок 1 . Цветовая система M2 (слева) и цветовая система M3 (справа).

Цветовая система в М3 существенно отличается от М2. Количество цветовых параметров увеличилось, они имеют другие названия и по-разному сопоставляются с компонентами M3. В Compose это относится к классу M2 Colors , классу M3 ColorScheme и связанным функциям:

М2

import androidx.compose.material.lightColors
import androidx.compose.material.darkColors

val AppLightColors = lightColors(
    // M2 light Color parameters
)
val AppDarkColors = darkColors(
    // M2 dark Color parameters
)
val AppColors = if (darkTheme) {
    AppDarkColors
} else {
    AppLightColors
}

М3

import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme

val AppLightColorScheme = lightColorScheme(
    // M3 light Color parameters
)
val AppDarkColorScheme = darkColorScheme(
    // M3 dark Color parameters
)
val AppColorScheme = if (darkTheme) {
    AppDarkColorScheme
} else {
    AppLightColorScheme
}

Учитывая существенные различия между цветовыми системами M2 и M3, разумного сопоставления параметров Color не существует. Вместо этого используйте инструмент Material Theme Builder для создания цветовой схемы M3. Используйте цвета M2 в качестве основных исходных цветов в инструменте, который расширяется до тоновых палитр, используемых цветовой схемой M3. В качестве отправной точки рекомендуется использовать следующие сопоставления:

М2 Конструктор тем материалов
primary Начальный
primaryVariant Вторичный
secondary Третичный
surface или background Нейтральный
Цвета M2, используемые в Material Theme Builder для создания цветовой схемы M3.
Рисунок 2 . Цвета M2 Jetchat, используемые в Material Theme Builder для создания цветовой схемы M3.

Вы можете скопировать значения шестнадцатеричного кода цвета для светлых и темных тем из инструмента и использовать их для реализации экземпляра M3 ColorScheme. Альтернативно, Material Theme Builder может экспортировать код Compose.

isLight

В отличие от класса M2 Colors , класс M3 ColorScheme не включает параметр isLight . В общем, вам следует попытаться смоделировать все, что нуждается в этой информации, на уровне темы. Например:

М2

import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
import androidx.compose.material.MaterialTheme

@Composable
private fun AppTheme(
  darkTheme: Boolean = isSystemInDarkTheme(),
  content: @Composable () -> Unit
) {
  val colors = if (darkTheme) darkColors() else lightColors()
  MaterialTheme(
      colors = colors,
      content = content
  )
}

@Composable
fun AppComposable() {
    AppTheme {
        val cardElevation = if (MaterialTheme.colors.isLight) 0.dp else 4.dp
        
    }
}

М3

import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme

val LocalCardElevation = staticCompositionLocalOf { Dp.Unspecified }
@Composable
private fun AppTheme(
   darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
   val cardElevation = if (darkTheme) 4.dp else 0.dp
    CompositionLocalProvider(LocalCardElevation provides cardElevation) {
        val colorScheme = if (darkTheme) darkColorScheme() else lightColorScheme()
        MaterialTheme(
            colorScheme = colorScheme,
            content = content
        )
    }
}

@Composable
fun AppComposable() {
    AppTheme {
        val cardElevation = LocalCardElevation.current
        
    }
}

Дополнительную информацию см. в руководстве «Системы индивидуального дизайна в Compose» .

Динамический цвет

Новой функцией M3 является динамический цвет . Вместо использования пользовательских цветов ColorScheme M3 может использовать цвета обоев устройства на Android 12 и более поздних версиях, используя следующие функции:

Типография

Сравнение типографских систем M2 и M3
Рисунок 3 . Типографская система M3 (слева) и типографская система M2 (справа)

Система типографики в M3 отличается от M2. Количество параметров оформления примерно одинаковое, но они имеют разные имена и по-разному сопоставляются с компонентами M3. В Compose это относится к классу Typography M2 и классу Typography M3:

М2

import androidx.compose.material.Typography

val AppTypography = Typography(
    // M2 TextStyle parameters
)

М3

import androidx.compose.material3.Typography

val AppTypography = Typography(
    // M3 TextStyle parameters
)

В качестве отправной точки рекомендуется использовать следующие сопоставления параметров TextStyle :

М2 М3
h1 displayLarge
h2 displayMedium
h3 displaySmall
Н/Д headlineLarge
h4 headlineMedium
h5 headlineSmall
h6 titleLarge
subtitle1 titleMedium
subtitle2 titleSmall
body1 bodyLarge
body2 bodyMedium
caption bodySmall
button labelLarge
Н/Д labelMedium
overline labelSmall

Форма

Сравнение систем форм М2 и М3
Рисунок 4 . Система форм M2 (слева) и система форм M3 (справа)

Система форм в M3 отличается от M2. Количество параметров формы увеличилось, они называются по-другому и по-другому сопоставляются с компонентами M3. В Compose это относится к классу « Shapes M2» и классу « Shapes M3»:

М2

import androidx.compose.material.Shapes

val AppShapes = Shapes(
    // M2 Shape parameters
)

М3

import androidx.compose.material3.Shapes

val AppShapes = Shapes(
    // M3 Shape parameters
)

В качестве отправной точки рекомендуется использовать следующие сопоставления параметров Shape :

М2 М3
Н/Д extraSmall
small small
medium medium
large large
Н/Д extraLarge

Компоненты и макеты

Большинство компонентов и макетов из M2 доступны в M3. Однако есть некоторые недостающие, а также новые, которых не было в M2. Более того, некоторые компоненты M3 имеют больше вариаций, чем их эквиваленты в M2. В целом поверхности API M3 стараются быть как можно более похожими на свои ближайшие эквиваленты в M2.

Учитывая обновленные системы цвета, типографики и форм, компоненты M3 имеют тенденцию по-разному отображаться в соответствии с новыми значениями тем. Рекомендуется проверить каталог tokens в исходном коде Compose Material 3 как источник достоверных данных об этих сопоставлениях.

Хотя некоторые компоненты требуют особого внимания, в качестве отправной точки рекомендуется использовать следующие сопоставления функций:

Отсутствующие API :

М2 М3
androidx.compose.material.swipeable Пока недоступно

Заменены API :

М2 М3
androidx.compose.material.BackdropScaffold Нет эквивалента M3, вместо этого перейдите на Scaffold или BottomSheetScaffold
androidx.compose.material.BottomDrawer Нет эквивалента M3, вместо этого перейдите на ModalBottomSheet

Переименованные API :

М2 М3
androidx.compose.material.BottomNavigation androidx.compose.material3.NavigationBar
androidx.compose.material.BottomNavigationItem androidx.compose.material3.NavigationBarItem
androidx.compose.material.Chip androidx.compose.material3.AssistChip или androidx.compose.material3.SuggestionChip
androidx.compose.material.ModalBottomSheetLayout androidx.compose.material3.ModalBottomSheet
androidx.compose.material.ModalDrawer androidx.compose.material3.ModalNavigationDrawer

Все остальные API :

М2 М3
androidx.compose.material.AlertDialog androidx.compose.material3.AlertDialog
androidx.compose.material.Badge androidx.compose.material3.Badge
androidx.compose.material.BadgedBox androidx.compose.material3.BadgedBox
androidx.compose.material.BottomAppBar androidx.compose.material3.BottomAppBar
androidx.compose.material.BottomSheetScaffold androidx.compose.material3.BottomSheetScaffold
androidx.compose.material.Button androidx.compose.material3.Button
androidx.compose.material.Card androidx.compose.material3.Card
androidx.compose.material.Checkbox androidx.compose.material3.Checkbox
androidx.compose.material.CircularProgressIndicator androidx.compose.material3.CircularProgressIndicator
androidx.compose.material.Divider androidx.compose.material3.Divider
androidx.compose.material.DropdownMenu androidx.compose.material3.DropdownMenu
androidx.compose.material.DropdownMenuItem androidx.compose.material3.DropdownMenuItem
androidx.compose.material.ExposedDropdownMenuBox androidx.compose.material3.ExposedDropdownMenuBox
androidx.compose.material.ExtendedFloatingActionButton androidx.compose.material3.ExtendedFloatingActionButton
androidx.compose.material.FilterChip androidx.compose.material3.FilterChip
androidx.compose.material.FloatingActionButton androidx.compose.material3.FloatingActionButton
androidx.compose.material.Icon androidx.compose.material3.Icon
androidx.compose.material.IconButton androidx.compose.material3.IconButton
androidx.compose.material.IconToggleButton androidx.compose.material3.IconToggleButton
androidx.compose.material.LeadingIconTab androidx.compose.material3.LeadingIconTab
androidx.compose.material.LinearProgressIndicator androidx.compose.material3.LinearProgressIndicator
androidx.compose.material.ListItem androidx.compose.material3.ListItem
androidx.compose.material.NavigationRail androidx.compose.material3.NavigationRail
androidx.compose.material.NavigationRailItem androidx.compose.material3.NavigationRailItem
androidx.compose.material.OutlinedButton androidx.compose.material3.OutlinedButton
androidx.compose.material.OutlinedTextField androidx.compose.material3.OutlinedTextField
androidx.compose.material.RadioButton androidx.compose.material3.RadioButton
androidx.compose.material.RangeSlider androidx.compose.material3.RangeSlider
androidx.compose.material.Scaffold androidx.compose.material3.Scaffold
androidx.compose.material.ScrollableTabRow androidx.compose.material3.ScrollableTabRow
androidx.compose.material.Slider androidx.compose.material3.Slider
androidx.compose.material.Snackbar androidx.compose.material3.Snackbar
androidx.compose.material.Switch androidx.compose.material3.Switch
androidx.compose.material.Tab androidx.compose.material3.Tab
androidx.compose.material.TabRow androidx.compose.material3.TabRow
androidx.compose.material.Text androidx.compose.material3.Text
androidx.compose.material.TextButton androidx.compose.material3.TextButton
androidx.compose.material.TextField androidx.compose.material3.TextField
androidx.compose.material.TopAppBar androidx.compose.material3.TopAppBar
androidx.compose.material.TriStateCheckbox androidx.compose.material3.TriStateCheckbox

Ознакомьтесь с новейшими компонентами и макетами M3 в справочном обзоре API Compose Material 3 и следите за новыми и обновленными API на странице выпусков .

Подмости, закусочные и навигационный ящик

Сравнение лесов М2 и М3 со снэк-баром и навигационным ящиком
Рисунок 5 . Подставка M2 с закусочной и выдвижным ящиком навигации (слева) и подставка M3 с закусочной и выдвижным ящиком навигации (справа).

Леса в M3 отличаются от M2. И в M2, и в M3 основной составной макет называется Scaffold но пакеты и параметры импорта различаются:

М2

import androidx.compose.material.Scaffold

Scaffold(
    // M2 scaffold parameters
)

М3

import androidx.compose.material3.Scaffold

Scaffold(
    // M3 scaffold parameters
)

Scaffold M2 содержит параметр backgroundColor , который теперь containerColor в Scaffold M3:

М2

import androidx.compose.material.Scaffold

Scaffold(
    backgroundColor = ,
    content = {  }
)

М3

import androidx.compose.material3.Scaffold

Scaffold(
    containerColor = ,
    content = {  }
)

Класс M2 ScaffoldState больше не существует в M3, поскольку он содержит параметр drawerState , который больше не нужен. Чтобы отобразить закусочные с помощью M3 Scaffold , используйте вместо этого SnackbarHostState :

М2

import androidx.compose.material.Scaffold
import androidx.compose.material.rememberScaffoldState

val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    content = {
        
        scope.launch {
            scaffoldState.snackbarHostState.showSnackbar()
        }
    }
)

М3

import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    content = {
        
        scope.launch {
            snackbarHostState.showSnackbar()
        }
    }
)

Все параметры drawer* из Scaffold M2 были удалены из Scaffold M3. К ним относятся такие параметры, как drawerShape и drawerContent . Чтобы отобразить ящик с помощью M3 Scaffold , используйте вместо этого составной ящик навигации, например ModalNavigationDrawer :

М2

import androidx.compose.material.DrawerValue
import
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState

val scaffoldState = rememberScaffoldState(
    drawerState = rememberDrawerState(DrawerValue.Closed)
)
val scope = rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = {  },
    drawerGesturesEnabled = ,
    drawerShape = ,
    drawerElevation = ,
    drawerBackgroundColor = ,
    drawerContentColor = ,
    drawerScrimColor = ,
    content = {
        
        scope.launch {
            scaffoldState.drawerState.open()
        }
    }
)

М3

import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.rememberDrawerState

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet(
            drawerShape = ,
            drawerTonalElevation = ,
            drawerContainerColor = ,
            drawerContentColor = ,
            content = {  }
        )
    },
    gesturesEnabled = ,
    scrimColor = ,
    content = {
        Scaffold(
            content = {
                
                scope.launch {
                    drawerState.open()
                }
            }
        )
    }
)

Верхняя панель приложений

Сравнение каркаса M2 и M3 с верхней панелью приложения и прокручиваемым списком.
Рисунок 6 . Форма M2 с верхней панелью приложений и прокручиваемым списком (слева) и платформа M3 с верхней панелью приложений и прокручиваемым списком (справа)

Верхние панели приложений в M3 отличаются от панелей в M2. И в M2, и в M3 основная компонуемая верхняя панель приложения называется TopAppBar , но пакеты и параметры импорта различаются:

М2

import androidx.compose.material.TopAppBar

TopAppBar()

М3

import androidx.compose.material3.TopAppBar

TopAppBar()

Рассмотрите возможность использования M3 CenterAlignedTopAppBar , если вы ранее центрировали контент внутри M2 TopAppBar . Также полезно знать о MediumTopAppBar и LargeTopAppBar .

Верхние панели приложений M3 содержат новый параметр scrollBehavior , обеспечивающий различные функции при прокрутке класса TopAppBarScrollBehavior , например изменение высоты. Это работает в сочетании с прокруткой контента через Modifer.nestedScroll . Это стало возможным в TopAppBar M2 путем изменения параметра elevation вручную:

М2

import androidx.compose.material.AppBarDefaults
import androidx.compose.material.Scaffold
import androidx.compose.material.TopAppBar

val state = rememberLazyListState()
val isAtTop by remember {
    derivedStateOf {
        state.firstVisibleItemIndex == 0 && state.firstVisibleItemScrollOffset == 0
    }
}

Scaffold(
    topBar = {
        TopAppBar(
            elevation = if (isAtTop) {
                0.dp
            } else {
                AppBarDefaults.TopAppBarElevation
            },
            
        )
    },
    content = {
        LazyColumn(state = state) {  }
    }
)

М3

import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            scrollBehavior = scrollBehavior,
            
        )
    },
    content = {
        LazyColumn {  }
    }
)

Нижняя навигация/Панель навигации

Сравнение нижней навигации M2 и панели навигации M3
Рисунок 7 . Нижняя навигация M2 (слева) и панель навигации M3 (справа).

Нижняя навигация в M2 была переименована в панель навигации в M3. В M2 есть составные элементы BottomNavigation и BottomNavigationItem , а в M3 — составные элементы NavigationBar и NavigationBarItem :

М2

import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem

BottomNavigation {
    BottomNavigationItem()
    BottomNavigationItem()
    BottomNavigationItem()
}

М3

import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem

NavigationBar {
    NavigationBarItem()
    NavigationBarItem()
    NavigationBarItem()
}

Кнопки, кнопки со значками и FAB

Сравнение кнопок M2 и M3
Рисунок 8 . Кнопки M2 (слева) и кнопки M3 (справа)

Кнопки, кнопки со значками и кнопки плавающих действий (FAB) в M3 отличаются от кнопок в M2. M3 включает в себя все компоненты кнопок M2:

М2

import androidx.compose.material.Button
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.IconButton
import androidx.compose.material.IconToggleButton
import androidx.compose.material.OutlinedButton
import androidx.compose.material.TextButton

// M2 buttons
Button()
OutlinedButton()
TextButton()
// M2 icon buttons
IconButton()
IconToggleButton()
// M2 FABs
FloatingActionButton()
ExtendedFloatingActionButton()

М3

import androidx.compose.material3.Button
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.TextButton

// M3 buttons
Button()
OutlinedButton()
TextButton()
// M3 icon buttons
IconButton()
IconToggleButton()
// M3 FABs
FloatingActionButton()
ExtendedFloatingActionButton()

M3 также включает новые варианты кнопок. Ознакомьтесь с ними в справочном обзоре API Compose Material 3 .

Выключатель

Сравнение переключателей М2 и М3
Рисунок 9 . Переключатель M2 (слева) и переключатель M3 (справа).

Переключатель в М3 отличается от М2. И в M2, и в M3 компонуемый переключатель называется Switch , но пакеты импорта различаются:

М2

import androidx.compose.material.Switch

Switch()

М3

import androidx.compose.material3.Switch

Switch()

Поверхности и высота

Сравнение высоты поверхности M2 и высоты поверхности M3 в светлой и темной темах
Рисунок 10 . Высота поверхности M2 и высота поверхности M3 в светлой теме (слева) и темной теме (справа).

Системы поверхности и высот в M3 отличаются от M2. В M3 есть два типа возвышений:

  • Высота тени (отбрасывает тень, как и M2)
  • Тональное возвышение (накладывает цвет, новое для M3)

В Compose это относится к функции M2 Surface и функции M3 Surface :

М2

import androidx.compose.material.Surface

Surface(
    elevation = 
) {  }

М3

import androidx.compose.material3.Surface

Surface(
    shadowElevation = ,
    tonalElevation = 
) {  }

Вы можете использовать значения Dp elevation в M2 как shadowElevation , так и tonalElevation в M3, в зависимости от предпочтений дизайна UX/UI. Surface является составной основой большинства компонентов, поэтому составные компоненты могут также предоставлять параметры высоты, которые необходимо перенести таким же образом.

Тональное повышение в M3 заменяет концепцию наложения возвышений в темных темах M2. В результате ElevationOverlay и LocalElevationOverlay не существуют в M3, а LocalAbsoluteElevation в M2 изменилась на LocalAbsoluteTonalElevation в M3.

Акцент и содержание альфа

Сравнение значков M2 и M3 и выделения текста
Рисунок 11 . Значок M2 и выделение текста (слева) по сравнению со значком M3 и выделением текста (справа)

Акцент в М3 существенно отличается от М2. В M2 акцент был сделан на использовании цветов с определенными значениями альфа для различения контента, такого как текст и значки. В M3 теперь есть несколько разных подходов:

  • Использование цветов вместе с вариантами цветов из расширенной цветовой системы M3.
  • Использование разной толщины шрифта для текста.

В результате ContentAlpha и LocalContentAlpha не существуют в M3, и их необходимо заменить.

В качестве отправной точки рекомендуется использовать следующие сопоставления:

М2 М3
onSurface с ContentAlpha.high onSurface в целом, FontWeight.MediumFontWeight.Black для текста
onSurface с ContentAlpha.medium onSurfaceVariant в целом, FontWeight.ThinFontWeight.Normal для текста
onSurface с ContentAlpha.disabled onSurface.copy(alpha = 0.38f)

Вот пример выделения значков в M2 и M3:

М2

import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha

// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
    Icon()
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Icon()
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Icon()
}

М3

import androidx.compose.material3.LocalContentColor

// High emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
    Icon()
}
// Medium emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
    Icon()
}
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
    Icon()
}

Вот примеры выделения текста в M2 и M3:

М2

import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha

// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
    Text()
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Text()
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Text()
}

М3

import androidx.compose.material3.LocalContentColor

// High emphasis
Text(
    ,
    fontWeight = FontWeight.Bold
)
// Medium emphasis
Text(
    ,
    fontWeight = FontWeight.Normal
)
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
    Text(
        ,
        fontWeight = FontWeight.Normal
    )
}

Фоны и контейнеры

Фоны в M2 называются контейнерами в M3. В общем, вы можете заменить параметры background* в M2 на container* в M3, используя те же значения. Например:

М2

Badge(
    backgroundColor = MaterialTheme.colors.primary
) {  }

М3

Badge(
    containerColor = MaterialTheme.colorScheme.primary
) {  }

Чтобы узнать больше о переходе с M2 на M3 в Compose, обратитесь к следующим дополнительным ресурсам.

Документы

Примеры приложений

Видео

Ссылка на API и исходный код

{% дословно %} {% дословно %} {% дословно %} {% дословно %}