State и Jetpack Compose

Состояние в приложении — это любое значение, которое может меняться со временем. Это очень широкое определение, которое охватывает все: от базы данных Room до переменной в классе.

Все приложения Android отображают состояние пользователю. Несколько примеров состояния в приложениях Android:

  • Снэк-бар, который показывает, что сетевое соединение не может быть установлено.
  • Запись в блоге и связанные с ней комментарии.
  • Анимация ряби на кнопках, которая воспроизводится, когда пользователь нажимает на них.
  • Наклейки, которые пользователь может рисовать поверх изображения.

Jetpack Compose помогает вам быть явным в отношении того, где и как вы храните и используете состояние в приложении Android. Это руководство фокусируется на связи между состоянием и компонуемыми объектами, а также на API, которые Jetpack Compose предлагает для более простой работы с состоянием.

Состояние и состав

Compose является декларативным, и поэтому единственный способ обновить его — вызвать тот же компонуемый объект с новыми аргументами. Эти аргументы являются представлениями состояния пользовательского интерфейса. Каждый раз, когда состояние обновляется, происходит перекомпоновка . В результате такие вещи, как TextField , не обновляются автоматически, как в императивных представлениях на основе XML. Компонуемому объекту необходимо явно сообщить новое состояние, чтобы он обновился соответствующим образом. 

@Composable
private fun HelloContent() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(
            text = "Hello!",
            modifier = Modifier.padding(bottom = 8.dp),
            style = MaterialTheme.typography.bodyMedium
        )
        OutlinedTextField(
            value = "",
            onValueChange = { },
            label = { Text("Name") }
        )
    }
}
StateOverviewSnippets.kt

Если вы запустите это и попытаетесь ввести текст, вы увидите, что ничего не происходит. Это потому, что TextField не обновляется сам по себе — он обновляется, когда изменяется его параметр value . Это связано с тем, как композиция и рекомпозиция работают в Compose.

Чтобы узнать больше о первоначальном сочинении и пересочинении, см. раздел Размышления при сочинении .

Состояние в компонуемых

Компонуемые функции могут использовать remember API для сохранения объекта в памяти. Значение, вычисленное remember сохраняется в Composition во время первоначальной композиции, а сохраненное значение возвращается во время повторной композиции. remember можно использовать для сохранения как изменяемых, так и неизменяемых объектов.

mutableStateOf создает наблюдаемый MutableState<T> , который является наблюдаемым типом, интегрированным со средой выполнения Compose.

interface MutableState<T> : State<T> {
    override var value: T
}

Любые изменения value приводят к перекомпоновке любых составных функций, которые считывают value .

Существует три способа объявить объект MutableState в компонуемом объекте:

  • val mutableState = remember { mutableStateOf(default) }
  • var value by remember { mutableStateOf(default) }
  • val (value, setValue) = remember { mutableStateOf(default) }

Эти объявления эквивалентны и предоставляются как синтаксический сахар для различных применений состояния. Вам следует выбрать тот, который создает наиболее простой для чтения код в компонуемом вами объекте.

Синтаксис by требует следующих импортов:

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

Вы можете использовать запомненное значение как параметр для других компонуемых или даже как логику в операторах для изменения отображаемых компонуемых. Например, если вы не хотите отображать приветствие, если имя пустое, используйте состояние в операторе if : 

@Composable
fun HelloContent() {
    Column(modifier = Modifier.padding(16.dp)) {
        var name by remember { mutableStateOf("") }
        if (name.isNotEmpty()) {
            Text(
                text = "Hello, $name!",
                modifier = Modifier.padding(bottom = 8.dp),
                style = MaterialTheme.typography.bodyMedium
            )
        }
        OutlinedTextField(
            value = name,
            onValueChange = { name = it },
            label = { Text("Name") }
        )
    }
}
StateOverviewSnippets.kt

Хотя remember помогает вам сохранять состояние при рекомпозиции, состояние не сохраняется при изменении конфигурации. Для этого вы должны использовать rememberSaveable . rememberSaveable автоматически сохраняет любое значение, которое может быть сохранено в Bundle . Для других значений вы можете передать пользовательский объект saver.

Другие поддерживаемые типы состояний

Compose не требует, чтобы вы использовали MutableState<T> для хранения состояния; он поддерживает другие наблюдаемые типы. Перед чтением другого наблюдаемого типа в Compose вы должны преобразовать его в State<T> , чтобы компонуемые объекты могли автоматически перекомпоновываться при изменении состояния.

Составьте корабли с функциями для создания State<T> из общих наблюдаемых типов, используемых в приложениях Android. Перед использованием этих интеграций добавьте соответствующий артефакт(ы) , как описано ниже:

  • Flow : collectAsStateWithLifecycle()

    collectAsStateWithLifecycle() собирает значения из Flow с учетом жизненного цикла, позволяя вашему приложению экономить ресурсы приложения. Он представляет последнее переданное значение из Compose State . Используйте этот API как рекомендуемый способ сбора потоков в приложениях Android.

    В файле build.gradle требуется следующая зависимость (она должна быть 2.6.0-beta01 или новее):

Котлин 

dependencies {
      ...
      implementation("androidx.lifecycle:lifecycle-runtime-compose:2.8.7")
}

Круто 

dependencies {
      ...
      implementation "androidx.lifecycle:lifecycle-runtime-compose:2.8.7"
}

  • Flow : collectAsState()

    collectAsState похож на collectAsStateWithLifecycle , поскольку он также собирает значения из Flow и преобразует их в State Compose.

    Используйте collectAsState для платформенно-независимого кода вместо collectAsStateWithLifecycle , который предназначен только для Android.

    Для collectAsState не требуются дополнительные зависимости, поскольку он доступен в compose-runtime .

  • LiveData : observeAsState()

    observeAsState() начинает наблюдение за этими LiveData и представляет их значения через State .

    В файле build.gradle требуется следующая зависимость :

Котлин 

dependencies {
      ...
      implementation("androidx.compose.runtime:runtime-livedata:1.8.1")
}

Круто 

dependencies {
      ...
      implementation "androidx.compose.runtime:runtime-livedata:1.8.1"
}

Котлин 

dependencies {
      ...
      implementation("androidx.compose.runtime:runtime-rxjava2:1.8.1")
}

Круто 

dependencies {
      ...
      implementation "androidx.compose.runtime:runtime-rxjava2:1.8.1"
}

Котлин 

dependencies {
      ...
      implementation("androidx.compose.runtime:runtime-rxjava3:1.8.1")
}

Круто 

dependencies {
      ...
      implementation "androidx.compose.runtime:runtime-rxjava3:1.8.1"
}

С сохранением состояния против без сохранения состояния

Composable, который использует remember для хранения объекта, создает внутреннее состояние, делая composable stateful . HelloContent является примером stateful composable, поскольку он хранит и изменяет свое name state внутренне. Это может быть полезно в ситуациях, когда вызывающему не нужно контролировать состояние, и он может использовать его без необходимости управлять состоянием самостоятельно. Однако composable с внутренним состоянием, как правило, менее пригодны для повторного использования и сложнее для тестирования.

Без состояния компонуемый — это компонуемый, который не содержит никакого состояния. Простой способ достичь состояния без состояния — использовать поднятие состояния .

При разработке повторно используемых компонуемых объектов вам часто требуется предоставить как версию с состоянием, так и версию без состояния одного и того же компонуемого объекта. Версия с состоянием удобна для вызывающих объектов, которым не важно состояние, а версия без состояния необходима для вызывающих объектов, которым нужно контролировать или поднимать состояние.

Государственный подъем

Подъем состояния в Compose — это шаблон перемещения состояния в вызывающую сторону компонуемого объекта, чтобы сделать компонуемый объект без состояния. Общий шаблон для подъема состояния в Jetpack Compose — заменить переменную состояния двумя параметрами:

  • value: T : текущее значение для отображения
  • onValueChange: (T) -> Unit : событие, которое запрашивает изменение значения, где T — предлагаемое новое значение

Однако вы не ограничены onValueChange . Если для компонуемого объекта подходят более конкретные события, следует определить их с помощью лямбда-выражений.

Состояние, поднятое таким образом, имеет некоторые важные свойства:

  • Единый источник истины: Перемещая состояние вместо его дублирования, мы гарантируем, что есть только один источник истины. Это помогает избежать ошибок.
  • Инкапсулированный: Только сохраняющие состояние компоновочные объекты могут изменять свое состояние. Это полностью внутреннее.
  • Shareable: Поднятое состояние может быть общим для нескольких компонуемых. Если вы хотите прочитать name в другом компонуемом, подъем позволит вам это сделать.
  • Перехватываемость: вызывающие объекты, не имеющие состояния, могут решить игнорировать или изменять события перед изменением состояния.
  • Разделено: состояние для компонуемых объектов без состояния может храниться где угодно. Например, теперь можно переместить name в ViewModel .

В этом примере вы извлекаете name и onValueChange из HelloContent и перемещаете их вверх по дереву в составной элемент HelloScreen , который вызывает HelloContent . 

@Composable
fun HelloScreen() {
    var name by rememberSaveable { mutableStateOf("") }

    HelloContent(name = name, onNameChange = { name = it })
}

@Composable
fun HelloContent(name: String, onNameChange: (String) -> Unit) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(
            text = "Hello, $name",
            modifier = Modifier.padding(bottom = 8.dp),
            style = MaterialTheme.typography.bodyMedium
        )
        OutlinedTextField(value = name, onValueChange = onNameChange, label = { Text("Name") })
    }
}
StateOverviewSnippets.kt

Поднимая состояние из HelloContent , становится проще рассуждать о компонуемом, повторно использовать его в разных ситуациях и тестировать. HelloContent отделен от того, как хранится его состояние. Отделение означает, что если вы изменяете или заменяете HelloScreen , вам не нужно менять способ реализации HelloContent .

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

Более подробную информацию см. на странице «Где поднять государство» .

Восстановление состояния в Compose

API rememberSaveable ведет себя аналогично remember , поскольку сохраняет состояние при рекомпозиции, а также при воссоздании активности или процесса с использованием механизма сохраненного состояния экземпляра. Например, это происходит при повороте экрана.

Способы хранения состояния

Все типы данных, которые добавляются в Bundle , сохраняются автоматически. Если вы хотите сохранить что-то, что не может быть добавлено в Bundle , есть несколько вариантов.

Парцеллировать

Самое простое решение — добавить аннотацию @Parcelize к объекту. Объект становится parcelable и может быть bundled. Например, этот код создает parcelable тип данных City и сохраняет его в state. 

@Parcelize
data class City(val name: String, val country: String) : Parcelable

@Composable
fun CityScreen() {
    var selectedCity = rememberSaveable {
        mutableStateOf(City("Madrid", "Spain"))
    }
}
StateOverviewSnippets.kt

MapSaver

Если по какой-то причине @Parcelize не подходит, вы можете использовать mapSaver , чтобы определить собственное правило преобразования объекта в набор значений, которые система может сохранить в Bundle . 

data class City(val name: String, val country: String)

val CitySaver = run {
    val nameKey = "Name"
    val countryKey = "Country"
    mapSaver(
        save = { mapOf(nameKey to it.name, countryKey to it.country) },
        restore = { City(it[nameKey] as String, it[countryKey] as String) }
    )
}

@Composable
fun CityScreen() {
    var selectedCity = rememberSaveable(stateSaver = CitySaver) {
        mutableStateOf(City("Madrid", "Spain"))
    }
}
StateOverviewSnippets.kt

ListSaver

Чтобы избежать необходимости определять ключи для карты, вы также можете использовать listSaver и использовать его индексы в качестве ключей: 

data class City(val name: String, val country: String)

val CitySaver = listSaver<City, Any>(
    save = { listOf(it.name, it.country) },
    restore = { City(it[0] as String, it[1] as String) }
)

@Composable
fun CityScreen() {
    var selectedCity = rememberSaveable(stateSaver = CitySaver) {
        mutableStateOf(City("Madrid", "Spain"))
    }
}
StateOverviewSnippets.kt

Государственные держатели в Compose

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

Дополнительную информацию см. в документации Compose о подъеме состояний или, в более общем плане, на странице «Хранители состояний» и «Состояние пользовательского интерфейса» в руководстве по архитектуре.

Повторно запоминать вычисления при смене ключей

API remember часто используется вместе с MutableState : 

var name by remember { mutableStateOf("") }
StateOverviewSnippets.kt

В данном случае использование функции remember позволяет значению MutableState сохраняться после перекомпоновки.

В общем, remember принимает параметр лямбда calculation . При первом запуске remember вызывает лямбда calculation и сохраняет его результат. Во время перекомпоновки remember возвращает последнее сохраненное значение.

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

val brush = remember {
    ShaderBrush(
        BitmapShader(
            ImageBitmap.imageResource(res, avatarRes).asAndroidBitmap(),
            Shader.TileMode.REPEAT,
            Shader.TileMode.REPEAT
        )
    )
}
StateOverviewSnippets.kt

remember сохраняет значение до тех пор, пока оно не покинет Composition. Однако есть способ сделать кэшированное значение недействительным. remember API также принимает параметр key или keys . Если какой-либо из этих ключей изменится, при следующей перекомпоновке функции remember сделает кэш недействительным и снова выполнит блок лямбда-выражения вычисления . Этот механизм дает вам контроль над временем существования объекта в Composition. Вычисление остается действительным до тех пор, пока не изменятся входные данные, а не до тех пор, пока запомненное значение не покинет Composition.

Следующие примеры показывают, как работает этот механизм.

В этом фрагменте ShaderBrush создается и используется в качестве фоновой краски для составного объекта Box . remember сохраняет экземпляр ShaderBrush , поскольку его создание обходится дорого, как объяснялось ранее. remember принимает avatarRes в качестве параметра key1 , который является выбранным фоновым изображением. Если avatarRes изменяется, кисть перекомпоновывается с новым изображением и повторно применяется к Box . Это может произойти, когда пользователь выбирает другое изображение в качестве фона из средства выбора. 

@Composable
private fun BackgroundBanner(
    @DrawableRes avatarRes: Int,
    modifier: Modifier = Modifier,
    res: Resources = LocalContext.current.resources
) {
    val brush = remember(key1 = avatarRes) {
        ShaderBrush(
            BitmapShader(
                ImageBitmap.imageResource(res, avatarRes).asAndroidBitmap(),
                Shader.TileMode.REPEAT,
                Shader.TileMode.REPEAT
            )
        )
    }

    Box(
        modifier = modifier.background(brush)
    ) {
        /* ... */
    }
}
StateOverviewSnippets.kt

В следующем фрагменте state поднимается в простой класс-держатель состояния MyAppState . Он предоставляет функцию rememberMyAppState для инициализации экземпляра класса с помощью remember . Предоставление таких функций для создания экземпляра, который переживает перекомпозиции, является распространенным шаблоном в Compose. Функция rememberMyAppState получает windowSizeClass , который служит key параметром для remember . Если этот параметр изменяется, приложению необходимо заново создать простой класс-держатель состояния с последним значением. Это может произойти, например, если пользователь поворачивает устройство. 

@Composable
private fun rememberMyAppState(
    windowSizeClass: WindowSizeClass
): MyAppState {
    return remember(windowSizeClass) {
        MyAppState(windowSizeClass)
    }
}

@Stable
class MyAppState(
    private val windowSizeClass: WindowSizeClass
) { /* ... */ }
StateOverviewSnippets.kt

Compose использует реализацию equals класса, чтобы определить, изменился ли ключ, и сделать сохраненное значение недействительным.

Состояние хранилища с ключами, не подлежащими повторной компоновке

API rememberSaveable — это оболочка для remember , которая может хранить данные в Bundle . Этот API позволяет сохранять состояние не только после перекомпоновки, но и после воссоздания активности и инициированной системой смерти процесса. rememberSaveable получает input параметры для той же цели, для которой remember получает keys . Кэш становится недействительным при изменении любого из входных данных . В следующий раз, когда функция перекомпонуется, rememberSaveable повторно выполняет блок лямбда-выражений расчета.

В следующем примере rememberSaveable сохраняет userTypedQuery до тех пор, пока не изменится typedQuery : 

var userTypedQuery by rememberSaveable(typedQuery, stateSaver = TextFieldValue.Saver) {
    mutableStateOf(
        TextFieldValue(text = typedQuery, selection = TextRange(typedQuery.length))
    )
}
StateOverviewSnippets.kt

Узнать больше

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

Образцы

Кодовые лаборатории

Видео

Блоги

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