Jetpack Compose设置密码页面首个OutlinedTextField焦点设置问题求助

问题根源 #

你当前的核心问题是两个输入框共用了同一个FocusRequester实例。当Compose完成组件组合时，最后一个绑定该请求器的输入框会优先响应焦点请求，导致最终是第二个输入框获焦。同时，LaunchedEffect(key1 = true)的触发逻辑没有和第一个输入框的组合状态绑定，也会干扰焦点的正确分配。

解决方案 #

为每个输入框创建独立的FocusRequester，并确保焦点请求仅在屏幕首次组合时触发：

1. 父组件代码修改

// 为两个输入框分别创建独立的FocusRequester，用remember确保实例稳定
val firstPasswordFocusRequester = remember { FocusRequester() }
val confirmPasswordFocusRequester = remember { FocusRequester() }

Column(modifier = Modifier.fillMaxWidth()) {
    PasswordInputField(
        content = stringResource(id = R.string.new_password),
        textState = formPasswordState,
        focusRequester = firstPasswordFocusRequester, // 绑定第一个输入框的专属请求器
        imeAction = ImeAction.Next,
        initialFocus = true,
        onFocusChanged = {
            viewModel.validatePasswordScreen(formPasswordState.value)
            showSheet = false
        }, 
        focusManager = focusManager, 
        onValueChanged = { showSheet = it }
    )

    // 仅在屏幕首次组合时，请求第一个输入框的焦点
    LaunchedEffect(Unit) {
        firstPasswordFocusRequester.requestFocus()
    }

    PasswordInputField(
        content = stringResource(id = R.string.confirm_password),
        textState = formConfirmPasswordState,
        focusRequester = confirmPasswordFocusRequester, // 绑定第二个输入框的专属请求器
        imeAction = ImeAction.Done,
        initialFocus = false,
        onFocusChanged = {
            viewModel.validateConfirmPassword(formPasswordState.value)
            showSheet = false
        }, 
        focusManager = focusManager, 
        onValueChanged = { showSheet = it }
    )
}

2. 通用输入框组件保持（确保参数传递正确）

@Composable
fun PasswordInputField(
    content: String,
    textState: TextFieldState,
    focusRequester: FocusRequester,
    imeAction: ImeAction,
    initialFocus: Boolean,
    onFocusChanged: () -> Unit,
    focusManager: FocusManager,
    onValueChanged: (Boolean) -> Unit
) {
    OutlinedTextField(
        value = textState.value,
        onValueChange = { textState.value = it },
        label = { Text(content) },
        imeAction = imeAction,
        keyboardOptions = KeyboardOptions(imeAction = imeAction),
        // 配置输入法按钮的焦点跳转逻辑
        keyboardActions = KeyboardActions(
            onNext = { focusManager.moveFocus(FocusDirection.Down) },
            onDone = { focusManager.clearFocus() }
        ),
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 20.dp, end = 20.dp, top = 10.dp)
            .onFocusChanged { focusState ->
                textState.onFocusChange(focusState.isFocused)
                if (focusState.isFocused) {
                    onValueChanged(false)
                }
                // 仅在焦点状态变化时触发回调
                if (focusState.isFocused != focusState.wasFocused) {
                    onFocusChanged()
                }
            }
            .focusRequester(focusRequester),
        // 其他自定义属性（如密码可见性切换等）保持不变
    )
}

额外注意事项 #

• 必须用remember包裹FocusRequester的创建，避免重组时生成新实例导致焦点请求失效
• LaunchedEffect(Unit)确保焦点请求仅在屏幕首次加载时执行一次，不会因重组重复触发
• 通过keyboardActions配置输入法的Next/Done按钮行为，可实现输入框间的焦点无缝跳转

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