web-dev-qa-db-ja.com

Jetpackでヒントテキストを持つTextField

textfieldhintのjetpackcomposeを作成したいです。 textfield [$ var] _を使ってjectpackを作成する方法は？ありがとう

androidandroid-textinputlayoutandroid-jetpack-composeandroid-compose-textfield
8
affan ahmad

下のコードのようにhintTextFieldjetpackComposeを作成できます。

@Composable
fun HintEditText(hintText: @Composable() () -> Unit) {
    val state = state { "" } // The unary plus is no longer needed. +state{""}
    val inputField = @Composable {
        TextField(
            value = state.value,
            onValueChange = { state.value = it }
        )
    }
        if (state.value.isNotEmpty()) {
        inputField()
    } else {
        Layout(inputField, hintText) { measurable, constraints ->
            val inputfieldPlacable = measurable[inputField].first().measure(constraints)
            val hintTextPlacable = measurable[hintText].first().measure(constraints)
            layout(inputfieldPlacable.width, inputfieldPlacable.height) {
                inputfieldPlacable.place(0.ipx, 0.ipx)
                hintTextPlacable.place(0.ipx, 0.ipx)
            }
        }
    }
}
 _

電話 @Composeは以下のような機能：

HintEditText @Composable {
                                Text(
                                    text = "Enter Email",
                                    style = TextStyle(
                                        color = Color.White,
                                        fontSize = 18.sp
                                    )
                                )
                            }
 _
4
Anas Mehar

Jetpack Compose Version：dev08

構成の恩恵は、現在の合成機能を構成することによって私たちのウィジェットを簡単に作成できるということです。

私達はちょうど現在のTextFieldのすべてのパラメータを持つ関数を作成し、_hint: String_パラメータを追加することができます。

_@Composable
fun TextFieldWithHint(
        value: String,
        modifier: Modifier = Modifier.None,
        hint: String,
        onValueChange: (String) -> Unit,
        textStyle: TextStyle = currentTextStyle(),
        keyboardType: KeyboardType = KeyboardType.Text,
        imeAction: ImeAction = ImeAction.Unspecified,
        onFocus: () -> Unit = {},
        onBlur: () -> Unit = {},
        focusIdentifier: String? = null,
        onImeActionPerformed: (ImeAction) -> Unit = {},
        visualTransformation: VisualTransformation? = null,
        onTextLayout: (TextLayoutResult) -> Unit = {}
) {
    Stack(Modifier.weight(1f)) {
        TextField(value = value,
                modifier = modifier,
                onValueChange = onValueChange,
                textStyle = textStyle,
                keyboardType = keyboardType,
                imeAction = imeAction,
                onFocus = onFocus,
                onBlur = onBlur,
                focusIdentifier = focusIdentifier,
                onImeActionPerformed = onImeActionPerformed,
                visualTransformation = visualTransformation,
                onTextLayout = onTextLayout)
        if (value.isEmpty()) Text(hint)
    }
}
_

このようにそれを使うことができます:

_@Model
object model { var text: String = "" }
TextFieldWithHint(value = model.text, onValueChange = { data -> model.text = data },
                    hint= "Type book name or author")
_

このアプローチの落とし穴は、ヒントを文字列として渡しているので、TextFieldWithHint（e.g HintStyle、HintModifier、HintSoftwrap、...）に追加のパラメータを追加する必要があります。

より良いアプローチは、文字列の代わりに合成ラムダを受け入れることです。

_@Composable
fun TextFieldWithHint(
        value: String,
        modifier: Modifier = Modifier.None,
        hint: @Composable() () -> Unit,
        onValueChange: (String) -> Unit,
        textStyle: TextStyle = currentTextStyle(),
        keyboardType: KeyboardType = KeyboardType.Text,
        imeAction: ImeAction = ImeAction.Unspecified,
        onFocus: () -> Unit = {},
        onBlur: () -> Unit = {},
        focusIdentifier: String? = null,
        onImeActionPerformed: (ImeAction) -> Unit = {},
        visualTransformation: VisualTransformation? = null,
        onTextLayout: (TextLayoutResult) -> Unit = {}
) {
    Stack(Modifier.weight(1f)) {
        TextField(value = value,
                modifier = modifier,
                onValueChange = onValueChange,
                textStyle = textStyle,
                keyboardType = keyboardType,
                imeAction = imeAction,
                onFocus = onFocus,
                onBlur = onBlur,
                focusIdentifier = focusIdentifier,
                onImeActionPerformed = onImeActionPerformed,
                visualTransformation = visualTransformation,
                onTextLayout = onTextLayout)
        if (value.isEmpty()) hint()
    }
}
_

このようにそれを使うことができます:

_@Model
object model { var text: String = "" }

TextFieldWithHint(value = model.text, onValueChange = { data -> model.text = data },
            hint= { Text("Type book name or author", style = TextStyle(color = Color(0xFFC7C7C7))) })
_
0
Habib Kazemi

テキストが空の場合、labelパラメータはテキストとして表示され、入力入力時にテキストフィールド（ラベルとして）上に移動します。

    @Composable
    fun SearchField() {
        val (text, setText) = remember { mutableStateOf(TextFieldValue("")) }
        Box(modifier = Modifier.width(180.dp).padding(2.dp)) {
            TextField(
                modifier = Modifier.fillMaxWidth(),
                value = text,
                onValueChange = { setText(it) },
                label = { Text("quick do:") },
            )
        }
    }
 _
0
Dirk Hoffmann