HarmonyOS鸿蒙Next中RichEditor文本内容不适配深浅色

HarmonyOS鸿蒙Next中RichEditor文本内容不适配深浅色

@Entry
@Component
struct Index {
  controller: RichEditorController = new RichEditorController();
  normalStyle: RichEditorTextStyle = {
    fontColor: $r('sys.color.font_primary'),
    fontSize: $r('sys.float.Body_L')
  }

  build() {
    Column() {
      RichEditor({ controller: this.controller })
        .onReady(() => {
          this.controller.setTypingStyle(this.normalStyle)
        })
    }
  }
}

在RichEditor中通过setTypingStyle设置基本样式后，输入文字内容，再在系统切换成深色模式，字体不变色，导致内容不可见，这个是什么原因？看起来像是个bug


更多关于HarmonyOS鸿蒙Next中RichEditor文本内容不适配深浅色的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

API14版本应该没问题，可以升级下看看

更多关于HarmonyOS鸿蒙Next中RichEditor文本内容不适配深浅色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，RichEditor文本内容不适配深浅色模式可能是由于未正确设置主题或样式。确保在开发时使用系统提供的主题资源，如ohos:attr/colorBackground和ohos:attr/textColor，以自动适配深浅色模式。检查RichEditor的样式配置，确保其引用了正确的主题资源。

在HarmonyOS Next中，RichEditor的文本颜色没有自动适配深浅色模式的问题确实存在。这是因为通过setTypingStyle设置的字体颜色是静态值，不会随系统主题变化自动更新。

解决方法有两种：

  1. 使用动态资源绑定：
normalStyle: RichEditorTextStyle = {
  fontColor: $r('sys.color.font_primary'),
  fontSize: $r('sys.float.Body_L')
}
  1. 手动监听主题变化并更新样式：
@State currentColor: Resource = $r('sys.color.font_primary')

onThemeChange() {
  this.currentColor = $r('sys.color.font_primary')
  this.controller.setTypingStyle({
    ...this.normalStyle,
    fontColor: this.currentColor
  })
}

建议优先使用第一种方案，因为系统资源会自动处理主题切换。如果仍有问题，可以检查sys.color.font_primary资源是否正确定义了深浅色值。

回到顶部