Android Compose文本输入焦点与滚动适配问题求助

核心问题 #

• 如何确保用户正在输入的区域始终显示在屏幕上？这是支持滚动布局的常见基础需求。
• （可选）输入时能否在区域底部添加内边距，避免光标紧贴软键盘，让用户能看到卡片底部内容？

最小复现代码 #

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

object StackAndroidTextEntryFocusWithLists {
    @Composable
    fun StackAndroidTextEntryFocusWithListsDisplay() {
        MainScaffold() {
            EditContent()
        }
    }

    @Composable
    private fun MainScaffold(content : @Composable () -> Unit) {
        Scaffold {
            Box( Modifier.padding(it) ) {
                content()
            }
        }
    }

    @Composable
    private fun EditContent() {
        Column(
            Modifier
                .fillMaxWidth()
                .padding(16.dp)
                .border(2.dp, Color.Magenta) // highlights bounds
        ) {
            TenEditItems()
        }
    }

    @Composable
    private fun TenEditItems() {
        val intList = (0 .. 10).toList()
        AsLazyColumnWithBottomItem(intList)
    }

    @Composable
    private fun AsLazyColumnWithBottomItem(intList: List<Int>) {
        LazyColumn {
            items(intList) {
                EditItemCard()
                Spacer(Modifier.padding(8.dp))
            }
            item {
                Spacer(
                    // Spacing at bottom of list allows user to scroll below text entry if on last item
                    // NOTE: This behaves strangely as clicking on the text entry area again can reduce the spacing
                    Modifier
                        .imePadding()
                )
            }
        }
    }

    @Composable
    private fun EditItemCard() {
        var text by remember { mutableStateOf("")}
        OutlinedCard {
            Column(
                Modifier
                    .padding(8.dp)
            ) {
                Text("If the user enters any data, the data entry carat must be on screen\n" +
                        "The list needs to jump if not focused on the right card")
                TextField(
                    modifier = Modifier.fillMaxWidth(),
                    value = text,
                    onValueChange = { text = it }
                )
                // Currently, these lines below are not visible. The keyboard appears just above them
                // on the last item in the list
                Text("These lines MUST always be visible when editing this card\n" +
                        "Test by scrolling to last card in the list")
            }
        }
    }
}

已尝试方案 #

• 手动使用scrollState滚动至正在编辑的卡片：能定位到卡片，但无法识别光标位置，仍无法保证输入文本可见。
• 限制文本框尺寸：不符合需求，希望文本框能动态增长。
• 在多个位置使用imePadding：未解决核心问题，还引发了内边距异常。

额外关注点 #

1. imePadding Spacer异常行为：首次点击编辑区域（滚动至最底部）时，额外内边距较大；再次点击编辑框时，内边距缩小至约四分之一。相关日志：
   首次点击：

   ImeTracker : onRequestShow at ORIGIN_CLIENT reason SHOW_SOFT_INPUT_BY_INSETS_API fromUser false
   ImeTracker : onRequestShow at ORIGIN_CLIENT reason SHOW_SOFT_INPUT fromUser false
   ImeTracker : onShown
   

   第二次点击：

   ImeTracker : onRequestShow at ORIGIN_CLIENT reason SHOW_SOFT_INPUT_BY_INSETS_API fromUser false
   ImeTracker : onCancelled at PHASE_CLIENT_APPLY_ANIMATION
   ImeTracker : onRequestShow at ORIGIN_CLIENT reason SHOW_SOFT_INPUT fromUser false
   ImeTracker : onCancelled at PHASE_CLIENT_APPLY_ANIMATION
   

2. 外部场景复现：在StackOverflow发布问题时，内容过长，滚动到底部输入字符，页面尝试跳至输入区域但失败，显示问题顶部。

解决方案 #

1. 确保输入区域始终可见 #

问题根源在于Insets配置错误和LazyColumn未正确关联焦点滚动。修改步骤：

• 配置Scaffold的Insets：让Scaffold自动处理系统栏和软键盘的Insets，确保布局能响应键盘弹出调整。
• 移除重复的imePadding：删除LazyColumn末尾的imePadding Spacer，避免重复计算Insets。
• 焦点触发滚动：给TextField添加焦点监听，获得焦点时让LazyColumn滚动到对应item，确保输入区域可见。

修改后的关键代码：

// 修改MainScaffold，配置contentWindowInsets
@Composable
private fun MainScaffold(content : @Composable () -> Unit) {
    Scaffold(
        contentWindowInsets = WindowInsets.systemBars.union(WindowInsets.ime)
    ) { innerPadding ->
        Box( Modifier.padding(innerPadding) ) {
            content()
        }
    }
}

// 修改AsLazyColumnWithBottomItem，使用LazyListState并移除异常Spacer
@Composable
private fun AsLazyColumnWithBottomItem(intList: List<Int>) {
    val lazyListState = rememberLazyListState()
    LazyColumn(
        modifier = Modifier.fillMaxWidth(),
        state = lazyListState
    ) {
        items(intList, key = { it }) { index ->
            EditItemCard(index = index, listState = lazyListState)
            Spacer(Modifier.padding(8.dp))
        }
        item {
            Spacer(Modifier.padding(16.dp)) // 替换为固定间距
        }
    }
}

// 修改EditItemCard，添加焦点监听和滚动逻辑
@Composable
private fun EditItemCard(index: Int, listState: LazyListState) {
    var text by remember { mutableStateOf("")}
    val isFocused = remember { mutableStateOf(false) }
    val coroutineScope = rememberCoroutineScope()

    OutlinedCard {
        Column(
            Modifier
                .padding(8.dp)
        ) {
            Text("If the user enters any data, the data entry carat must be on screen\n" +
                    "The list needs to jump if not focused on the right card")
            TextField(
                modifier = Modifier
                    .fillMaxWidth()
                    .onFocusChanged {
                        isFocused.value = it.isFocused
                        if (it.isFocused) {
                            coroutineScope.launch {
                                listState.scrollToItem(index)
                            }
                        }
                    },
                value = text,
                onValueChange = { text = it }
            )
            Text("These lines MUST always be visible when editing this card\n" +
                    "Test by scrolling to last card in the list")
        }
    }
}

2. 输入区域底部添加内边距避免紧贴键盘 #

通过LocalWindowInsets获取软键盘高度，在TextField获得焦点时为卡片底部添加动态padding：

@Composable
private fun EditItemCard(index: Int, listState: LazyListState) {
    var text by remember { mutableStateOf("")}
    val isFocused = remember { mutableStateOf(false) }
    val coroutineScope = rememberCoroutineScope()
    val imeInsets = LocalWindowInsets.current.ime
    val density = LocalDensity.current

    OutlinedCard {
        Column(
            Modifier
                .padding(8.dp)
                .padding(
                    bottom = if (isFocused.value) {
                        with(density) { imeInsets.getBottom(density).toDp() }
                    } else {
                        0.dp
                    }
                )
        ) {
            // 原有内容不变
        }
    }
}

解决imePadding异常问题 #

移除LazyColumn末尾的imePadding Spacer后，重复Insets计算的问题就会消失，内边距的异常行为也不再出现。

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