如何在Jetpack Compose中根据尺寸动态为HorizontalPager添加页面？

我有一个包含标题和副标题的Item列表，需要在HorizontalPager中展示。Pager的高度有限且不固定，得根据Item的实际高度和Pager的可用高度自动分页（比如10个Item时，若每页只能放3个就新增页面）。

现有页面Composable代码：

@Composable
fun ItemsPage(items: List<Item>) {
    Column {
        items.forEach {
            SingleItem(item = it)
        }
    }
}

单个Item的Composable代码：

@Composable
fun SingleItem(item: Item) {
    Column {
        Text(
            text = item.title,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis
        )
        Text(
            text = item.subtitle,
            maxLines = 2,
            color = Color.LightGray,
            overflow = TextOverflow.Ellipsis
        )
    }
}

问题在于Text会根据字符串长度显示1-2行，没法提前预知哪些Item会占2行。之前在ViewPager2里是通过View.measure测量解决的，现在要迁移到Compose，想知道有没有类似方案，怎么高效测量Composable还能避免过多重渲染。

解决方案思路 #

在Compose里可以利用SubcomposeLayout或结合remember与onSizeChanged实现预测量，核心逻辑是先获取每个Item的实际高度，再根据Pager可用高度计算每页容纳的Item数量，最后生成分页列表供HorizontalPager使用。

方案1：用SubcomposeLayout预测量Item高度（无额外重渲染）

SubcomposeLayout可以在不渲染实际UI的情况下预测量Composable的尺寸，避免多余重渲染：

@Composable
fun MeasureItemHeight(item: Item, onHeightMeasured: (Int) -> Unit) {
    SubcomposeLayout { constraints ->
        // 预测量SingleItem的高度
        val measuredHeight = subcompose("measure") {
            SingleItem(item = item)
        }.first().measure(constraints).height
        onHeightMeasured(measuredHeight)
        // 返回空布局，不占用实际UI空间
        layout(0, 0) {}
    }
}

基于这个测量工具，实现分页逻辑：

@Composable
fun ItemsPage(items: List<Item>) {
    BoxWithConstraints {
        val pagerMaxHeight = constraints.maxHeight
        // 缓存Item高度，仅在items变化时重新测量
        val itemHeights = remember { mutableStateListOf<Int>() }

        // 异步测量所有Item高度
        LaunchedEffect(items) {
            itemHeights.clear()
            items.forEach { item ->
                val height = suspendCoroutine { cont ->
                    MeasureItemHeight(item) { measuredHeight ->
                        cont.resume(measuredHeight)
                    }
                }
                itemHeights.add(height)
            }
        }

        // 计算分页后的列表
        val paginatedItems = remember(itemHeights, pagerMaxHeight) {
            val pages = mutableListOf<List<Item>>()
            var currentPage = mutableListOf<Item>()
            var currentPageTotalHeight = 0

            items.forEachIndexed { index, item ->
                val itemHeight = itemHeights.getOrElse(index) { 0 }
                // 判断当前Item能否加入当前页
                if (currentPageTotalHeight + itemHeight <= pagerMaxHeight || currentPage.isEmpty()) {
                    currentPage.add(item)
                    currentPageTotalHeight += itemHeight
                } else {
                    pages.add(currentPage)
                    currentPage = mutableListOf(item)
                    currentPageTotalHeight = itemHeight
                }
            }
            // 加入最后一页
            if (currentPage.isNotEmpty()) pages.add(currentPage)
            pages
        }

        // 渲染HorizontalPager
        if (paginatedItems.isNotEmpty()) {
            HorizontalPager(pageCount = paginatedItems.size) { page ->
                Column(modifier = Modifier.fillMaxHeight()) {
                    paginatedItems[page].forEach { SingleItem(item = it) }
                }
            }
        }
    }
}

方案2：通过已渲染Item的onSizeChanged获取高度（简单易实现）

如果觉得预测量逻辑复杂，可以先一次性渲染所有Item获取高度，再重新分页，适合Item数量不多的场景：

@Composable
fun ItemsPage(items: List<Item>) {
    BoxWithConstraints {
        val pagerMaxHeight = constraints.maxHeight
        val itemHeights = remember { mutableStateListOf<Int>() }
        val isMeasured = remember { mutableStateOf(false) }
        val paginatedItems = remember { mutableStateListOf<List<Item>>() }

        if (!isMeasured.value) {
            // 第一次渲染所有Item以获取高度
            Column {
                items.forEach { item ->
                    SingleItem(
                        item = item,
                        modifier = Modifier.onSizeChanged { size ->
                            itemHeights.add(size.height)
                        }
                    )
                }
            }
            // 高度收集完成后计算分页
            LaunchedEffect(itemHeights) {
                if (itemHeights.size == items.size) {
                    val pages = mutableListOf<List<Item>>()
                    var currentPage = mutableListOf<Item>()
                    var currentPageTotalHeight = 0

                    items.forEachIndexed { index, item ->
                        val itemHeight = itemHeights[index]
                        if (currentPageTotalHeight + itemHeight <= pagerMaxHeight || currentPage.isEmpty()) {
                            currentPage.add(item)
                            currentPageTotalHeight += itemHeight
                        } else {
                            pages.add(currentPage)
                            currentPage = mutableListOf(item)
                            currentPageTotalHeight = itemHeight
                        }
                    }
                    if (currentPage.isNotEmpty()) pages.add(currentPage)
                    
                    paginatedItems.addAll(pages)
                    isMeasured.value = true
                }
            }
        } else {
            // 渲染分页后的HorizontalPager
            HorizontalPager(pageCount = paginatedItems.size) { page ->
                Column(modifier = Modifier.fillMaxHeight()) {
                    paginatedItems[page].forEach { SingleItem(item = it) }
                }
            }
        }
    }
}

关键优化点 #

• 用remember缓存itemHeights和paginatedItems，仅在items或Pager高度变化时重新计算，避免不必要的重组。
• 确保测量时的Item约束（字体、padding、最大宽度等）与实际渲染时一致，否则高度测量会不准确。
• 若Pager高度动态变化（如屏幕旋转、软键盘弹出），需监听高度变化并重新触发分页计算。

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