在撰写 OutlinedTextField 中单击之前，占位符文本不会显示

Question

我有以下可组合的 OutlinedTextField

@Composable
fun EmailEntry(
    shouldShowLabel: Boolean = false,
    onEmailEntered: (emailText: String) -> Unit) {

    var emailText by rememberSaveable {
        mutableStateOf("")
    }

    OutlinedTextField(
        modifier = Modifier.fillMaxWidth(),
        singleLine = true,
        value = emailText,
        label = {
            if(shouldShowLabel) {
                Text(text = "Email")
            }
        },
        placeholder = {
            Text(text = "Email Address")
        },
        onValueChange = { newText ->
            emailText = newText
            onEmailEntered(emailText)
        },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email)
    )
}

但是，在用户单击文本字段之前，占位符文本不会显示。我想要显示占位符，然后在用户开始输入时消失。

Answer 1

您不能同时使用label和placeholder来达到您的期望。而是使用 aColumn来包装，并在其中使用Text上面的另一个OutlinedTextField作为label。这是示例：

@Composable
fun EmailEntry() {
    var emailText by remember { mutableStateOf("") }
    Column() {
        Text(text = "Email")
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            singleLine = true,
            value = emailText,
            placeholder = {
                Text(text = "Email Address")
            },
            onValueChange = { newText ->
                emailText = newText
            },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email)
        )
    }

}