如何让LazyVerticalStaggeredGrid项自适应内容并显示完整文本

问题描述 #

我希望LazyVerticalStaggeredGrid的项能够适配自身内容的大小，且内容尺寸各不相同，但目前这些项无法显示完整文本。以下是我的实现代码及当前效果：

实现代码 #

LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Adaptive(60.dp),
    contentPadding = PaddingValues(12.dp),
    verticalItemSpacing = 8.dp,
    horizontalArrangement = Arrangement.spacedBy(14.dp),
    content = {
        items(state.itemList){item->
        ElevatedCard(shape = AbsoluteRoundedCornerShape(
        topLeft = 16.dp, bottomRight = 16.dp),
        modifier = Modifier.width(IntrinsicSize.Max)
        ) {
         Column(
           modifier = Modifier
                            .padding(8.dp)
        ) {

         Image(
         imageVector = item.icon,
         contentDescription = null,
         colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.inverseSurface),
          modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(4f)
            .clip(RoundedCornerShape(16.dp)),
            )

        Spacer(modifier = Modifier.height(4.dp))

        Text(
        text = item.name,
        maxLines = 1,
        fontFamily = FontFamily.Serif,
        fontWeight = FontWeight.ExtraBold,
        modifier = Modifier
             .align(Alignment.CenterHorizontally)   
        )

        Spacer(modifier = Modifier.height(4.dp))

        Text(
        text = item.pageUrl,
        maxLines = 1,
        fontFamily = FontFamily.Serif,
        fontSize = 12.sp,
        modifier = Modifier.align(Alignment.CenterHorizontally)
        )                   
    }
}

当前效果 #

卡片宽度被强制限制，部分文本因maxLines=1被截断，无法完整展示内容。

解决方案 #

针对问题，可通过以下几点修改实现内容适配：

• 移除卡片固定宽度约束：删除Modifier.width(IntrinsicSize.Max)，让卡片宽度由内部内容自动决定。
• 取消文本行数限制：移除两个Text组件的maxLines = 1参数，或根据需求设置合适的行数，让文本自动换行显示完整内容。
• 保持图片自适应：图片保留fillMaxWidth()和aspectRatio(4f)，会跟随卡片宽度自动调整尺寸，不影响布局适配。
• 可选：调整网格列规则：如果StaggeredGridCells.Adaptive(60.dp)的最小宽度限制仍不符合需求，可尝试改用StaggeredGridCells.Fixed(n)（n为固定列数），让布局更灵活。

修改后的完整代码 #

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Adaptive(60.dp),
    contentPadding = PaddingValues(12.dp),
    verticalItemSpacing = 8.dp,
    horizontalArrangement = Arrangement.spacedBy(14.dp),
    content = {
        items(state.itemList) { item ->
            ElevatedCard(
                shape = AbsoluteRoundedCornerShape(topLeft = 16.dp, bottomRight = 16.dp)
                // 移除固定宽度约束，卡片宽度自适应内容
            ) {
                Column(
                    modifier = Modifier.padding(8.dp)
                ) {
                    Image(
                        imageVector = item.icon,
                        contentDescription = null,
                        colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.inverseSurface),
                        modifier = Modifier
                            .fillMaxWidth()
                            .aspectRatio(4f)
                            .clip(RoundedCornerShape(16.dp))
                    )

                    Spacer(modifier = Modifier.height(4.dp))

                    Text(
                        text = item.name,
                        fontFamily = FontFamily.Serif,
                        fontWeight = FontWeight.ExtraBold,
                        modifier = Modifier.align(Alignment.CenterHorizontally)
                    )

                    Spacer(modifier = Modifier.height(4.dp))

                    Text(
                        text = item.pageUrl,
                        fontFamily = FontFamily.Serif,
                        fontSize = 12.sp,
                        modifier = Modifier.align(Alignment.CenterHorizontally)
                    )
                }
            }
        }
    }
)

修改后，卡片会根据内部文本长度自动调整宽度，文本完整显示，同时保持瀑布流布局的错落特性。

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