状態を保存する

Conposeで状態を保存する方法のメモ

ただ変数に値を設定しただけではComposeによってトラッキングされていないため、下記コードのクリックイベントを動かすことはできない。Sampleが呼び出されるたびにexpanded変数はfalseにリセットされる。
再コンポジションされない内部状態を追加するにはmutableStateOf 関数を使用する。これは、Composeが状態を読み取り関数を再コンポーズするようになる。さらに状態を保持するrememberと合わせて使うことコンポーズを超えて状態が保持されるようになるので、値が初期化(false)されることはなくなる。

@Composable
fun Sample() {
var expanded = false
    // var expanded = false 
    // 内部状態を保存していないため、関すが呼び出されるたびにリセットされる

    // var expanded = mutableStateOf(false) 
    // 内部状態を追加できる。しかし再コンポジションが発生した場合、値がリセット(false)される

    val expanded = remember { mutableStateOf(false) }
    // 再Composeを超えて状態が保持されるようになるので、初期化されることはない
    
    Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = Modifier.fillMaxSize()
    ) {
        Row {
            ElevatedButton(onClick = { expanded.value = !expanded.value }) {
                Text(if (expanded.value) "Show less" else "Show more")
            }
        }
    }
}

参考