Производное состояние

Какое-то состояние компонентов может зависеть от различных условий, в том числе и от другого состояния, то есть оно должно изменяться динамически при изменении соответствующих условий. Jetpack Compose позволяет определить такое состояние как вычисляемое или производное. Для определения такого состояния применяется функция derivedStateOf():

public fun <T> derivedStateOf(
    calculation: () -> T
): State<T>

Эта функция принимает функцию, которая собственно и вычисляет некоторое значение, и это значение возвращается в виде состояния из derivedStateOf

Рассмотрим простейший пример:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.unit.sp
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val counter = remember{ mutableStateOf(0) }
            val double = remember { derivedStateOf { counter.value * 2 } }
            Column {
                Text("Counter: ${counter.value}",
                    Modifier.padding(8.dp).clickable { counter.value++ },
                    fontSize = 28.sp)
                Text("Double: ${double.value}", Modifier.padding(8.dp), fontSize = 28.sp)
            }
        }
    }
}

Здесь вначале определяется обычное состояние counter, которое представляет число и по умолчанию равно 0:

val counter = remember{ mutableStateOf(0) }

А далее определяется производное состояние double:

val double = remember { derivedStateOf { counter.value * 2 } }

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

В компоненте Column определено два компонента Text, первый из которых отображает значение counter, а второй - значение double. Причем по нажатию на первый Text увеличивается значение counter на единицу. Однако поскольку значение double зависит от состояния counter, то изменение counter автоматически приведут к изменению в double: