Jetpack Compose BasicTextField 中的装饰框

Question

我使用 jetpack compose 创建了一个 editText，我想显示一个类似于“android:hint”之前的提示， 所以我尝试使用装饰框，但是在我创建它之后，输入没有显示，日志可以显示我的输入内容。 这是我的代码，

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