Jetpack 中的 DecorationBox Compose BasicTextField

Question

我使用 jetpack compose 创建了一个 editText，我想像之前那样显示一个提示“android:hint”，所以我尝试使用decorationBox，但是在我创建它之后不显示输入并且日志可以显示我的输入内容。这是我的代码，

val passState= remember { mutableStateOf(TextFieldValue("")) }
BasicTextField(
    decorationBox = {
        Text("password",color = loginGrayColor)
    },
    value = passState.value,
    onValueChange = { passState.value = it ; Log.d("password",it.text) },
    singleLine = true,
    maxLines = 1,
    textStyle = TextStyle(
        fontSize = 15.sp,
        color = loginInputTextColor
    ),
    modifier = Modifier
        .padding(start = 10.dp, top = 10.dp)
        .height(20.dp)
)

Answer 1

您必须添加 decorationBox 提供的 innerTextField。
类似于：

var value by remember { mutableStateOf(TextFieldValue("")) }
BasicTextField(
    value = value,
    onValueChange = { value = it },
    decorationBox = { innerTextField ->
        Row(
            Modifier
                .background(Color.LightGray, RoundedCornerShape(percent = 30))
                .padding(16.dp)
        ) {

            if (value.text.isEmpty()) {
                Text("Label")
            }
            innerTextField()  //<-- Add this
        }
    },
)

Jetpack 中的 DecorationBox Compose BasicTextField

DecorationBox in Jetpack Compose BasicTextField

kotlin

android-jetpack-compose

android-jetpack-compose-text