このページは Cloud Translation API によって翻訳されました。

ユーザー入力を処理する

TextField を使用すると、ユーザーがテキストを入力、変更できます。このページでは、TextField の実装、TextField 入力のスタイル設定、その他の TextField オプション（キーボードオプションやユーザー入力の視覚的な変換など）の構成方法について説明します。

`TextField` の実装を選択する

TextField の実装には次の 2 つのレベルがあります。

TextField はマテリアルデザインの実装であり、マテリアルデザインのガイドラインに沿って、この実装を選択することをおすすめします。
- デフォルトのスタイル設定は塗りつぶしです。
- OutlinedTextField は、枠線のスタイル設定バージョンです。
BasicTextField を使用すると、ユーザーはハードウェアキーボードまたはソフトウェアキーボードからテキストを編集できますが、ヒントやプレースホルダなどの装飾は提供されません。

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

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}TextSnippets.kt

次の単語を含む編集可能なテキストフィールド

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

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}TextSnippets.kt

紫色の枠線とラベルが付いた編集可能なテキストフィールド。

スタイル`TextField`

TextField と BasicTextField は、カスタマイズ用のパラメータを多数共有しています。TextField の完全なリストは、TextField ソースコードにあります。有用なパラメータの一部を以下に示します。

singleLine
maxLines
textStyle

@Composable
fun StyledTextField() {
    var value by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = value,
        onValueChange = { value = it },
        label = { Text("Enter text") },
        maxLines = 2,
        textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
        modifier = Modifier.padding(20.dp)
    )
}TextSnippets.kt

ラベルと 2 つの編集可能な行がある、複数行の TextField

デザインでマテリアルの TextField または OutlineTextField が必要な場合は、BasicTextField ではなく TextField をおすすめします。ただし、マテリアル仕様の装飾を必要としないデザインを作成する場合は、BasicTextField を使用する必要があります。

Brush API を使用したスタイル入力

Brush API を使用すると、TextField でより高度なスタイルを設定できます。次のセクションでは、ブラシを使用して TextField 入力に色付きのグラデーションを追加する方法について説明します。

Brush API を使用してテキストのスタイルを設定する方法について詳しくは、Brush API で高度なスタイル設定を有効にするをご覧ください。

`TextStyle` を使用して色付きグラデーションを実装する

TextField 内での入力時に色付きのグラデーションを実装するには、選択したブラシを TextField の TextStyle に設定します。この例では、linearGradient のある組み込みブラシを使用して、TextField にテキストが入力されたときにレインボーグラデーション効果を表示します。

var text by remember { mutableStateOf("") }
val brush = remember {
    Brush.linearGradient(
        colors = rainbowColors
    )
}
TextField(
    value = text, onValueChange = { text = it }, textStyle = TextStyle(brush = brush)
)TextSnippets.kt

buildAnnotatedString と SpanStyle を linearGradient とともに使用して、テキストのみをカスタマイズします。 — **図 3.**`buildAnnotatedString` と `SpanStyle` を `linearGradient` とともに使用して、テキストのみをカスタマイズする。

キーボードオプションを設定する

TextField を使用すると、キーボードレイアウトなどのキーボード構成オプションを設定できます。また、キーボードでサポートされている場合は、自動修正を有効にすることも可能です。ソフトウェアキーボードが次に示すオプションに対応していない場合、一部のオプションは保証されない可能性があります。サポートされているキーボードオプションは次のとおりです。

capitalization
autoCorrect
keyboardType
imeAction

入力フォーマット

TextField を使用すると、入力値に VisualTransformation を設定できます。たとえば、パスワードの文字を * で置き換えたり、クレジットカード番号の 4 桁の数字ごとにハイフンを挿入したりできます。

@Composable
fun PasswordTextField() {
    var password by rememberSaveable { mutableStateOf("") }

    TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text("Enter password") },
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
    )
}TextSnippets.kt

文字がマスクされたパスワード入力欄

その他の例については、VisualTransformationSamples ソースコードをご覧ください。

入力をクリーニング

テキストを編集する場合の一般的なタスクは、先頭の文字列を削除することか、あるいは変更されるたびに入力文字列を変換することです。

一つのモデルとして、onValueChange ごとにキーボードから任意の大幅な編集がなされる場合を考える必要があります。たとえば、ユーザーが自動修正や、単語の絵文字への置き換えなど、高度な編集機能を使用する場合です。これを適切に処理するには、今回 onValueChange に渡されるテキストは、前回または次回 onValueChange に渡される値と無関係であるという前提で、変換ロジックを作成します。

また、先頭のゼロを禁止するテキストフィールドを実装するには、値が変更されるたびに先頭のゼロをすべて削除します。

@Composable
fun NoLeadingZeroes() {
    var input by rememberSaveable { mutableStateOf("") }
    TextField(
        value = input,
        onValueChange = { newText ->
            input = newText.trimStart { it == '0' }
        }
    )
}TextSnippets.kt

テキストを削除する際にカーソルの位置を制御するには、状態の一部として TextField の TextFieldValue オーバーロードを使用します。

状態に関するベストプラクティス

アプリの入力の問題を防ぐために、TextField の状態を定義して更新するための一連のベストプラクティスを以下に示します。

MutableState を使用して TextField 状態を表現する: StateFlow などのリアクティブストリームを使用して TextField 状態を表現することは避けてください。これらの構造では、非同期の遅延が発生する可能性があります。

class SignUpViewModel : ViewModel() {

    var username by mutableStateOf("")
        private set

    /* ... */
}TextSnippets.kt

遅延を回避して状態を更新する: onValueChange を呼び出したら、TextField を同期的かつ直ちに更新します。

// SignUpViewModel.kt

class SignUpViewModel(private val userRepository: UserRepository) : ViewModel() {

    var username by mutableStateOf("")
        private set

    fun updateUsername(input: String) {
        username = input
    }
}

// SignUpScreen.kt

@Composable
fun SignUpScreen(/*...*/) {

    OutlinedTextField(
        value = viewModel.username,
        onValueChange = { username -> viewModel.updateUsername(username) }
        /*...*/
    )
}TextSnippets.kt

状態を定義する場所: TextField の状態の入力時にビジネスロジックの検証が必要な場合は、ViewModel に状態をホイスティングすることをおすすめします。存在しない場合は、コンポーザブルまたは状態ホルダークラスを信頼できる情報源として使用できます。状態をホイスティングする場所の詳細については、状態ホイスティングのドキュメントをご覧ください。

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
Compose UI を設計する
状態と Jetpack Compose
Compose で UI 状態を保存する