JetpackCompose チュートリアル2

要素の中央寄せ

中身を中央寄せしたい親要素で以下を指定

verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,

Textに背景をつける

Surfaceで囲ってSurfaceにcolorを指定する。
Surafceのようなマテリアルコンポーネントはその上に乗るText等の色を適切なものに変えてくれるらしい。

Surface(color = MaterialTheme.colorScheme.primary) {
    Text (text = "Hello $name!")
}

Composeの状態の保持

JetpackCodeLab参照

State と MutableState は、なんらかの値を保持し、その値が変化するたびに UI の更新（再コンポジション）をトリガーするインターフェースです。
しかし、コンポーザブル内の変数に mutableStateOf を割り当てることはできません。前述のとおり、再コンポジションが随時発生する可能性があります。その結果、コンポーザブルが再度呼び出されて変更可能な状態がリセットされ、値が新たに false になることが考えられます。
再コンポジションの前後で状態を保持するには、remember を使用して可変状態を「記憶」します。

@Composable
private fun Greeting(name: String) {
    val expanded = remember { mutableStateOf(false) }

    Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello, ")
                Text(text = name)
            }
            ElevatedButton(
                onClick = { expanded.value = !expanded.value }
            ) {
                Text(if (expanded.value) "Show less" else "Show more")
            }
        }
    }
}

次回はJetpackCodeLabの8. 状態ホイスティングから