LazyColumn(reverseLayout=true)下可展开文本向下展开实现方案

问题分析 #

启用reverseLayout=true的LazyColumn会从屏幕底部开始排列内容，默认文本布局是从顶部向下排版，点击展开时文本会向屏幕上方延伸，长文本的开头会被推到可视区域外，需要向上滚动才能查看。要实现类似WhatsApp的向下展开效果，需调整文本布局方向，让展开内容向屏幕底部延伸。

解决方案 #

1. 调整文本布局方向，让展开内容向下延伸 #

修改TextMessage组件，文本展开时使用垂直滚动容器，并让文本从容器底部开始布局，确保原有可见部分保持原位，新增内容向屏幕底部方向扩展。

2. 控制LazyColumn滚动位置（可选） #

点击"查看更多"后自动滚动到当前消息位置，确保展开内容处于可视区域内。

修改后的完整代码 #

@Composable
fun Content() {
    val listState = rememberLazyListState()
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(
            space = 16.dp,
            alignment = Alignment.Top
        ),
        contentPadding = PaddingValues(8.dp),
        reverseLayout = true,
        state = listState
    ) {
        items(50) { index ->
            TextMessage(
                text = "这是一段很长的测试文本，重复多次以模拟长内容：${"测试内容".repeat(20)}",
                index = index,
                listState = listState
            )
        }
    }
}

@Composable
fun TextMessage(
    modifier: Modifier = Modifier,
    text: String,
    index: Int,
    listState: LazyListState,
    minimizedMaxLines: Int = 3
) {
    if (text.isNotEmpty()) {
        var expanded by remember { mutableStateOf(false) }
        var needsExpand by remember { mutableStateOf(false) }

        Box(
            modifier = modifier
                .shadow(2.dp, RoundedCornerShape(8.dp))
                .clip(RoundedCornerShape(8.dp))
                .background(Color(0xFFCDFFF8))
                .padding(8.dp),
        ) {
            Column(
                modifier = Modifier.fillMaxWidth(),
                verticalArrangement = Arrangement.Bottom
            ) {
                SelectionContainer {
                    if (expanded) {
                        Column(
                            modifier = Modifier
                                .verticalScroll(rememberScrollState())
                                .fillMaxWidth(),
                            verticalArrangement = Arrangement.Bottom
                        ) {
                            Text(
                                text = text,
                                textAlign = TextAlign.Start
                            )
                        }
                    } else {
                        Text(
                            text = text,
                            maxLines = minimizedMaxLines,
                            overflow = TextOverflow.Ellipsis,
                            onTextLayout = { layoutResult ->
                                needsExpand = layoutResult.hasVisualOverflow
                            }
                        )
                    }
                }

                if (needsExpand && !expanded) {
                    Text(
                        text = "查看更多",
                        modifier = Modifier
                            .clickable {
                                expanded = true
                                LaunchedEffect(Unit) {
                                    listState.scrollToItem(index)
                                }
                            }
                            .align(Alignment.End),
                        style = MaterialTheme.typography.labelSmall,
                        color = Color.Green
                    )
                }
            }
        }
    }
}

关键修改点说明 #

• 布局方向调整：展开时使用Column并设置verticalArrangement = Arrangement.Bottom，让文本从容器底部开始排版，新增内容向屏幕底部延伸，符合reverseLayout下的视觉预期。
• 滚动容器：展开后的文本包裹在verticalScroll容器中，支持向下滚动查看全文。
• 滚动控制：点击"查看更多"后，通过LaunchedEffect调用listState.scrollToItem(index)，确保当前消息滚动到可视区域，避免展开后内容被遮挡。
• 展开判断优化：将expanded的初始化与needsExpand分离，只有当文本确实超出最大行数时才显示展开按钮，逻辑更清晰。

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