ボタンを配置して、ボタンを押すとテキストが表示される

今回は以下のステップで進めましょう。

新しいテキスト表示用の状態変数を定義する
ボタンを押したときに表示されるテキストを制御するために、MutableStateという仕組みを使います。
ボタンとテキストを配置する
@Composable 関数の中に、Button と Text を配置します。
ボタンのクリックイベントを設定する
Button の onClick プロパティに、テキストの状態を変更する処理を記述します。

具体的な手順

MainActivity.kt ファイルを開き、以下の変更を加えてみてください。

1. 必要なimportを追加

ファイルの先頭あたりに、以下を追加してください。（既にあるものもあるかもしれません）

import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.Column // レイアウト用
import androidx.compose.foundation.layout.padding // レイアウト用
import androidx.compose.ui.Modifier // レイアウト用
import androidx.compose.ui.unit.dp // レイアウト用

Compose (Jetpack Compose) を使っている前提で説明しますね。XMLレイアウトとは考え方が少し異なりますが、Kotlinコードで直接UIを記述していくので、慣れると非常に直感的です。

2. Greeting 関数を修正してボタンと表示テキストを追加する

既存の Greeting 関数（またはそれに似た、最初に画面に表示される @Composable 関数）を見つけて、以下のように変更します。

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    // 表示するテキストの状態を保持する変数
    // rememberは、コンポジションが再描画されてもこの値を保持するために使う
    var showText by remember { mutableStateOf(false) }

    Column(modifier = modifier.padding(16.dp)) { // 縦方向に要素を並べるColumnを使用
        // まずは最初の挨拶文
        Text(
            text = "こんにちは、$name!",
            modifier = Modifier.padding(bottom = 16.dp) // 下に少し余白
        )

        // ボタンを配置
        Button(onClick = {
            // ボタンがクリックされたら、showTextの状態を反転させる
            showText = !showText
        }) {
            Text("メッセージを表示/非表示")
        }

        // showTextがtrueの場合のみ、新しいテキストを表示
        if (showText) {
            Text(
                text = "ボタンが押されました！新しいメッセージです！",
                modifier = Modifier.padding(top = 16.dp) // 上に少し余白
            )
        }
    }
}

3. GreetingPreview も修正（任意）

プレビュー画面でボタンとテキストを確認できるように、GreetingPreview 関数も同様に修正すると良いでしょう。

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    YourAppNameTheme { // YourAppNameThemeはあなたのプロジェクト名に置き換わる
        Greeting("Android")
    }
}

これで、アプリを再実行すると、「こんにちは、Android!」というテキストの下にボタンが表示され、そのボタンを押すと「ボタンが押されました！新しいメッセージです！」というテキストが表示されたり消えたりするはずです。