kotlin - Jetpack 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

您必须添加 innerTextField 由 decorationBox 提供.
就像是:

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