当前位置：首页 > news >正文

【HarmonyOS】分页滚动文本组件

news 来源：原创 2024/9/27 17:27:01

【HarmonyOS】实现分页滚动文本组件：为何选择 Scroll + Text 而非 textOverflow

import { promptAction } from '@kit.ArkUI'@Entry
@Component
struct Page37 {@State lineHeight: number = 0 // 单行文本的高度@State pageHeight: number = 0 // 每页的最大高度@State totalContentHeight: number = 0 // 整个文本内容的高度@State textContent: string = " " // 文本内容，默认一个空格是为了计算单行文本的高度@State scrollOffset: number = 0 // 当前滚动偏移量@State totalPages: number = 1 // 总页数@State currentPage: number = 1 // 当前页数scroller: Scroller = new Scroller() // 滚动条实例resetMaxLineHeight() {if (this.lineHeight > 0 && this.pageHeight > 0 && this.totalContentHeight > 0) {this.pageHeight = (Math.floor(this.pageHeight / this.lineHeight)) * this.lineHeightthis.totalPages = Math.ceil(this.totalContentHeight / this.pageHeight) //向上取整得到总页数}}build() {Column() {Text('第一章').margin({ top: 10, bottom: 10 }).backgroundColor(Color.Pink).width('100%').textAlign(TextAlign.Center)Column() {Scroll(this.scroller) {Column() {Text(this.textContent).backgroundColor(Color.Orange).fontSize(20).lineHeight(40).fontColor(Color.Black)// .textOverflow({ overflow: TextOverflow.Clip }).margin({ top: this.scrollOffset }).onAreaChange((oldArea: Area, newArea: Area) => {if (this.lineHeight == 0 && newArea.height > 0) {this.lineHeight = newArea.height as numberthis.resetMaxLineHeight()//添加数据测试let str = ""for (let i = 1; i <= 20; i++) {str += ` ${i}、荣誉和耻辱，是荣辱观中的一对基本范畴，是指社会对人们行为褒贬评价以及人们对这种评价的自我感受。知荣辱，是人性的标志，是人区别于动物、人之为人的重要标准。`}this.textContent = strreturn}if (this.totalContentHeight != newArea.height) {console.info(`newArea.height:${newArea.height}`)this.totalContentHeight = newArea.height as numberthis.resetMaxLineHeight()}})}.hitTestBehavior(HitTestMode.Block) //禁止滑动}.scrollBar(BarState.Off).constraintSize({ maxHeight: this.pageHeight == 0 ? 1000 : this.pageHeight })}.width('100%').layoutWeight(1).onAreaChange((oldArea: Area, newArea: Area) => {if (this.pageHeight == 0 && newArea.height > 0) {this.pageHeight = newArea.height as numberthis.resetMaxLineHeight()}})Row() {Button('上一页').onClick(() => {if (this.currentPage == 1) {promptAction.showToast({ message: "没有上一页了" })return;}this.scrollOffset += this.pageHeightthis.currentPage--;})Text(`${this.currentPage}/${this.totalPages}`)Button('下一页').onClick(() => {if (this.currentPage == this.totalPages) {promptAction.showToast({ message: "没有下一页了" })return;}this.scrollOffset -= this.pageHeightthis.currentPage++;})}.margin({ top: 10, bottom: 10 }).backgroundColor(Color.Pink).width('100%').justifyContent(FlexAlign.SpaceAround)}.width('100%').height('100%').backgroundColor(Color.Gray)}
}

【实现思路】

目标是实现在HarmonyOS应用中的分页滚动文本效果，使得用户能够通过“上一页”和“下一页”按钮来浏览不同的页面。我们选择使用 Scroll 组件结合 Text 组件来实现这一功能，而不是采用 textOverflow 的方式，原因在于 textOverflow 无法直接获取到文本控件被截断后的内容。

具体实现过程如下：

1. 初始化状态:

利用 @State 装饰器定义状态变量来存储单行文本的高度 (lineHeight)、每页的最大高度 (pageHeight)、文本内容的总高度 (totalContentHeight)、文本内容 (textContent)、滚动偏移量 (scrollOffset)、总页数 (totalPages) 和当前页数 (currentPage)。

2. 计算单行高度:

通过监听 Text 组件的 onAreaChange 事件，当首次获取到文本元素的高度时，将其赋值给 lineHeight 并调用 resetMaxLineHeight 方法来计算每页的最大高度。

3. 生成内容:

初始时，textContent 中包含一个空格，以便能够计算出单行文本的高度。一旦单行高度计算完成，通过循环生成多个段落填充文本内容。

4. 分页逻辑:

① 当 totalContentHeight 发生变化时，调用 resetMaxLineHeight 方法更新总页数。

② “上一页”和“下一页”按钮通过修改 scrollOffset 和 currentPage 来实现翻页效果。

5. UI 布局与滚动控制:

① 使用 Column 和 Row 布局来组织界面元素。

② Scroll 组件用于创建滚动区域，而 Text 组件则用于显示文本内容。

③ 通过设置 hitTestBehavior 为 HitTestMode.Block 来阻止文本区域的滑动行为，确保滚动仅发生在父级滚动区域中。

6. 适配不同屏幕尺寸: