Jetpack Compose 中的文本分页

Question

问题陈述

从后端观察，有一个大文本，基本上是一个故事。在文本中显示该文本。我不会将该文本放入任何

LazyColumn

中，因为我想要 HorizontalPager 行为。因此用户可以从右向左滑动来查看剩余内容。

为了解决这个问题，我写了这样的解决方案

最初，将页数默认值设置为1

 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的简单文本。

这里，要求是当

result.didOverflowHeight

返回

true

的时候我就去多加一页。现在，当我登陆到 page2 时，我想在那里显示剩余的文本，如果内容再次在 page2 中溢出，那么它会附加 pageCount，然后转到 page3 等等，除非我达到了内容的完成。

在这段代码中，我能够获得REMANING ALL TEXT，但是如何在其他页面中显示，我在那里很挣扎。

Answer 1

您可以保留一个

String

列表作为您的状态，在每一步添加剩余文本，然后使用当前页面索引查找列表以找出当前页面的内容。类似于以下内容：

var storyPages by remember { mutableStateOf(listOf(dummyStory)) }
val pageCount by remember { derivedStateOf { storyPages.count() } }
val pagerState = rememberPagerState(pageCount = { pageCount })

HorizontalPager(state = pagerState) {
    Column(
            modifier = modifier
                ...
        ) {
            ...

            StoryContentView(
                story = storyPages[pagerState.currentPage],
                ...
                onTextLayout = { result ->
                    ...
                    if (result.didOverflowHeight) {
                        val lastVisibleLineText = ...
                        // New page or current page is overflowing
                        if (!linesPerPage.contains(lastVisibleLineIndex)) {
                            // Add remaining text to be the new story page
                            storyPages = storyPages.toMutableList().add(lastVisibleLineText)
                        }
                    }
                }
            )
        }
    }