Jetpack Compose：键盘弹出时如何让整个卡片滚动可见？

问题背景 #

已在Manifest中配置android:windowSoftInputMode="adjustResize"，使用Compose的LazyColumn展示多个包含两个BasicTextField的EditableCard。期望键盘弹出时整个卡片完整可见，但实际仅输入框会上移，卡片其余部分仍被键盘遮挡。尝试过imePadding、imeNestedScrolling、consumeWindowInsets(WindowInsets.ime)均无效果。

核心原因 #

Compose默认的焦点滚动逻辑仅保证当前获得焦点的输入框处于可视区域内，不会自动处理父容器（此处为Card）的完整可见需求。要实现整个卡片可见，需要自定义滚动逻辑，监听IME状态并计算目标滚动位置。

解决方案 #

1. 为EditableCard添加布局位置追踪，获取其在LazyColumn中的全局坐标
2. 监听IME的显示/隐藏状态，结合LazyListState计算需要滚动的偏移量
3. 触发LazyColumn滚动，确保卡片底部不被IME遮挡

修改后的完整代码 #

import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.boundsInWindow
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardOptions
import androidx.compose.ui.unit.dp
import androidx.window.layout.WindowInsets
import androidx.window.layout.WindowInsetsCompat

private const val ItemCount = 20

@Composable
fun Screen(modifier: Modifier = Modifier) {
    val lazyListState = rememberLazyListState()
    val density = LocalDensity.current
    // 存储每个卡片的布局信息：index -> 卡片在窗口中的边界
    val cardBounds = remember { mutableStateMapOf<Int, Rect>() }
    // 获取IME的高度
    val imeInsets = WindowInsets.ime.getBottom(density)
    val isImeVisible by remember { derivedStateOf { imeInsets > 0.dp } }

    // 监听IME显示，触发滚动调整
    LaunchedEffect(isImeVisible, lazyListState.focusedItemIndex) {
        if (isImeVisible) {
            val focusedIndex = lazyListState.focusedItemIndex ?: return@LaunchedEffect
            val cardRect = cardBounds[focusedIndex] ?: return@LaunchedEffect
            val viewHeight = LocalView.current.height
            val visibleBottom = viewHeight - imeInsets.toPx()
            
            // 计算卡片底部是否超出可视区域
            if (cardRect.bottom > visibleBottom) {
                // 计算需要滚动的偏移量，让卡片底部刚好在IME上方
                val scrollOffset = cardRect.bottom - visibleBottom
                lazyListState.scrollBy(scrollOffset)
            }
        }
    }

    LazyColumn(
        modifier = modifier.fillMaxSize(),
        state = lazyListState
    ) {
        items(ItemCount) { index ->
            EditableCard(
                index = index,
                modifier = Modifier.onGloballyPositioned {
                    cardBounds[index] = it.boundsInWindow()
                }
            )
        }
    }
}

@Composable
fun EditableCard(index: Int, modifier: Modifier = Modifier) {
    ElevatedCard(
        modifier = modifier.padding(16.dp),
        colors = CardDefaults.elevatedCardColors(containerColor = Color.hsv(360f * index / ItemCount, 0.5f, 1f))
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth() // 替换fillMaxSize，避免Card超出父容器
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("$index")
            Spacer(
                modifier = Modifier
                    .height(20.dp)
                    .fillMaxWidth()
                    .background(Color.hsv(360f * index / ItemCount, 1f, 0.5f))
            )
            var text1 by remember { mutableStateOf(String.format("%02X", index)) }
            BasicTextField(
                value = text1,
                onValueChange = { text1 = it },
                keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
                modifier = Modifier
                    .background(color = Color.LightGray)
                    .border(Dp.Hairline, Color.DarkGray)
                    .padding(8.dp)
            )
            Spacer(
                modifier = Modifier
                    .height(20.dp)
                    .fillMaxWidth()
                    .background(Color.hsv(((360f * (index + 8)) / ItemCount) % 360f, 1f, 0.5f))
            )
            var text2 by remember { mutableStateOf(index.toString(2).padStart(8, '0')) }
            BasicTextField(
                value = text2,
                onValueChange = { text2 = it },
                keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
                modifier = Modifier
                    .background(color = Color.LightGray)
                    .border(Dp.Hairline, Color.DarkGray)
                    .padding(8.dp)
            )
            Spacer(
                modifier = Modifier
                    .height(20.dp)
                    .fillMaxWidth()
                    .background(Color.hsv(((360f * (index + 16)) / ItemCount) % 360f, 1f, 0.5f))
            )
        }
    }
}

关键修改点说明 #

• 卡片布局追踪：通过onGloballyPositioned获取每个卡片在窗口中的边界，存储到cardBounds中
• IME状态监听：用derivedStateOf判断IME是否可见，结合LazyListState的focusedItemIndex定位当前焦点所在的卡片
• 滚动计算：对比卡片底部与可视区域底部（窗口高度减去IME高度），若卡片被遮挡则计算偏移量并触发滚动
• 布局修正：将EditableCard内Column的fillMaxSize改为fillMaxWidth，避免卡片高度超出LazyColumn的可视范围

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