Android jetpack compose：在文本字段中导航

Question

我实现了一个包含很多 TextField 的屏幕，并将脚手架用作根层。 因为我希望我的屏幕是 rtl，所以我使用了 Composition Local provider()。

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl ) {}

我的 TextFields 在屏幕上是这样的：

文学学士

直流

当我想浏览这些文本字段时：

keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
keyboardActions = KeyboardActions(
      onNext = { LocalFocusManager.current.moveFocus(FocusDirection.Next) }
)

我期望发生的事情：A -> B -> C -> D

发生了什么：B -> A -> D -> C

（我使用列作为父根，但文本字段将行作为父根两两（行在列中））

任何人都可以帮忙吗？ 谢谢。

Answer 1

您可以使用.focusOrder修饰符来实现这一点：

Column() {
    val (aFocus, bFocus, cFocus, dFocus) = remember { FocusRequester.createRefs() }


    Row {
        OutlinedTextField(
            value = "A",
            onValueChange = {},
            modifier = Modifier
                .weight(1f)
                .focusOrder(aFocus) { next = bFocus },
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
        )
        OutlinedTextField(
            value = "B",
            onValueChange = {},
            modifier = Modifier
                .weight(1f)
                .focusOrder(bFocus) { next = cFocus },
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next)
        )
    }

    Row {
        OutlinedTextField(
            value = "C",
            onValueChange = {},
            modifier = Modifier
                .weight(1f)
                .focusOrder(cFocus) { next = dFocus },
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next)
        )
        OutlinedTextField(
            value = "D",
            onValueChange = {},
            modifier = Modifier
                .weight(1f)
                .focusOrder(dFocus) { },
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next)
        )
    }
}