Jetpack Compose中BasicTextField无闪烁光标问题求助

你自定义的BasicTextField没显示光标，核心原因是在decorationBox里没有调用传入的innerTextField函数。BasicTextField的输入区域、光标、文本渲染逻辑都封装在这个lambda里，自定义装饰盒时必须手动调用它，否则这些核心交互元素不会被绘制。

修改后的完整代码 #

fun CustomSearchField(state: MutableState<TextFieldValue>) {
    val focusManager = LocalFocusManager.current
    val keyboardController = LocalSoftwareKeyboardController.current

    BasicTextField(
        value = state.value,
        onValueChange = { value ->
            state.value = value
        },
        singleLine = true,
        cursorBrush = SolidColor(Color.White),
        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
        keyboardActions = KeyboardActions(
            onDone = {
                keyboardController?.hide()
                focusManager.clearFocus()
            }
        ),
        // 统一设置输入文本的样式
        textStyle = poppinsRegular(14).copy(
            color = colorResource(
                if (state.value.text.isEmpty()) R.color.mainGray else R.color.primaryTextColor
            )
        ),
        decorationBox = { innerTextField ->
            Row(
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .padding(horizontal = 16.dp)
                    .fillMaxWidth()
                    .heightIn(48.dp)
                    .clip(RoundedCornerShape(8.dp))
                    .border(
                        BorderStroke(1.dp, colorResource(R.color.cardBorder)),
                        RoundedCornerShape(8.dp)
                    )
                    // 让整个搜索框区域可点击，确保能激活输入框
                    .clickable { focusManager.moveFocus(FocusDirection.Next) }
            ) {
                Image(
                    painter = painterResource(id = R.drawable.ic_search_icon),
                    contentDescription = "搜索图标",
                    contentScale = ContentScale.Crop,
                    colorFilter = ColorFilter.tint(colorResource(if (state.value.text.isEmpty()) R.color.mainGray else R.color.primaryTextColor)),
                    modifier = Modifier
                        .padding(start = 16.dp)
                        .size(24.dp)
                )

                // 核心：调用innerTextField渲染输入区域与光标
                Box(
                    modifier = Modifier
                        .weight(1f)
                        .padding(vertical = 12.dp)
                ) {
                    innerTextField()
                    // 输入为空时显示占位文本
                    if (state.value.text.isEmpty()) {
                        Text(
                            text = "Search",
                            style = poppinsRegular(14),
                            color = colorResource(R.color.mainGray)
                        )
                    }
                }

                if (state.value.text.isNotEmpty()) {
                    IconButton(
                        onClick = {
                            state.value = TextFieldValue("")
                        }
                    ) {
                        Image(
                            painter = painterResource(id = R.drawable.clear_icon),
                            contentDescription = "清除输入",
                            contentScale = ContentScale.Crop,
                            colorFilter = ColorFilter.tint(colorResource(R.color.primaryTextColor)),
                            modifier = Modifier
                                .size(24.dp)
                                .padding(2.dp)
                        )
                    }
                }
            }
        }
    )
}

关键修改说明 #

• 强制调用innerTextField()：这是BasicTextField渲染光标、输入区域的核心入口，自定义装饰盒时绝对不能省略。
• 移除手动Text渲染：原来的手动判断显示Text的逻辑会覆盖输入区域，改用textStyle统一控制输入文本样式，让innerTextField负责文本渲染。
• 添加占位文本逻辑：通过Box嵌套，在输入为空时显示占位提示，不干扰输入区域的正常交互。
• 增加点击激活逻辑：给整个Row添加clickable修饰符，确保点击搜索框任意位置都能激活输入框、弹出光标。

内容的提问来源于stack exchange，提问作者Oscar Berggren