カウントアプリの動きを作ろう

カウントする部分を追加する

以下のコードを追加していきましょう。この部分で、値を変更して、表示することができます。

@Composable
fun CountAppScreen(modifier: Modifier = Modifier) {

    var count by remember { mutableIntStateOf(0) }

    Column(
        modifier = modifier
    ) {
        Text(
            text = "カウント: $count",
            textAlign = TextAlign.Center
        )

        Button(
            onClick = {
                count++
            }
        ) {
            Text(
                text = "+",
            )
        }
    }
}

ヒント

以下のところは何度も、Macの人は option + return、Winの人は alt + enter を押してたくさんインポートしましょう。

イベントとは？

• ユーザの動作などに応じてプログラムを実行する。
• 「〇〇した時にこれを実行する」ができる。

Compose でのイベントとは？

Compose では Button の onClick や clickable Modifier を使用してイベントを登録します。

Button(
    onClick = {
        Log.d("Buttonのテスト", "クリックした時に実行されたよ！")
    },
) {
    Text(text = "押してみて")
}

宣言的 UI の思想

Jetpack Compose は宣言的 UI という考え方を採用しています。

1. State（状態）: テキストフィールドに “こんにちは” が入っている
2. State を UI に反映: UI が “こんにちは” と表示する
3. State を更新: ユーザーの操作などで State が変わる
4. UI が自動更新: State の変更に応じて UI が自動的に更新される

この流れを繰り返すことで、アプリの状態と画面表示が常に同期されます。

State の定義と更新

State の定義

var searchText by remember { mutableStateOf("") }

State の更新

searchText = newSearchText

注意

ただの変数だと、イベントが発火しないで、見た目レンダリングが行われず、表示が更新されません。必ず remember と mutableStateOf を使いましょう。

実際に動かしてみる

Android Studio の上部にある「Run ‘app’」ボタンをクリックしてみましょう。

これで、エミュレータが立ち上がり、自動でコードをビルドされます。

カウントされるようになりましたか？ボタンを押すたびに数字が増えれば成功です。

カウントアプリ完成！

カウントアプリがこれで完成しました！

おめでとうございます…といきたいところですが、ちょっと見た目が寂しいですね。少し見た目を改善してみましょう。