Compose TextField获焦时软键盘在不同类型间闪烁问题排查求助

我之前也碰到过一模一样的键盘闪烁问题，大概率是不必要的Compose重组导致TextField反复触发键盘初始化，咱们从代码里的几个关键点来排查修复：

一、核心问题分析 #

当你设置KeyboardType.NumberPassword后，系统需要加载对应的数字密码键盘，但如果TextField因为重组频繁销毁重建，系统就会在标准键盘和数字键盘之间反复切换，出现闪烁。你的代码里有几个容易触发重组的隐患点：

二、具体修复方案 #

1. 缓存不稳定的Style和Keyboard配置

你在PinInput里直接创建Typography.h1.copy(...)，每次重组都会生成新的TextStyle对象；KeyboardOptions和KeyboardActions也是每次重组都新建，这些都会触发子组件EditableInput的无意义重组。

修改PinInput，用remember缓存这些对象：

@Composable fun PinInput(focusManager: FocusManager) {
    // 缓存TextStyle，避免每次重组新建
    val pinTextStyle = remember {
        Typography.h1.copy(
            textAlign = TextAlign.Center,
            fontSize = Dimens.TextSizeGiant
        )
    }
    // 缓存KeyboardOptions和KeyboardActions
    val keyboardOptions = remember {
        KeyboardOptions(
            keyboardType = KeyboardType.NumberPassword,
            imeAction = ImeAction.Next
        )
    }
    val keyboardActions = remember {
        KeyboardActions(onNext = { focusManager.moveFocus(Right) })
    }

    Card(
        modifier = Modifier.size(60.dp, 80.dp),
        elevation = 0.dp,
        backgroundColor = ColorSurface,
        border = BorderStroke(2.dp, ColorLightBorder)
    ) {
        EditableInput(
            textStyle = pinTextStyle,
            onTextChange = { value ->
                if (value.isNotEmpty()) focusManager.moveFocus(Right)
                else focusManager.moveFocus(Left)
            },
            maxLength = 1,
            keyboardOptions = keyboardOptions,
            keyboardActions = keyboardActions
        )
    }
}

2. 确保EditableInputState的稳定性

如果你的PinInput是在循环中创建多个（比如4位PIN码输入框），要保证每个输入框的EditableInputState不会因为重组被意外重置。修改rememberEditableInputState，增加唯一key参数，确保每个输入框的状态独立且稳定：

@Composable fun rememberEditableInputState(
    key: String, // 新增唯一标识key
    hint: String = ""
): EditableInputState = rememberSaveable(key, hint, saver = EditableInputState.SAVER) {
    EditableInputState(hint, hint)
}

// 调用时（假设是循环创建PIN输入框）：
for (index in 0..3) {
    PinInput(
        focusManager = focusManager,
        key = "pin-input-$index" // 传入唯一key
    )
}

3. 优化Focus移动的触发逻辑

onTextChange里直接调用focusManager.moveFocus可能会触发父组件的重组，进而导致PinInput重新组合。可以用LaunchedEffect来异步处理焦点移动，避免同步触发重组：

修改EditableInput的onValueChange：

onValueChange = { value ->
    if (maxLength == NO_VALUE || (maxLength != NO_VALUE && value.length <= maxLength)) {
        state.text = value
        // 用LaunchedEffect异步处理焦点移动，避免同步重组
        LaunchedEffect(value) {
            onTextChange(value)
        }
    }
}

三、验证修复效果 #

做完以上修改后，你可以通过Compose的重组日志（开启方法：在build.gradle中添加debugImplementation "androidx.compose.ui:ui-tooling:1.5.4"，然后在Layout Inspector里查看重组次数）确认PinInput和EditableInput的重组次数大幅减少，此时键盘应该不会再出现闪烁现象。

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