Column {
var displayCount by remember { mutableStateOf(0) }
Text(
text = "$count",
modifier = Modifier.padding(20.dp)
)
Button(
onClick = { count++ }
) {
Text(text = "Count up!")
}
}displayCountの宣言時にmutableStateOf(0)で初期値を0に設定。
また、型がMutableStateなのでJetpackComposeが値の変更を検知する。
ButtonクリックでonClickイベント発動
→countの値更新
→JetpackComposeが値変更を検知
→Columnから再構築される（このときcountはremember宣言しているので再構築前の値を覚えている）
→表示が1に更新される
Jetpack Composeは、「宣言型」UIフレームワークです。宣言型UIでは、宣言時（UI作成時）にUIの状態をすべて決定し、後から変更しません。UIコンポーネントの状態（表示する文字列や色や大きさなど）を後から変更するということはできない仕組みになっているのです。この仕組みのおかげでソースコードがシンプルになります。
では状態を変更せずにどうやって動的なUIを実現するのかというと、UIの更新が必要になるたびにUI全体を一から再構築します。もちろん再構築はフレームワークが自動で行います。Jetpack Composeフレームワークが状態の更新を検出したら、UI全体を構築しなおます。この状態更新の検出に使われるのが、上のサンプルでも使っているMutableStateというわけです。
