Jetpack Compose：多行BasicTextField物理键盘上下键焦点控制优化探讨

在Column中放置多个多行BasicTextField时，在Android Studio模拟器使用物理键盘按下上下箭头键，焦点会直接切换到另一个文本框，而不是在当前文本框内换行移动。需求是仅当光标位于文本框首行或末行时，按下上下箭头才触发焦点切换。

已实现了一套解决方案，想知道有没有更简便的实现方式；同时如果要支持「箭头键+修饰键」组合来切换焦点，该如何判断按键操作是否触发焦点变更？

现有实现代码 #

MainActivity 代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column {
                repeat(5) {
                    BasicTextFieldWithText()
                }
            }
        }
    }
}

自定义BasicTextField 代码 #

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun BasicTextFieldWithText() {
    var text by remember {
        mutableStateOf(
            TextFieldValue("BasicTextField\n" + "with multiple lines\n" + "of text")
        )
    }

    var textLayout by remember {
        mutableStateOf<TextLayoutResult?>(null)
    }

    val atFirstLine by remember {
        derivedStateOf {
            textLayout?.let {
                val range = text.selection
                range.collapsed && it.getLineForOffset(range.end) == 0
            } ?: false
        }
    }

    val atLastLine by remember {
        derivedStateOf {
            textLayout?.let {
                val range = text.selection
                range.collapsed && it.getLineForOffset(range.end) == (it.lineCount - 1)
            } ?: false
        }
    }

    BasicTextField(
        value = text,
        onValueChange = { text = it },
        onTextLayout = { textLayout = it },
        modifier = Modifier
            .border(1.dp, Color.Blue)
            .padding(8.dp)
            .focusProperties {
                up = if (atFirstLine) FocusRequester.Default else FocusRequester.Cancel
                down = if (atLastLine) FocusRequester.Default else FocusRequester.Cancel
            }
    )
}

一、更简便的实现方式 #

你当前的核心思路没问题，可以通过逻辑复用和简化状态计算让代码更简洁：

1. 提取通用行判断逻辑 #

把重复的行判断逻辑抽成单独函数，避免代码冗余：

private fun isAtTargetLine(
    textLayout: TextLayoutResult?,
    textValue: TextFieldValue,
    targetLine: Int
): Boolean {
    return textLayout?.let {
        val selection = textValue.selection
        selection.collapsed && it.getLineForOffset(selection.end) == targetLine
    } ?: false
}

2. 简化Composable内的状态计算 #

去掉重复的derivedStateOf，直接调用通用函数：

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun BasicTextFieldWithText() {
    var text by remember {
        mutableStateOf(TextFieldValue("BasicTextField\nwith multiple lines\nof text"))
    }
    val textLayout by remember { mutableStateOf<TextLayoutResult?>(null) }

    val atFirstLine = isAtTargetLine(textLayout, text, 0)
    val atLastLine = textLayout?.let {
        isAtTargetLine(it, text, it.lineCount - 1)
    } ?: false

    BasicTextField(
        value = text,
        onValueChange = { text = it },
        onTextLayout = { textLayout = it },
        modifier = Modifier
            .border(1.dp, Color.Blue)
            .padding(8.dp)
            .focusProperties {
                up = if (atFirstLine) FocusRequester.Default else FocusRequester.Cancel
                down = if (atLastLine) FocusRequester.Default else FocusRequester.Cancel
            }
    )
}

3. 封装成Modifier扩展（复用性更强） #

如果有多个TextField需要该逻辑，可以封装成Modifier扩展：

@OptIn(ExperimentalComposeUiApi::class)
fun Modifier.lineBoundFocusNavigation(
    textLayout: TextLayoutResult?,
    textValue: TextFieldValue
) = this.focusProperties {
    textLayout?.let { layout ->
        val currentLine = layout.getLineForOffset(textValue.selection.end)
        val isFirstLine = textValue.selection.collapsed && currentLine == 0
        val isLastLine = textValue.selection.collapsed && currentLine == layout.lineCount - 1

        up = if (isFirstLine) FocusRequester.Default else FocusRequester.Cancel
        down = if (isLastLine) FocusRequester.Default else FocusRequester.Cancel
    } ?: run {
        up = FocusRequester.Cancel
        down = FocusRequester.Cancel
    }
}

使用时直接链式调用：

BasicTextField(
    // 其他参数
    modifier = Modifier
        .border(1.dp, Color.Blue)
        .padding(8.dp)
        .lineBoundFocusNavigation(textLayout, text)
)

二、支持「箭头键+修饰键」切换焦点 #

要实现修饰键（如Ctrl/Alt/Shift）+箭头键触发焦点切换，需要通过拦截键盘事件判断组合键：

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun BasicTextFieldWithText() {
    var text by remember {
        mutableStateOf(TextFieldValue("BasicTextField\nwith multiple lines\nof text"))
    }
    val textLayout by remember { mutableStateOf<TextLayoutResult?>(null) }
    val focusRequester = remember { FocusRequester() }

    BasicTextField(
        value = text,
        onValueChange = { text = it },
        onTextLayout = { textLayout = it },
        modifier = Modifier
            .border(1.dp, Color.Blue)
            .padding(8.dp)
            .focusRequester(focusRequester)
            .onKeyEvent { event ->
                // 判断是否是「Ctrl+上/下箭头」组合键
                if (event.type == KeyEventType.KeyDown && event.isCtrlPressed) {
                    return@onKeyEvent when (event.key) {
                        Key.Up -> {
                            focusRequester.moveFocus(FocusDirection.Up)
                            true // 消费事件，阻止文本框默认换行逻辑
                        }
                        Key.Down -> {
                            focusRequester.moveFocus(FocusDirection.Down)
                            true
                        }
                        else -> false
                    }
                }
                false // 非组合键，交给原有逻辑处理
            }
            .focusProperties {
                val currentLine = textLayout?.getLineForOffset(text.selection.end) ?: -1
                val isFirstLine = text.selection.collapsed && currentLine == 0
                val isLastLine = textLayout?.let {
                    text.selection.collapsed && currentLine == it.lineCount - 1
                } ?: false

                up = if (isFirstLine) FocusRequester.Default else FocusRequester.Cancel
                down = if (isLastLine) FocusRequester.Default else FocusRequester.Cancel
            }
    )
}

关键判断逻辑说明 #

• event.isCtrlPressed：判断Ctrl键是否按下，可替换为event.isAltPressed或event.isShiftPressed支持其他修饰键
• event.type == KeyEventType.KeyDown：只处理按键按下事件，避免重复触发
• 返回true表示消费该事件，阻止文本框内部的默认换行处理；返回false则沿用原有焦点逻辑

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