Jetpack Compose：点击LazyColumn项按钮后如何滚动适配软键盘与Popup

要实现点击TweetItem按钮后，LazyColumn自动滚动使被点击项底部与Popup及软键盘顶部对齐，可按以下步骤修改代码：

关键思路 #

1. 跟踪被点击的TweetItem索引
2. 测量Popup中输入框的高度
3. 获取软键盘的高度
4. 利用LazyListState计算并执行滚动，使被点击项底部刚好位于Popup和软键盘上方

修改后的完整代码 #

父组件代码 #

@Composable
fun TweetList(tweets: List<Tweet>) {
    var isDialogShown by remember { mutableStateOf(false) }
    var comment by remember { mutableStateOf("") }
    val focusRequester = remember { FocusRequester() }
    val lazyListState = rememberLazyListState()
    var clickedTweetIndex by remember { mutableStateOf(-1) }
    var popupInputHeight by remember { mutableStateOf(0.dp) }
    val keyboardController = LocalSoftwareKeyboardController.current

    // 监听软键盘高度变化
    val imeInsets = LocalWindowInsets.current.ime
    val keyboardHeight = remember { mutableStateOf(0.dp) }
    DisposableEffect(imeInsets) {
        val listener = WindowInsetsListener { insets ->
            keyboardHeight.value = insets.bottom.toDp()
        }
        imeInsets.addListener(listener)
        onDispose { imeInsets.removeListener(listener) }
    }

    // 触发滚动逻辑
    LaunchedEffect(isDialogShown, clickedTweetIndex, popupInputHeight, keyboardHeight.value) {
        if (isDialogShown && clickedTweetIndex != -1) {
            // 先滚动到目标项，确保其在可视范围内
            lazyListState.scrollToItem(clickedTweetIndex)
            // 等待滚动动画完成
            lazyListState.awaitScrollFinish()

            // 获取目标项的布局信息
            val targetItem = lazyListState.layoutInfo.visibleItemsInfo.firstOrNull { it.index == clickedTweetIndex }
            targetItem?.let { item ->
                val viewportBottom = lazyListState.layoutInfo.viewportEndOffset
                // 计算Popup+软键盘占据的总高度
                val totalBottomHeight = popupInputHeight.toPx() + keyboardHeight.value.toPx()
                // 目标项底部应处于的位置：视口底部减去Popup和软键盘高度
                val desiredBottomPosition = viewportBottom - totalBottomHeight

                // 计算需要滚动的距离
                val currentItemBottom = item.offset + item.size
                val scrollDelta = currentItemBottom - desiredBottomPosition

                // 仅当目标项被遮挡时执行滚动
                if (scrollDelta > 0) {
                    lazyListState.animateScrollBy(scrollDelta)
                }
            }
        }
    }

    LazyColumn(state = lazyListState) {
        itemsIndexed(tweets) { index, tweet ->
            TweetItem(
                tweet = tweet,
                onCommentClick = {
                    clickedTweetIndex = index
                    isDialogShown = true
                    // 请求焦点以弹出软键盘
                    focusRequester.requestFocus()
                }
            )
            Divider()
        }
    }

    if (isDialogShown) {
        Popup(
            onDismissRequest = {
                keyboardController?.hide()
                isDialogShown = false
                clickedTweetIndex = -1
            },
            properties = PopupProperties(
                focusable = true,
                dismissOnBackPress = true,
                dismissOnClickOutside = true
            )
        ) {
            Box(
                modifier = Modifier
                    .clickable(
                        onClick = { isDialogShown = false },
                        indication = null,
                        interactionSource = remember { MutableInteractionSource() }
                    )
                    .fillMaxSize()
                    .background(Color.Transparent),
                contentAlignment = Alignment.BottomCenter
            ) {
                OutlinedTextField(
                    value = comment,
                    onValueChange = { comment = it },
                    modifier = Modifier
                        .fillMaxWidth()
                        .focusRequester(focusRequester)
                        .background(Color.White)
                        .onGloballyPositioned { coordinates ->
                            // 测量输入框的高度
                            popupInputHeight = coordinates.size.height.toDp()
                        },
                    colors = TextFieldDefaults.outlinedTextFieldColors(focusedBorderColor = Color.LightGray),
                    keyboardOptions = KeyboardOptions(
                        keyboardType = KeyboardType.Text,
                        imeAction = ImeAction.Default
                    ),
                    maxLines = 4,
                    trailingIcon = {
                        IconButton(onClick = {
                            // TODO: 实现发送评论逻辑
                            comment = ""
                            keyboardController?.hide()
                            isDialogShown = false
                            clickedTweetIndex = -1
                        }) {
                            Icon(
                                Icons.Filled.Send,
                                contentDescription = stringResource(R.string.send)
                            )
                        }
                    },
                    textStyle = MaterialTheme.typography.subtitle1
                )
            }
        }
    }
}

TweetItem组件修改 #

@Composable
fun TweetItem(tweet: Tweet, onCommentClick: () -> Unit) {
    // 替换为你原有的TweetItem布局，确保评论按钮触发onCommentClick
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Column(modifier = Modifier.weight(1f)) {
            Text(text = tweet.author, style = MaterialTheme.typography.subtitle2)
            Text(text = tweet.content, style = MaterialTheme.typography.body1)
        }
        IconButton(onClick = onCommentClick) {
            Icon(Icons.Filled.Comment, contentDescription = "评论")
        }
    }
}

核心要点说明 #

• LazyListState：用于控制LazyColumn的滚动行为，包括滚动到指定项、等待滚动完成、计算滚动偏移量
• 点击索引跟踪：记录被点击的TweetItem索引，确保滚动目标正确
• 布局测量：通过onGloballyPositioned获取输入框高度，结合软键盘高度计算需要预留的底部空间
• LaunchedEffect：在Popup显示、点击索引变化、底部空间尺寸变化时触发滚动逻辑，确保滚动时机正确

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