Jetpack Compose TextField光标被占位符遮挡？如何置光标于上层？

这不是Jetpack Compose的Bug，是因为默认情况下TextField的占位符绘制层级高于光标，当你给占位符文本设置fillMaxWidth并居中后，光标就会被遮挡。

最简单的解决方式是给占位符的Text添加Modifier.zIndex(-1f)，降低它的Z轴层级，让光标显示在上方：

@Composable
fun TextFieldWithPlaceholder() {
    val text = rememberSaveable {
        mutableStateOf("")
    }
    Box(modifier = Modifier
        .fillMaxSize()
        .background(MaterialTheme.colors.background)) {

        TextField(
            modifier = Modifier
                .background(Color.Blue)
                .size(width = 300.dp, height = 50.dp),
            value = text.value,
            onValueChange = { value ->
                text.value = value
            },
            singleLine = true,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                focusedLabelColor = Color.Transparent,
                unfocusedLabelColor = Color.Transparent,
                placeholderColor = Color.Red,
                cursorColor = Color.White
            ),
            placeholder = {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .zIndex(-1f), // 关键修改：降低占位符层级
                    textAlign = TextAlign.Center,
                    text = "Placeholder"
                )
            },
            textStyle = MaterialTheme.typography.body2.copy(textAlign = TextAlign.Center)
        )
    }
}

另外，也可以通过自定义TextField的布局逻辑调整绘制顺序，但zIndex的方式最简洁高效，完全能解决你的问题。

内容的提问来源于stack exchange，提问作者Bojan Antić