Android Jetpack Compose实现光标移出可视区域时自动滚动屏幕

问题背景 #

在传统Android视图系统里，ScrollView内的EditText光标移出可视区域时，系统会自动滚动屏幕保持光标可见。但Jetpack Compose中，LazyColumn内的BasicTextField默认不支持该行为，光标移出后列表不会自动滚动。

传统EditText效果：输入时光标移出可视区域，屏幕自动跟随滚动
Compose BasicTextField当前效果：输入时光标移出可视区域，列表无自动滚动

复现代码 #

Composable代码 #

@Composable
fun TestScreen() {
    val scaffoldState = rememberScaffoldState()
    var content by remember { mutableStateOf("") }

    Scaffold(
        scaffoldState = scaffoldState,
        floatingActionButtonPosition = FabPosition.Center,
    ) {
        val lazyListState = rememberLazyListState()

        LazyColumn(
            state = lazyListState,
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 15.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            item {
                BasicTextField(
                    value = content,
                    onValueChange = { content = it },
                    modifier = Modifier
                        .background(color = Color.Green)
                        .fillMaxWidth()
                        .wrapContentHeight()
                )
            }
        }
    }
}

AndroidManifest.xml配置 #

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.example.android.test">

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/Theme.Test">
        <activity
                android:name=".MainActivity"
                android:exported="true"
                android:label="@string/app_name"
                android:theme="@style/Theme.Test"
                android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

实现方案 #

可以通过两种方式实现该功能，根据场景选择：

方案一：LazyColumn手动监听滚动（适合多列表项场景） #

通过监听BasicTextField的光标位置和布局信息，主动触发LazyColumn滚动，确保光标可见：

@Composable
fun TestScreen() {
    val scaffoldState = rememberScaffoldState()
    var textFieldValue by remember { mutableStateOf(TextFieldValue("")) }
    val lazyListState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()
    val textFieldBounds = remember { mutableStateOf(Rect.Zero) }
    val screenHeight = Resources.getSystem().displayMetrics.heightPixels

    Scaffold(
        scaffoldState = scaffoldState,
        floatingActionButtonPosition = FabPosition.Center,
    ) { padding ->
        LazyColumn(
            state = lazyListState,
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                .padding(horizontal = 15.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            item {
                BasicTextField(
                    value = textFieldValue,
                    onValueChange = { textFieldValue = it },
                    onTextLayout = { textLayoutResult ->
                        val selection = textFieldValue.selection
                        if (selection.start == selection.end) {
                            // 获取光标所在行的底部坐标
                            val cursorLine = textLayoutResult.getLineForOffset(selection.start)
                            val cursorBottom = textLayoutResult.getLineBottom(cursorLine)
                            // 软键盘预留高度，可根据实际调整
                            val keyboardOffset = 200
                            
                            // 判断光标是否超出可视区域底部
                            if (cursorBottom + textFieldBounds.value.top > screenHeight - keyboardOffset) {
                                val scrollOffset = (cursorBottom - (screenHeight - textFieldBounds.value.top - keyboardOffset)).toInt()
                                coroutineScope.launch {
                                    lazyListState.animateScrollToItem(index = 0, offset = scrollOffset)
                                }
                            }
                        }
                    },
                    modifier = Modifier
                        .background(color = Color.Green)
                        .fillMaxWidth()
                        .wrapContentHeight()
                        .onGloballyPositioned { coordinates ->
                            textFieldBounds.value = coordinates.boundsInWindow()
                        }
                )
            }
        }
    }
}

方案二：使用Column+verticalScroll（适合少列表项场景） #

如果列表项不多，直接用Column配合verticalScroll替代LazyColumn，BasicTextField会自动处理光标滚动，无需额外逻辑：

@Composable
fun TestScreen() {
    val scaffoldState = rememberScaffoldState()
    var content by remember { mutableStateOf("") }
    val scrollState = rememberScrollState()

    Scaffold(
        scaffoldState = scaffoldState,
        floatingActionButtonPosition = FabPosition.Center,
    ) { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                .padding(horizontal = 15.dp)
                .verticalScroll(scrollState),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            BasicTextField(
                value = content,
                onValueChange = { content = it },
                modifier = Modifier
                    .background(color = Color.Green)
                    .fillMaxWidth()
                    .wrapContentHeight()
            )
        }
    }
}

方案说明 #

• 方案一：适配LazyColumn的分页加载特性，适合列表项较多的场景，需手动处理光标位置和滚动逻辑，注意软键盘高度的适配。
• 方案二：实现简单，适合列表项较少的场景，利用Compose内置的滚动处理机制自动跟随光标。

内容的提问来源于stack exchange，提问作者박찬준