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

ユーザー入力を処理する

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

`TextField` の実装を選択する

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

TextField はマテリアルデザインの実装であり、Google Cloud コンソールのこの実装はマテリアルデザインガイドライン: <ph type="x-smartling-placeholder">
- デフォルトのスタイル設定は塗りつぶしです。
- 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

設計上 BasicTextField ではなく TextField を使用することをおすすめしますマテリアルの TextField または OutlineTextField。ただし、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。そうでない場合は、コンポーザブルまたは状態ホルダークラスをあります。状態をホイスティングする場所について詳しくは、以下をご覧ください。状態ホイスティングのドキュメントをご覧ください。

あなたへのおすすめ

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