在jetpack compose中带有提示文本的TextField

Question

我想创建textfield与hint文本jetpackcompose。任何示例如何创建textfield使用jectpack？谢谢

Answer 1

有了1.0.0你可以使用这样的：

var text by remember { mutableStateOf("text") }

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

或者

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

Answer 2

您可以创建hintTextField在jetpackCompose类似下面的代码：

@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
                                    )
                                )
                            }

Answer 3

compose_version = '1.0.0-beta07'

使用参数placeholder显示提示

TextField(value = "", onValueChange = {}, placeholder = { Text("Enter Email") })

使用参数label显示浮动标签

TextField(value = "", onValueChange = {}, label = { Text("Enter Email") })