📢 重磅福利！参与活动赢好礼，马克杯、鼠标垫、贴纸、8月1日-12月31日等你来！

点击链接： 华为开发者学堂
 

问题现象

在深色模式下，RichText组件通过backgroundColor属性设置背景颜色不生效。

背景知识

• RichText组件适用于加载与显示一段HTML字符串，且不需要对显示效果进行较多自定义的应用场景。RichText组件仅支持有限的通用属性和事件。
• 当前系统存在深浅色两种显示模式，为了给用户更好的使用体验，应用应适配深浅色模式。

解决方案

RichText组件不支持设置backgroundColor属性，所以当系统切换到深色模式后未生效，如果有较多的自定义HTML显示效果的场景，推荐使用Web组件。

但是对于一些简单场景如通过加载与显示一段HTML字符串，可以通过设置支持的style标签来定义RichText组件内要显示的内容样式。

1. <style>*{ background-color: red;width:100%;padding:0;font-size:50px}</style>

采用RichText组件加载后，如果有宽度或者黑边问题，可以在style里设置width和padding。

1. import { ConfigurationConstant } from '@kit.AbilityKit';
3. @Entry
4. @Component
5. struct ToggleExample {
6. @State isOn: boolean = false
7. // 背景颜色，通过内容中添加style样式，内容添加背景颜色或者其他样式信息
8. richBgContent: string = '<style>*{ background-color: red;width:100%;padding:0;font-size:50px}</style>'
9. // 文字内容
10. richContent: string =
11. '<p style="background-color: red"><span></span><span style="white-space: pre-wrap;">温馨提示：<br/>' +
12. '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字，仅供参考。</span></p>'
14. build() {
15. Column() {
16. RichText(this.richBgContent + this.richContent)
17. .margin({ top: 28 })
18. .padding(0)
19. .width('100%')
20. .height(150)
22. Row() {
23. Toggle({ type: ToggleType.Switch, isOn: this.isOn })
24. .onChange(() => {
25. this.isOn = !this.isOn
26. // 切换深浅色主题
27. let context = this.getUIContext().getHostContext()?.getApplicationContext()
28. if (context) {
29. context.setColorMode(this.isOn ? ConfigurationConstant.ColorMode.COLOR_MODE_DARK :
30. ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)
31. }
32. })
33. }
34. }
35. }
36. }

• 浅色模式效果：

• 深色模式效果：