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

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

HarmonyOS
3天前
浏览
收藏 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
微信
回复
3天前
相关问题
HarmonyOS文本点击事件
522浏览 • 1回复 待解决
鸿蒙怎么 修改状态栏字体颜色
12503浏览 • 1回复 待解决
HarmonyOS List中字体大小的全局修改
43浏览 • 1回复 待解决
text内容如何实时获取添加修改?
3427浏览 • 1回复 待解决
Tab组件的Tabbar中字体颜色如何修改
1318浏览 • 1回复 待解决
HarmonyOS 怎么实现Image动态修改颜色
35浏览 • 1回复 待解决