HarmonyOS鸿蒙Next的RichEditor组件如何用代码实现滚动文本。

HarmonyOS鸿蒙Next的RichEditor组件如何用代码实现滚动文本。 RichEditor如何实现跑马灯那种效果？

希望能够使用RichEditor实现富文本的效果，用户可以编辑，之后变成只读状态，

但是richEditor的组件库没有text丰富，想知道只读状态下如何实现跑马灯。

5 回复

开发者你好，RichEditor支持使用addBuilderSpan添加一个CustomBuilder类型构造函数。可以显示一个自定义的跑马灯文本。可以参考如下demo实现：

@Entry
@Component
struct RichEditorTextSpan {
  controller: RichEditorController = new RichEditorController();
  private my_builder: CustomBuilder = undefined;

  build() {
    Column({ space: 10 }) {
      RichEditor({ controller: this.controller })
        .onReady(() => {
          // 往编辑器新增10个字符
          this.controller.addTextSpan('111111111\n', {
            style: { fontColor: Color.Black, fontSize: 32 }
          });
        })
        .width('80%')
        .height('30%')
        .border({ width: 1, radius: 16 })
        .draggable(false);

      Button('新增内容').onClick(() => {
        this.my_builder = () => {
          this.text1()
        };
        console.log("number======>"+this.controller.addBuilderSpan(this.my_builder))
      });
    }
    .width('100%')
    .height('100%');
  }

  @Builder
  text1(){
    Text('当文本溢出其尺寸时，文本将滚动显示。When the text overflows its dimensions, the text will scroll for displaying.')
      .width(250)
      .textOverflow({ overflow: TextOverflow.MARQUEE })
      .maxLines(1)
      .fontSize(12)
      .border({ width: 1 })
      .padding(10)
  }

}

更多关于HarmonyOS鸿蒙Next的RichEditor组件如何用代码实现滚动文本。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


自动滚动依赖于scroll滑动组件

可以将RichEditor组件视为一个静态的组件，父组件是scroll，并将文字的间距+大小设置未滚动一次的间距

使用定时器+scrollTo实现自动滚动

参考文档：

https://developer.huawei.com/consumer/cn/doc/architecture-guides/news-v1_2-ts_123-0000002410834090

RichEditor 本身更偏向“图文混排和交互式编辑”，只读态不等于自动具备 Text/Marquee 的跑马灯能力，所以不建议直接把 RichEditor 当跑马灯组件用。

可以按场景拆成两套展示：编辑态继续使用 RichEditor 保存结构化内容；只读展示态如果只是单行文本，优先把纯文本提取出来交给 Marquee，或者 Text 配合 TextOverflow.MARQUEE；如果必须保留富文本样式，则建议把只读富文本放进一个固定宽度容器里，通过 translate/属性动画做整体横向位移，并用 clip 裁剪可视区域。

需要注意两点：Marquee 官方定位是滚动展示单行文本，不支持富文本子节点；富文本如果包含图片、不同字号或多行内容，动画方案要先测量实际内容宽度，再控制 start/end 位移，否则会出现滚动距离不准或内容截断。

使用 Scroll 容器包裹 RichEditor 组件，并指定固定高度或 maxHeight 即可实现滚动。若 RichEditor 提供了 scrollable 属性，直接设为 true。代码示例：

Scroll() {  
  RichEditor({ controller: this.controller })  
    .height('100%')  
}  
.height('300vp')

当 RichEditor 转为只读时，可通过切换显示隐藏的 Text 组件来实现跑马灯效果。核心是利用 Text 的 textOverflow(TextOverflow.Marquee) 属性，配合 maxLines(1) 与固定宽度，即可自动水平滚动。

具体步骤：

  1. 获取 RichEditor 的纯文本（或 styledString）。
  2. 条件渲染：只读时显示 Text，隐藏 RichEditor。
  3. 对 Text 设置跑马灯属性。

简单代码示例：

@State isReadOnly: boolean = false
@State textContent: string = ''
private richEditorController: RichEditorController = new RichEditorController()

build() {
  Column() {
    if (this.isReadOnly) {
      Text(this.textContent)
        .textOverflow({ overflow: TextOverflow.Marquee })
        .maxLines(1)
        .width('100%')
    } else {
      RichEditor({ controller: this.richEditorController })
        .onReady(() => {
          // 编辑完成时获取内容
          this.textContent = this.richEditorController.getSpans()
            .map(span => span.value).join('')
        })
    }
  }
}

如需保留富文本样式，可提取 styledString 后，用 Marquee 组件包裹多个 Text 模拟滚动，或使用定时器平移容器实现自定义动画。

回到顶部