モケラ

Tech Sheets

mokelab

Jetpack Composeでテキスト入力欄を表示する

最終更新日:2022-05-08

Jetpack Composeでテキスト入力欄を表示するには TextField Composable関数を使います。引数 value には現在表示中のテキストを指定し、 onValueChange で入力中の内容が更新されたとき、現在表示中テキストを更新します。

@Composable
fun Greeting() {
    var text by remember { mutableStateOf("") }

    TextField(value = text,
        onValueChange = { newValue -> text = newValue }
    )
}

再Compose時に入力中の内容が消えてしまうと困るので、 remember を使います。 getValuesetValue のインポートが必要なので追加しておきましょう。

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
// or
import androidx.compose.runtime.*

プレビューは次のようになります。今回はプレビュー部分をエミュレーターで実行しています。

一覧に戻る