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

ユーザー入力を処理する

TextField: ユーザーはテキストを入力、変更できます。このページでは TextField の実装、TextField 入力のスタイル設定、構成が可能です。キーボードオプションや視覚的変形など、他の TextField オプションできます。

`TextField` の実装を選択する

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

TextField はマテリアルデザインの実装であり、Google Cloud コンソールのこの実装はマテリアルデザインガイドライン:
- デフォルトのスタイル設定は塗りつぶしです。
- 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 または OutlinedTextField が必要な場合は、BasicTextField ではなく TextField をおすすめします。ただし、BasicTextField を使用する必要があります。を使用すると、マテリアル仕様の装飾を必要としないデザインを作成できます。

Brush API による入力のスタイル設定

TextField で高度なスタイル設定を行うには、Brush API を使用します。「次のセクションでは、ブラシを使用して色付きのグラデーションを追加する方法について説明します。 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 にホイスティングするのが正しい方法です。そうでない場合は、コンポーザブルまたは状態保持クラスを信頼できる情報源として使用できます。状態をホイスティングする場所について詳しくは、以下をご覧ください。状態ホイスティングのドキュメントをご覧ください。

現在、おすすめはありません。

Google アカウントにログインしてください。

ユーザー入力を処理する

TextField の実装を選択する

スタイルTextField