HarmonyOS 文本部分字体修改颜色大小,并添加点击事件实现

在一长串字符串中对特定的字符串颜色进行修改,并附加点击事件的简单实现方式

HarmonyOS
2024-12-24 17:30:47
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

可以尝试下richtext组件来实现

// xxx.ets
@Entry
@Component
struct RichTextExample {
  @State data: string =
    '<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">字体大小35px,行高45px</p>' +
      '<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>';

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center }) {
      RichText(this.data)
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .width(500)
        .height(500)
        .backgroundColor(0XBDDB69)
      RichText('layoutWeight(1)')
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .size({ width: '100%', height: 110 })
        .backgroundColor(0X92D6CC)
        .layoutWeight(1)
      RichText('layoutWeight(2)')
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .size({ width: '100%', height: 110 })
        .backgroundColor(0X92C48D)
        .layoutWeight(2)
      Button().onClick(()=>{
        this.data=` '<p style="font-size: 35px;text-align: center;font-weight: bold; color: red">字体大小35px,行高45px</p>' +
    '<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>';`
      })
    }

  }
}
分享
微博
QQ
微信
回复
2024-12-24 19:32:08
相关问题
HarmonyOS文本点击事件
795浏览 • 1回复 待解决
鸿蒙怎么 修改状态栏字体颜色
12761浏览 • 1回复 待解决
HarmonyOS List中字体大小的全局修改
186浏览 • 1回复 待解决