Jetpack Compose动态间距高度

Question

Jetpack Compose动态间距高度

4

我正在使用Jetpack Compose版本1.0.2（截至今天最新的稳定版）。

我有一个包含多个LazyRows的Column，其中包含一张图像和两个文本。

请看下面的结构（简化版）

val topicList: List<Topics>


Column {
    topicList.forEach { topic ->

        val showList: List<Show> = topic.shows

        Column {
            Text(text = topic.title)

            LazyRow {
                items(showList) { show ->
                    Column {
                        Image()
                        Text(text = show.title)
                        Text(text = show.info)
                    }
                }
            }

            Spacer(Modifier.height(32.dp))
        }
    }
}

问题在于具有show.title和show.info的Text组件可以是多行的，而且由于每个项目都是惰性加载的，直到它出现在屏幕上才计算高度。因此，下一行的y位置会跳来跳去。

为了理解发生了什么，请查看此视频：视频链接我该如何动态计算Spacer的高度，以便它们不会跳动？我知道简单的解决方案就是给一个固定的高度，但有些文本只有一行，这将导致更大的间隙，所以我认为这并不是理想的解决方案。

- Saehun Sean Oh

这不就是正在发生的事情吗？高度是根据文本值动态计算的。我不明白你想要什么。请进一步阐述。 - Richard Onslow Roper

@MARSK 是的，该行为正如我的代码所预期的那样。期望的行为是在可能更长的高度文本组合之前就已经知道了完整的高度，以便我可以相应地调整 Spacer 组合的高度。 - Saehun Sean Oh

嗯，我也是这么想的，但当你指出如果文本很小但高度仍然很大会留下空白时，我有些困惑了。 - Richard Onslow Roper

@MARSK 抱歉让你感到困惑。我正在寻找一些方法来根据 Text Composables 的高度调整 Spacer 的高度，以便于用户的视觉体验，使得当前行下面的行不会跳动。 - Saehun Sean Oh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phil Dukhov · Accepted Answer

为了计算LazyRow的高度，您需要知道所有元素的尺寸。一个直接的解决方案是将它们全部放在LazyRow下面，使用Box，在这种情况下，大小将由它们中最大的确定。

但是这种解决方案需要大量资源，特别是如果您有很多对象。相反，我建议您通过限制info和title的行数来计算最大尺寸，比如说限制为2行，并计算出两个文本都具有最大行数的最大尺寸。

@Composable
fun TopicList(topicList: List<Topics>) {
    Column {
        topicList.forEach { topic ->
            val showList = topic.shows
            Column {
                Text(text = topic.title)
                Box {
                    ShowCell(
                        placeholderShow,
                        modifier = Modifier.alpha(0f)
                    )
                    LazyRow(
                        horizontalArrangement = Arrangement.spacedBy(10.dp)
                    ) {
                        items(showList) { show ->
                            ShowCell(show)
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun ShowCell(
    show: Show,
    modifier: Modifier = Modifier
) {
    Column(
        modifier
            .width(200.dp)
    ) {
        Image(
            painter = rememberImagePainter(show.image),
            contentDescription = "...",
            contentScale = ContentScale.Crop,
            modifier = Modifier.aspectRatio(2f)
        )
        Text(
            show.title,
            fontSize = 20.sp,
            maxLines = titleMaxLines,
            overflow = TextOverflow.Ellipsis,
        )
        Text(
            text = show.info,
            maxLines = infoMaxLines,
            overflow = TextOverflow.Ellipsis,
        )
    }
}

private const val titleMaxLines = 2
private const val infoMaxLines = 2
private val placeholderShow = Show(
    image = "",
    title = List(titleMaxLines) { '\n' }.joinToString(separator = ""),
    info = List(titleMaxLines) { '\n' }.joinToString(separator = ""),
)

结果：