Jetpack Compose中HorizontalPager实现文本分页的问题

问题描述 #

从后端获取长文本故事，需要在Jetpack Compose的HorizontalPager中实现左右滑动分页展示（不使用LazyColumn）。目前已实现部分逻辑：初始页码设为1，通过Text的onTextLayout监听内容溢出，当result.didOverflowHeight为true时增加页码，也能获取剩余文本，但无法在后续页面展示剩余内容，需要解决这个问题。

现有代码片段 #

初始页码设置 #

var pageCount by remember { mutableIntStateOf(1) }
val pagerState = rememberPagerState(pageCount = { pageCount })

HorizontalPager实现 #

val linesPerPage = remember { mutableStateListOf<Int>() }
val remainingText = remember { mutableStateOf("") }

HorizontalPager(state = pagerState) {
    Column(
            modifier = modifier
                .fillMaxSize()
                .padding(bottom = innerPadding.calculateBottomPadding())
        ) {
            showLog("PAGE COUNT is $pageCount")
            if (pagerState.currentPage == 0) {
                Spacer(modifier = modifier.padding(top = innerPadding.calculateTopPadding()))
                TitleView(title = data.title, modifier = modifier)
                AuthorNameTextView(name = data.author.name, modifier = modifier)
            }
            StoryContentView(
                story = dummyStory,
                textSize = textSize,
                textStyle = selectedTextStyle,
                onTextLayout = { result ->
                    val lastVisibleLineIndex =
                        result.getLineForVerticalPosition(result.layoutInput.constraints.maxHeight.toFloat())
                    val lastVisibleLineStart = result.getLineStart(lastVisibleLineIndex)
                    val lastVisibleLineEnd = result.getLineEnd(lastVisibleLineIndex)
                    val lastVisibleLineText =
                        dummyStory.substring(lastVisibleLineStart, lastVisibleLineEnd)
                    showLog("REMAINING TEXT: $lastVisibleLineText")
                    if (result.didOverflowHeight) {
                        // Check if this is a new page or the current page is overflowing
                        if (linesPerPage.isEmpty() || linesPerPage.last() != lastVisibleLineIndex) {
                            // New page or current page is overflowing
                            if (!linesPerPage.contains(lastVisibleLineIndex)) {
                                pageCount++
                                linesPerPage.add(lastVisibleLineIndex)
                                remainingText.value = lastVisibleLineText
                            }
                        }
                    }
                }
            )
        }
}

注：StoryContentView为Jetpack Compose基础Text组件，dummyStory为测试用长文本

解决方案 #

核心问题是当前所有页面都在显示完整文本，没有根据页码截取对应分段。以下是具体修复逻辑：

1. 预计算所有分页文本片段 #

放弃在onTextLayout中动态修改页码的逻辑，改为一次性计算所有可展示的文本分页，避免Pager频繁重组。

首先创建状态存储分页列表：

val storyPages = remember { mutableStateListOf<String>() }

编写文本分页计算函数：

fun splitStoryIntoPages(
    fullText: String,
    constraints: Constraints,
    textStyle: TextStyle,
    textMeasurer: TextMeasurer
): List<String> {
    val pages = mutableListOf<String>()
    var remainingText = fullText.trim()

    while (remainingText.isNotEmpty()) {
        val layoutResult = textMeasurer.measure(
            text = AnnotatedString(remainingText),
            style = textStyle,
            constraints = constraints
        )

        if (!layoutResult.didOverflowHeight) {
            pages.add(remainingText)
            break
        }

        // 获取最后可见行的结束索引
        val lastVisibleLineIndex = layoutResult.getLineForVerticalPosition(constraints.maxHeight.toFloat())
        val lastVisibleLineEnd = layoutResult.getLineEnd(lastVisibleLineIndex)
        
        // 截取当前页文本，可优化为避免截断单词（可选）
        val pageText = remainingText.substring(0, lastVisibleLineEnd).trimEnd()
        pages.add(pageText)
        remainingText = remainingText.substring(lastVisibleLineEnd).trimStart()
    }
    return pages
}

2. 初始化分页数据 #

在数据加载完成后，计算所有分页：

val density = LocalDensity.current
val textMeasurer = rememberTextMeasurer()

// 计算页面可用高度：第一页要扣除标题和作者栏高度
val basePageHeight = with(density) {
    (LocalConfiguration.current.screenHeightDp.dp - innerPadding.calculateTopPadding() - innerPadding.calculateBottomPadding()).toPx().toInt()
}
val firstPageHeight = remember {
    basePageHeight - /* 标题+作者栏的总高度，可通过onSizeChanged获取 */
}

LaunchedEffect(data, textSize, selectedTextStyle) {
    val fullStory = dummyStory // 替换为后端获取的实际文本
    // 计算第一页文本
    val firstPageConstraints = Constraints(maxWidth = Int.MAX_VALUE, maxHeight = firstPageHeight)
    val firstPageSplit = splitStoryIntoPages(fullStory, firstPageConstraints, selectedTextStyle, textMeasurer)
    
    storyPages.clear()
    if (firstPageSplit.size > 1) {
        storyPages.add(firstPageSplit[0])
        // 计算剩余页面文本
        val remainingStory = firstPageSplit[1]
        val normalPageConstraints = Constraints(maxWidth = Int.MAX_VALUE, maxHeight = basePageHeight)
        val remainingPages = splitStoryIntoPages(remainingStory, normalPageConstraints, selectedTextStyle, textMeasurer)
        storyPages.addAll(remainingPages)
    } else {
        storyPages.addAll(firstPageSplit)
    }
    pageCount = storyPages.size
}

3. 修改Pager展示对应分页文本 #

现在每个页面直接取对应索引的文本片段：

HorizontalPager(state = pagerState) { pageIndex ->
    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(bottom = innerPadding.calculateBottomPadding())
    ) {
        if (pageIndex == 0) {
            Spacer(modifier = modifier.padding(top = innerPadding.calculateTopPadding()))
            TitleView(title = data.title, modifier = modifier)
            AuthorNameTextView(name = data.author.name, modifier = modifier)
        }
        StoryContentView(
            story = storyPages.getOrElse(pageIndex) { "" },
            textSize = textSize,
            textStyle = selectedTextStyle,
            onTextLayout = {} // 预计算后无需再监听溢出
        )
    }
}

关键注意事项 #

• 第一页的可用高度必须扣除标题和作者栏的高度，否则文本会被遮挡
• 预计算分页后，避免在onTextLayout中动态修改页码，防止Pager频繁重组引发的性能问题
• 可优化文本截取逻辑，避免在单词中间截断，提升阅读体验

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