Jetpack Compose中如何实现TextField间光标自动切换？

我有两个TextField，分别用于用户输入当前体重和目标体重。当用户点击当前体重TextField时，会弹出选择器，用户从中选择体重后点击OK按钮，希望自动将光标切换到目标体重TextField。以下是我的代码示例：

Column(modifier = Modifier.fillMaxWidth()) {

        TextField(
            value = viewModel.defaultWeightValue.value ,
            modifier = Modifier
                .fillMaxWidth()
                .padding(5.dp),
            onValueChange = { viewModel.currentWeight.value = it },
            label = { Text(text = "current weight (kg)") },
            shape = RoundedCornerShape(5.dp),
            colors = TextFieldDefaults.textFieldColors(
                textColor = Grey2,
                disabledTextColor = Color.Transparent,
                backgroundColor = Grey3,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent,
            ),
            interactionSource = remember { MutableInteractionSource() }
                .also { interactionSource -> {
                    LaunchedEffect(interactionSource) {
                        interactionSource.interactions.collect {
                            if (it is PressInteraction.Press) {
                                // works like onClick
                                viewModel.isUserClickTxtField.value = true
                            }
                        }
                    }
                }
        )
        TextField(
            value = viewModel.targetWeight.value,
            modifier = Modifier
                .fillMaxWidth()
                .padding(5.dp),
            onValueChange = { viewModel.targetWeight.value = it },
            label = { Text(text = "target weight (kg)") },
            shape = RoundedCornerShape(5.dp),
            colors = TextFieldDefaults.textFieldColors(
                textColor = Grey2,
                disabledTextColor = Color.Transparent,
                backgroundColor = Grey3,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent,
                focusedLabelColor = DefaultDYTColor
            )
        )
    }
    DYTLoginAndContinueButton(
        text = "continue",
        navController,
        Screen.SignUpFourthScreen.route
    )
}



 if (viewModel.isUserClickTxtField.value) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Bottom
            ) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color.Gray),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    InfiniteNumberPicker(
                        modifier = Modifier.width(60.dp),
                        list = viewModel.weight,
                        firstIndex = 0,
                        onSelect = {
                            viewModel.weightPickerState.value = it
                        }
                    )
                    Text(text = "kg")
                    InfiniteNumberPicker(
                        modifier = Modifier.width(60.dp),
                        list = viewModel.gram,
                        firstIndex = 0,
                        onSelect = {
                            viewModel.grPickerState.value = it
                        }
                    )
                    Text(text = "gram")
                }
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(IntrinsicSize.Min)
                        .background(Color.Gray)
                        .padding(start = 0.dp, top = 15.dp, end = 0.dp, bottom = 15.dp),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
                        text = "cancel",
                        fontSize = 16.sp,
                        fontWeight = FontWeight.Bold,
                        color = DefaultDYTColor,
                        modifier = Modifier
                            .padding(8.dp)
                            .clickable {
                                viewModel.isUserClickTxtField.value = false
                            })
                    Divider(
                        color = Color.White,
                        modifier = Modifier
                            .padding(8.dp)
                            .fillMaxHeight()  //fill the max height
                            .width(1.dp)
                    )
    
                  TextButton(onClick = {
                      viewModel.isUserClickTxtField.value = false
                      viewModel.defaultWeightValue.value = "${viewModel.weightPickerState.value}  ${viewModel.grPickerState.value}"
                  }) {
                      Text(
                          text = "Okey",
                          fontSize = 16.sp,
                          fontWeight = FontWeight.Bold,
                          color = DefaultDYTColor,
                          modifier = Modifier.padding(8.dp))
                  }
                }
            }
        }

在Jetpack Compose中，要实现自动切换TextField焦点的功能，核心是使用FocusRequester控制焦点转移，具体步骤如下：

1. 创建并保存FocusRequester实例：在布局作用域内用remember创建实例，绑定到目标体重TextField。
2. 关联实例与目标TextField：在目标TextField的modifier中添加focusRequester()绑定实例。
3. 在OK按钮点击时触发焦点请求：通过LaunchedEffect在协程环境中执行焦点请求，确保符合Compose生命周期。

修改后的完整代码：

// 新增：创建FocusRequester实例
val targetWeightFocusRequester = remember { FocusRequester() }

Column(modifier = Modifier.fillMaxWidth()) {

        TextField(
            value = viewModel.defaultWeightValue.value ,
            modifier = Modifier
                .fillMaxWidth()
                .padding(5.dp),
            onValueChange = { viewModel.currentWeight.value = it },
            label = { Text(text = "current weight (kg)") },
            shape = RoundedCornerShape(5.dp),
            colors = TextFieldDefaults.textFieldColors(
                textColor = Grey2,
                disabledTextColor = Color.Transparent,
                backgroundColor = Grey3,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent,
            ),
            interactionSource = remember { MutableInteractionSource() }
                .also { interactionSource -> 
                    LaunchedEffect(interactionSource) {
                        interactionSource.interactions.collect {
                            if (it is PressInteraction.Press) {
                                viewModel.isUserClickTxtField.value = true
                            }
                        }
                    }
                },
            // 可选：设置只读，避免手动输入（因为用选择器输入）
            readOnly = true
        )
        TextField(
            value = viewModel.targetWeight.value,
            modifier = Modifier
                .fillMaxWidth()
                .padding(5.dp)
                // 新增：绑定FocusRequester
                .focusRequester(targetWeightFocusRequester),
            onValueChange = { viewModel.targetWeight.value = it },
            label = { Text(text = "target weight (kg)") },
            shape = RoundedCornerShape(5.dp),
            colors = TextFieldDefaults.textFieldColors(
                textColor = Grey2,
                disabledTextColor = Color.Transparent,
                backgroundColor = Grey3,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent,
                focusedLabelColor = DefaultDYTColor
            )
        )
    }
    DYTLoginAndContinueButton(
        text = "continue",
        navController,
        Screen.SignUpFourthScreen.route
    )
}



 if (viewModel.isUserClickTxtField.value) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Bottom
            ) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color.Gray),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    InfiniteNumberPicker(
                        modifier = Modifier.width(60.dp),
                        list = viewModel.weight,
                        firstIndex = 0,
                        onSelect = {
                            viewModel.weightPickerState.value = it
                        }
                    )
                    Text(text = "kg")
                    InfiniteNumberPicker(
                        modifier = Modifier.width(60.dp),
                        list = viewModel.gram,
                        firstIndex = 0,
                        onSelect = {
                            viewModel.grPickerState.value = it
                        }
                    )
                    Text(text = "gram")
                }
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(IntrinsicSize.Min)
                        .background(Color.Gray)
                        .padding(start = 0.dp, top = 15.dp, end = 0.dp, bottom = 15.dp),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
                        text = "cancel",
                        fontSize = 16.sp,
                        fontWeight = FontWeight.Bold,
                        color = DefaultDYTColor,
                        modifier = Modifier
                            .padding(8.dp)
                            .clickable {
                                viewModel.isUserClickTxtField.value = false
                            })
                    Divider(
                        color = Color.White,
                        modifier = Modifier
                            .padding(8.dp)
                            .fillMaxHeight()
                            .width(1.dp)
                    )
    
                  TextButton(onClick = {
                      viewModel.isUserClickTxtField.value = false
                      viewModel.defaultWeightValue.value = "${viewModel.weightPickerState.value}  ${viewModel.grPickerState.value}"
                      // 新增：触发焦点转移
                      LaunchedEffect(Unit) {
                          targetWeightFocusRequester.requestFocus()
                      }
                  }) {
                      Text(
                          text = "Okey",
                          fontSize = 16.sp,
                          fontWeight = FontWeight.Bold,
                          color = DefaultDYTColor,
                          modifier = Modifier.padding(8.dp))
                  }
                }
            }
        }

说明 #

• FocusRequester是Compose控制焦点的核心类，用remember保存可避免重组时重复创建。
• 使用LaunchedEffect执行requestFocus()，是因为焦点请求需要在协程环境中完成，该API会自动绑定Compose节点生命周期，确保执行时机正确。
• 设置当前体重TextField为readOnly = true是优化项，避免用户手动输入，与选择器输入逻辑保持一致。

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