kotlin 如何在jetpack composer中将光标从一个文本域传递到另一个文本域?

pftdvrlh  于 2023-02-05  发布在  Kotlin
关注(0)|答案(2)|浏览(154)

我有两个文本字段,用户将输入他们的体重和目标体重。当用户点击目标体重时,会出现一个选择器,用户从那里选择他的体重。如果用户选择他的体重并按下OK按钮,我希望它自动切换到目标体重文本字段。
"倾听是我的准则"
我正在分享示例文本字段

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))
                  }
                }
            }
        }

如果用户点击文本框viewModel.isUserClickTxtField.valuetrue和picker弹出用户。如果用户点击Okey按钮在picker这意味着用户选择了他的重量在picker。我想切换其他文本框自动我该怎么做呢?

dfty9e19

dfty9e191#

可以使用@bylazy提供的the solution,也可以使用focusProperties修饰符为屏幕中的每个TextField或可组合项指定下一项/上一项
然后简单地使用**focusManager.moveFocus**方法移动焦点:

focusManager.moveFocus(FocusDirection.Next)

比如:

val (item1, item2) = remember { FocusRequester.createRefs() }
    val focusManager = LocalFocusManager.current

    TextField(
        value = text,
        onValueChange = {text = it},
        Modifier
            .focusRequester(item1)
            .focusProperties {
                next = item2
                right = item2
            }
    )

    Button(
        onClick = { focusManager.moveFocus(FocusDirection.Next) }
    ) { Text("OK") }

    TextField(
        value = text,
        onValueChange = {text = it},
        Modifier
            .focusRequester(item2)
    )

在第一个TextField中,您还可以添加keyboardActions属性以移动焦点,单击字段中的"完成"。

TextField(
        value = text,
        onValueChange = {text = it},
        Modifier
            .focusRequester(item1)
            .focusProperties {
                next = item2
                right = item2
            },
        keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
        keyboardActions = KeyboardActions(
            onDone = { focusManager.moveFocus(FocusDirection.Next) }
        )
    )
bjp0bcyl

bjp0bcyl2#

创建并记住FocusRequester:

val focusRequester = remember { FocusRequester() }

使用修饰符将此FocusRequester添加到目标TextField:

modifier = Modifier.focusRequester(focusRequester)

使用此代码请求焦点(光标):

focusRequester.requestFocus()

相关问题