鸿蒙Harmony开发：文本样式之属性字符串（StyledString/MutableStyledStrin ...

愛在花開的季節  金牌会员 | 2024-10-25 04:41:47 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 825|帖子 825|积分 2475

属性字符串StyledString/MutableStyledString（MutableStyledString继承于StyledString，以下同一简称StyledString）是功能强盛的标记对象，可用于字符或段落级别设置文本样式。通过将StyledString附加到文本组件， 可以通过多种方式更改文本，包罗修改字号、添加字体颜色、使文本可点击以及自定义方式绘制文本等。具体用法可参考StyledString。
属性字符串提供多种类型样式对象，涵盖各种常见的文本样式格式。也可以自行创建CustomSpan, 以应用自定义样式。
创建并应用StyledString和MutableStyledString

可以通过TextController提供的setStyledString(StyledString)方法将属性字符串附加到文本组件，并推荐在onPageShow中触发绑定，在aboutToAppear中调用setStyledString无法实现页面初始即可见属性字符串文本内容，因为aboutToAppear运行时组件还没有完成创建并成功挂载节点树。
  1. @Entry
  2. @Component
  3. struct styled_string_demo1 {
  4.   styledString1: StyledString = new StyledString("运动45分钟");
  5.   mutableStyledString1: MutableStyledString = new MutableStyledString("运动35分钟");
  6.   controller1: TextController = new TextController();
  7.   controller2: TextController = new TextController();
  9.   async onPageShow() {
  10.     this.controller1.setStyledString(this.styledString1)
  11.     this.controller2.setStyledString(this.mutableStyledString1)
  12.   }
  14.   build() {
  15.     Column() {
  16.       // 显示属性字符串
  17.       Text(undefined, { controller: this.controller1 })
  18.       Text(undefined, { controller: this.controller2 })
  19.     }
  20.     .width('100%')
  21.   }
  22. }
复制代码


设置文本样式

属性字符串目前提供了TextStyle、TextShadowStyle、DecorationStyle、BaselineOffsetStyle、LineHeightStyle、LetterSpacingStyle各种Style对象来实现设置文本的各类样式。


  • 创建及应用文本字体样式对象（TextStyle）
    1. import { LengthMetrics } from '@kit.ArkUI'
    2. @Entry
    3. @Component
    4. struct styled_string_demo2 {
    5.   textStyleAttrs: TextStyle = new TextStyle({ fontWeight: FontWeight.Bolder, fontSize: LengthMetrics.vp(24), fontStyle: FontStyle.Italic })
    6.   mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟 目标达成", [
    7.     {
    8.       start: 2,
    9.       length: 2,
    10.       styledKey: StyledStringKey.FONT,
    11.       styledValue: this.textStyleAttrs
    12.     },
    13.     {
    14.       start: 7,
    15.       length: 4,
    16.       styledKey: StyledStringKey.FONT,
    17.       styledValue: new TextStyle({ fontColor: Color.Orange, fontSize: LengthMetrics.vp(12)})
    18.     }
    19.   ]);
    20.   controller: TextController = new TextController();
    22.   async onPageShow() {
    23.     this.controller.setStyledString(this.mutableStyledString)
    24.   }
    26.   build() {
    27.     Column() {
    28.       // 显示属性字符串
    29.       Text(undefined, { controller: this.controller })
    30.         .margin({ top: 10 })
    31.     }
    32.     .width('100%')
    33.   }
    34. }
    复制代码


  • 创建及应用文本阴影对象（TextShadowStyle）
    1. // xxx.ets
    2. @Entry
    3. @Component
    4. struct styled_string_demo3 {
    5.   mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟", [
    6.   {
    7.     start: 0,
    8.     length: 3,
    9.     styledKey: StyledStringKey.TEXT_SHADOW,
    10.     styledValue: new TextShadowStyle({
    11.       radius: 5,
    12.       type: ShadowType.COLOR,
    13.       color: Color.Red,
    14.       offsetX: 10,
    15.       offsetY: 10
    16.     })
    17.   }
    18.   ]);
    19.   controller: TextController = new TextController();
    21.   async onPageShow() {
    22.     this.controller.setStyledString(this.mutableStyledString)
    23.   }
    25.   build() {
    26.     Column() {
    27.       // 显示属性字符串
    28.       Text(undefined, { controller: this.controller })
    29.     }
    30.     .width('100%')
    31.   }
    32. }
    复制代码


  • 创建及应用文本装饰线对象（DecorationStyle）
    1. // xxx.ets
    2. @Entry
    3. @Component
    4. struct styled_string_demo4 {
    5.   mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟", [
    6.   {
    7.     start: 0,
    8.     length: 3,
    9.     styledKey: StyledStringKey.DECORATION,
    10.     styledValue: new DecorationStyle({type: TextDecorationType.LineThrough, color: Color.Red})
    11.   }
    12.   ]);
    13.   controller: TextController = new TextController();
    15.   async onPageShow() {
    16.     this.controller.setStyledString(this.mutableStyledString)
    17.   }
    19.   build() {
    20.     Column() {
    21.       // 显示属性字符串
    22.       Text(undefined, { controller: this.controller })
    23.     }
    24.     .width('100%')
    25.   }
    26. }
    复制代码


  • 创建及应用文本基线偏移量对象（BaselineOffsetStyle）
    1. import { LengthMetrics } from '@kit.ArkUI'
    2. import { LengthUnit } from '@ohos.arkui.node'
    3. // xxx.ets
    4. @Entry
    5. @Component
    6. struct styled_string_demo5 {
    7.   mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟", [
    8.     {
    9.       start: 0,
    10.       length: 3,
    11.       styledKey: StyledStringKey.BASELINE_OFFSET,
    12.       styledValue: new BaselineOffsetStyle(LengthMetrics.px(20))
    13.     }
    14.   ]);
    15.   controller: TextController = new TextController();
    17.   async onPageShow() {
    18.     this.controller.setStyledString(this.mutableStyledString)
    19.   }
    21.   build() {
    22.     Column() {
    23.       // 显示属性字符串
    24.       Text(undefined, { controller: this.controller })
    25.     }
    26.     .width('100%')
    27.   }
    28. }
    复制代码


  • 创建及应用文本行高对象（LineHeightStyle）
    1. import { LengthMetrics } from '@kit.ArkUI'
    2. import { LengthUnit } from '@ohos.arkui.node'
    3. // xxx.ets
    4. @Entry
    5. @Component
    6. struct styled_string_demo6 {
    7.   mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟\n顶顶顶\n得到", [
    8.     {
    9.       start: 8,
    10.       length: 3,
    11.       styledKey: StyledStringKey.LINE_HEIGHT,
    12.       styledValue: new LineHeightStyle(LengthMetrics.vp(50))
    13.     }
    14.   ]);
    15.   controller: TextController = new TextController();
    17.   async onPageShow() {
    18.     this.controller.setStyledString(this.mutableStyledString)
    19.   }
    21.   build() {
    22.     Column() {
    23.       // 显示属性字符串
    24.       Text(undefined, { controller: this.controller })
    25.     }
    26.     .width('100%')
    27.     .margin({ top: 10 })
    28.   }
    29. }
    复制代码


  • 创建及应用文本字符间距对象（LetterSpacingStyle）
    1. import { LengthMetrics } from '@kit.ArkUI'
    2. import { LengthUnit } from '@ohos.arkui.node'
    3. // xxx.ets
    4. @Entry
    5. @Component
    6. struct styled_string_demo7 {
    7.   mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟", [
    8.     {
    9.       start: 0,
    10.       length: 2,
    11.       styledKey: StyledStringKey.LETTER_SPACING,
    12.       styledValue: new LetterSpacingStyle(new LengthMetrics(20, LengthUnit.VP))
    13.     }
    14.   ]);
    15.   controller: TextController = new TextController();
    17.   async onPageShow() {
    18.     this.controller.setStyledString(this.mutableStyledString)
    19.   }
    21.   build() {
    22.     Column() {
    23.       // 显示属性字符串
    24.       Text(undefined, { controller: this.controller })
    25.     }
    26.     .width('100%')
    27.   }
    28. }
    复制代码


设置段落样式

可通过ParagraphStyle设置段落样式布局。下图表现了如何分割文本中的段落，段落以换行符 \n 末端。


以下代码示例展示了如何创建 ParagraphStyle 并应用。假如将 ParagraphStyle 附加到段落开头末尾或之间的任何位置均会应用样式，非段落区间内则不会应用样式。
  1. import { LengthMetrics } from '@kit.ArkUI'
  2. titleParagraphStyleAttr: ParagraphStyle = new ParagraphStyle({ textAlign: TextAlign.Center });
  3. //段落首行缩进15vp
  4. paragraphStyleAttr1: ParagraphStyle = new ParagraphStyle({ textIndent: LengthMetrics.vp(15) });
  5. //创建含段落样式的对象paragraphStyledString1
  6. paragraphStyledString1: MutableStyledString = new MutableStyledString("段落标题\n正文第一段落开始0123456789正文第一段落结束。", [
  7.   {
  8.     start: 0,
  9.     length: 4,
  10.     styledKey: StyledStringKey.PARAGRAPH_STYLE,
  11.     styledValue: this.titleParagraphStyleAttr
  12.   },
  13.   {
  14.     start: 0,
  15.     length: 4,
  16.     styledKey: StyledStringKey.LINE_HEIGHT,
  17.     styledValue: new LineHeightStyle(new LengthMetrics(50))
  18.   },{
  19.   start: 0,
  20.   length: 4,
  21.   styledKey: StyledStringKey.FONT,
  22.   styledValue: new TextStyle({ fontSize: LengthMetrics.vp(24), fontWeight: FontWeight.Bolder })
  23. },
  24.   {
  25.     start: 5,
  26.     length: 3,
  27.     styledKey: StyledStringKey.PARAGRAPH_STYLE,
  28.     styledValue: this.paragraphStyleAttr1
  29.   },
  30.   {
  31.     start: 5,
  32.     length: 20,
  33.     styledKey: StyledStringKey.LINE_HEIGHT,
  34.     styledValue: this.lineHeightStyle1
  35.   }
  36. ]);
复制代码
除了可以在创建属性字符串时就预设样式，也可以后续通过replaceStyle清空原样式更换新样式, 同时需要在附加的文本组件controller上主动触发更新绑定的属性字符串。
  1. import { LengthMetrics } from '@kit.ArkUI'
  2. //段落不设置缩进配置最大行数及超长显示方式
  3. paragraphStyleAttr3: ParagraphStyle = new ParagraphStyle({ textAlign: TextAlign.End, maxLines: 1, wordBreak: WordBreak.BREAK_ALL, overflow: TextOverflow.Ellipsis});
  4. // 后续某个节点触发更新段落样式
  5. controller: TextController = new TextController();
  6. this.paragraphStyledString1.replaceStyle({
  7.   start: 5,
  8.   length: 3,
  9.   styledKey: StyledStringKey.PARAGRAPH_STYLE,
  10.   styledValue: this.paragraphStyleAttr3
  11. })
  12. this.controller.setStyledString(this.mutableStyledString3)
复制代码
使用图片

可通过ImageAttachment来添加图片。
以下示例展示了如何将图片和文本附加到同一个MutableStyledString对象上，并实现图文混排。
  1. // xxx.ets
  2. import { image } from '@kit.ImageKit'
  3. import { LengthMetrics } from '@kit.ArkUI'
  5. @Entry
  6. @Component
  7. struct styled_string_demo4 {
  8.   @State message: string = 'Hello World'
  9.   imagePixelMap: image.PixelMap | undefined = undefined
  10.   @State imagePixelMap3: image.PixelMap | undefined = undefined
  11.   mutableStr: MutableStyledString = new MutableStyledString('123');
  12.   controller: TextController = new TextController();
  13.   mutableStr2: MutableStyledString = new MutableStyledString('This is set decoration line style to the mutableStr2', [{
  14.     start: 0,
  15.     length: 15,
  16.     styledKey: StyledStringKey.DECORATION,
  17.     styledValue: new DecorationStyle({
  18.       type: TextDecorationType.Overline,
  19.       color: Color.Orange,
  20.       style: TextDecorationStyle.DOUBLE
  21.     })
  22.   }])
  24.   async aboutToAppear() {
  25.     console.info("aboutToAppear initial imagePixelMap")
  26.     this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.sea'))
  27.   }
  29.   private async getPixmapFromMedia(resource: Resource) {
  30.     let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
  31.       bundleName: resource.bundleName,
  32.       moduleName: resource.moduleName,
  33.       id: resource.id
  34.     })
  35.     let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))
  36.     let createPixelMap: image.PixelMap = await imageSource.createPixelMap({
  37.       desiredPixelFormat: image.PixelMapFormat.RGBA_8888
  38.     })
  39.     await imageSource.release()
  40.     return createPixelMap
  41.   }
  43.   leadingMarginValue: ParagraphStyle = new ParagraphStyle({ leadingMargin: LengthMetrics.vp(5)})
  44.   //行高样式对象
  45.   lineHeightStyle1: LineHeightStyle= new LineHeightStyle(new LengthMetrics(24));
  46.   //Bold样式
  47.   boldTextStyle: TextStyle = new TextStyle({ fontWeight: FontWeight.Bold });
  48.   //创建含段落样式的对象paragraphStyledString1
  49.   paragraphStyledString1: MutableStyledString = new MutableStyledString("\n品牌相纸 高清冲印30张\n限时直降5.15元 限量增送", [
  50.     {
  51.       start: 0,
  52.       length: 28,
  53.       styledKey: StyledStringKey.PARAGRAPH_STYLE,
  54.       styledValue: this.leadingMarginValue
  55.     },
  56.     {
  57.       start: 14,
  58.       length: 9,
  59.       styledKey: StyledStringKey.FONT,
  60.       styledValue: new TextStyle({ fontSize: LengthMetrics.vp(14), fontColor: '#B22222' })
  61.     },
  62.     {
  63.       start: 24,
  64.       length: 4,
  65.       styledKey: StyledStringKey.FONT,
  66.       styledValue: new TextStyle({ fontSize: LengthMetrics.vp(14), fontWeight: FontWeight.Lighter })
  67.     },
  68.     {
  69.       start: 11,
  70.       length: 4,
  71.       styledKey: StyledStringKey.LINE_HEIGHT,
  72.       styledValue: this.lineHeightStyle1
  73.     }
  74.   ]);
  75.   paragraphStyledString2: MutableStyledString = new MutableStyledString("\n￥16.21 3000+人好评", [
  76.     {
  77.       start: 0,
  78.       length: 5,
  79.       styledKey: StyledStringKey.PARAGRAPH_STYLE,
  80.       styledValue: this.leadingMarginValue
  81.     },
  82.     {
  83.       start: 0,
  84.       length: 4,
  85.       styledKey: StyledStringKey.LINE_HEIGHT,
  86.       styledValue: new LineHeightStyle(new LengthMetrics(60))
  87.     },
  88.     {
  89.       start: 0,
  90.       length: 7,
  91.       styledKey: StyledStringKey.FONT,
  92.       styledValue: this.boldTextStyle
  93.     },
  94.     {
  95.       start: 1,
  96.       length: 1,
  97.       styledKey: StyledStringKey.FONT,
  98.       styledValue: new TextStyle({ fontSize: LengthMetrics.vp(18) })
  99.     },
  100.     {
  101.       start: 2,
  102.       length: 2,
  103.       styledKey: StyledStringKey.FONT,
  104.       styledValue: new TextStyle({ fontSize: LengthMetrics.vp(36) })
  105.     },
  106.     {
  107.       start: 4,
  108.       length: 3,
  109.       styledKey: StyledStringKey.FONT,
  110.       styledValue: new TextStyle({ fontSize: LengthMetrics.vp(20) })
  111.     },
  112.     {
  113.       start: 7,
  114.       length: 9,
  115.       styledKey: StyledStringKey.FONT,
  116.       styledValue: new TextStyle({ fontColor: Color.Grey, fontSize: LengthMetrics.vp(14)})
  117.     }
  118.   ])
  120.   build() {
  121.     Row() {
  122.       Column({ space: 10 }) {
  123.         Text(undefined, { controller: this.controller })
  124.           .copyOption(CopyOptions.InApp)
  125.           .draggable(true)
  126.           .backgroundColor('#FFFFFF')
  127.           .borderRadius(5)
  129.         Button('点击查看商品卡片')
  130.           .onClick(() => {
  131.             if (this.imagePixelMap !== undefined) {
  132.               this.mutableStr = new MutableStyledString(new ImageAttachment({
  133.                 value: this.imagePixelMap,
  134.                 size: { width: 180, height: 160 },
  135.                 verticalAlign: ImageSpanAlignment.BASELINE,
  136.                 objectFit: ImageFit.Fill
  137.               }))
  138.               this.paragraphStyledString1.appendStyledString(this.paragraphStyledString2)
  139.               this.mutableStr.appendStyledString(this.paragraphStyledString1)
  140.               this.controller.setStyledString(this.mutableStr)
  141.             }
  142.           })
  143.       }
  144.       .width('100%')
  145.     }
  146.     .height('100%')
  147.     .backgroundColor('#F8F8FF')
  148.   }
  149. }
复制代码


设置变乱

可通过GestureStyle设置onClick、onLongPress变乱来使文本响应点击长按变乱。
除了初始化属性字符串对象即初始样式对象，亦可通过setStyle接口再叠加新样式或更新已有样式，同时需要在附加的文本组件controller上主动触发更新绑定的属性字符串。
  1. import { drawing } from '@kit.ArkGraphics2D';
  3. class MyCustomSpan extends CustomSpan {
  4. constructor(word: string, width: number, height: number, fontSize: number) {
  5.   super();
  6.   this.word = word;
  7.   this.width = width;
  8.   this.height = height;
  9.   this.fontSize = fontSize;
  10. }
  12. onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics {
  13.   return { width: this.width, height: this.height }
  14. }
  16. onDraw(context: DrawContext, options: CustomSpanDrawInfo) {
  17.   let canvas = context.canvas;
  19.   const brush = new drawing.Brush();
  20.   brush.setColor({ alpha: 255, red: 0, green: 0, blue: 0 })
  21.   const font = new drawing.Font()
  22.   font.setSize(vp2px(this.fontSize))
  23.   const textBlob = drawing.TextBlob.makeFromString(this.word.substr(0, 5), font, drawing.TextEncoding.TEXT_ENCODING_UTF8)
  24.   canvas.attachBrush(brush)
  26.   this.onDrawRectByRadius(context, options.x, options.x + vp2px(this.width), options.lineTop, options.lineBottom, 20)
  27.   brush.setColor({ alpha: 255, red: 255, green: 255, blue: 255 })
  28.   canvas.attachBrush(brush)
  29.   canvas.drawTextBlob(textBlob, options.x, options.lineBottom - 30)
  30.   brush.setColor({ alpha: 255, red: 255, green: 228 , blue: 196 })
  31.   canvas.attachBrush(brush)
  32.   const textBlob1 = drawing.TextBlob.makeFromString(this.word.substr(5), font, drawing.TextEncoding.TEXT_ENCODING_UTF8)
  33.   canvas.drawTextBlob(textBlob1, options.x + vp2px(100), options.lineBottom - 30)
  35.   canvas.detachBrush()
  36. }
  37. onDrawRectByRadius(context: DrawContext, left: number, right: number, top: number, bottom: number, radius: number) {
  38.   let canvas = context.canvas
  39.   let path = new drawing.Path()
  41.   // 画带radius的rect
  42.   path.moveTo(left  + radius, top)
  43.   path.lineTo(right - radius, top)
  44.   path.arcTo(right - 2 * radius, top, right, top + 2 * radius, 270, 90)
  45.   path.lineTo(right, bottom - radius)
  46.   path.arcTo(right - 2 * radius, bottom - 2 * radius, right, bottom, 0, 90)
  48.   path.lineTo(left + 2 * radius, bottom)
  49.   path.arcTo(left, bottom - 2 * radius, left + 2 * radius, bottom, 90, 90)
  50.   path.lineTo(left, top + 2 * radius)
  51.   path.arcTo(left, top, left + 2 * radius, top + 2 * radius, 180, 90)
  53.   canvas.drawPath(path)
  54. }
  55. setWord(word: string) {
  56.   this.word = word;
  57. }
  59. width: number = 160
  60. word: string = "drawing"
  61. height: number = 10
  62. fontSize: number = 16
  63. }
  65. @Entry
  66. @Component
  67. struct styled_string_demo6 {
  68. customSpan3: MyCustomSpan = new MyCustomSpan("99VIP88%off", 200, 40, 30)
  69. textStyle: MutableStyledString = new MutableStyledString("123");
  70. textController: TextController = new TextController()
  71. isPageShow: boolean = true
  73. async onPageShow() {
  74.   if (!this.isPageShow) {
  75.     return
  76.   }
  77.   this.isPageShow = false
  78.   this.textController.setStyledString(new StyledString(this.customSpan3))
  79. }
  81. build() {
  82.   Row() {
  83.     Column() {
  84.       Text(undefined, { controller: this.textController })
  85.         .copyOption(CopyOptions.InApp)
  86.         .fontSize(30)
  87.     }
  88.     .width('100%')
  89.   }
  90.   .height('100%')
  91. }
  92. }
复制代码


场景示例

  1. import { LengthMetrics } from '@kit.ArkUI';
  3. @Entry
  4. @Component
  5. struct Index {
  6.   alignCenterParagraphStyleAttr: ParagraphStyle = new ParagraphStyle({ textAlign: TextAlign.Center });
  7.   //行高样式对象
  8.   lineHeightStyle1: LineHeightStyle= new LineHeightStyle(LengthMetrics.vp(24));
  9.   //Bold样式
  10.   boldTextStyle: TextStyle = new TextStyle({ fontWeight: FontWeight.Bold });
  11.   //创建含段落样式的对象paragraphStyledString1
  12.   paragraphStyledString1: MutableStyledString = new MutableStyledString("您的豪华钻石已过期1天\n续费可继续享受会员专属权益", [
  13.     {
  14.       start: 0,
  15.       length: 4,
  16.       styledKey: StyledStringKey.PARAGRAPH_STYLE,
  17.       styledValue: this.alignCenterParagraphStyleAttr
  18.     },
  19.     {
  20.       start: 0,
  21.       length: 4,
  22.       styledKey: StyledStringKey.LINE_HEIGHT,
  23.       styledValue: new LineHeightStyle(LengthMetrics.vp(40))
  24.     },
  25.     {
  26.       start: 11,
  27.       length: 14,
  28.       styledKey: StyledStringKey.FONT,
  29.       styledValue: new TextStyle({ fontSize: LengthMetrics.vp(14), fontColor: Color.Grey })
  30.     },
  31.     {
  32.       start: 11,
  33.       length: 4,
  34.       styledKey: StyledStringKey.PARAGRAPH_STYLE,
  35.       styledValue: this.alignCenterParagraphStyleAttr
  36.     },
  37.     {
  38.       start: 11,
  39.       length: 4,
  40.       styledKey: StyledStringKey.LINE_HEIGHT,
  41.       styledValue: this.lineHeightStyle1
  42.     }
  43.   ]);
  44.   paragraphStyledString2: MutableStyledString = new MutableStyledString("\n￥4.88￥15", [
  45.     {
  46.       start: 0,
  47.       length: 4,
  48.       styledKey: StyledStringKey.PARAGRAPH_STYLE,
  49.       styledValue: this.alignCenterParagraphStyleAttr
  50.     },
  51.     {
  52.       start: 0,
  53.       length: 4,
  54.       styledKey: StyledStringKey.LINE_HEIGHT,
  55.       styledValue: new LineHeightStyle(LengthMetrics.vp(60))
  56.     },
  57.     {
  58.       start: 0,
  59.       length: 6,
  60.       styledKey: StyledStringKey.FONT,
  61.       styledValue: this.boldTextStyle
  62.     },
  63.     {
  64.       start: 1,
  65.       length: 1,
  66.       styledKey: StyledStringKey.FONT,
  67.       styledValue: new TextStyle({ fontSize: LengthMetrics.vp(18)})
  68.     },
  69.     {
  70.       start: 2,
  71.       length: 4,
  72.       styledKey: StyledStringKey.FONT,
  73.       styledValue: new TextStyle({ fontSize: LengthMetrics.vp(40)})
  74.     },
  75.     {
  76.       start: 6,
  77.       length: 3,
  78.       styledKey: StyledStringKey.FONT,
  79.       styledValue: new TextStyle({ fontColor: Color.Grey, fontSize: LengthMetrics.vp(14)})
  80.     },
  81.     {
  82.       start: 6,
  83.       length: 3,
  84.       styledKey: StyledStringKey.DECORATION,
  85.       styledValue: new DecorationStyle({ type: TextDecorationType.LineThrough, color: Color.Grey })
  86.     }
  87.   ])
  88.   paragraphStyledString3: MutableStyledString = new MutableStyledString("\n02时06分后将失去该优惠", [
  89.     {
  90.       start: 0,
  91.       length: 4,
  92.       styledKey: StyledStringKey.PARAGRAPH_STYLE,
  93.       styledValue: this.alignCenterParagraphStyleAttr
  94.     },
  95.     {
  96.       start: 0,
  97.       length: 4,
  98.       styledKey: StyledStringKey.LINE_HEIGHT,
  99.       styledValue: new LineHeightStyle(LengthMetrics.vp(30))
  100.     },
  101.     {
  102.       start: 1,
  103.       length: 2,
  104.       styledKey: StyledStringKey.FONT,
  105.       styledValue: new TextStyle({ fontColor: '#FFD700', fontWeight: FontWeight.Bold })
  106.     },
  107.     {
  108.       start: 4,
  109.       length: 2,
  110.       styledKey: StyledStringKey.FONT,
  111.       styledValue: new TextStyle({ fontColor: '#FFD700', fontWeight: FontWeight.Bold })
  112.     }
  113.   ])
  114.   controller: TextController = new TextController();
  116.   build() {
  117.     Row() {
  118.       Column( { space : 5 }) {
  119.         Text(undefined, { controller: this.controller })
  120.           .width(240)
  121.           .copyOption(CopyOptions.InApp)
  122.           .draggable(true)
  123.           .onAppear(()=>{
  124.             this.paragraphStyledString2.appendStyledString(this.paragraphStyledString3)
  125.             this.paragraphStyledString1.appendStyledString(this.paragraphStyledString2)
  126.             this.controller.setStyledString(this.paragraphStyledString1)
  127.           })
  129.         Button("限时4.88元 立即续费")
  130.           .width(200)
  131.           .fontColor(Color.White)
  132.           .fontSize(18)
  133.           .backgroundColor('#3CB371')
  134.           .margin({ bottom: 10 })
  135.       }
  136.       .borderWidth(1).borderColor('#FFDEAD')
  137.       .margin({ left: 10 })
  138.     }
  139.     .height('60%')
  140.   }
  141. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

愛在花開的季節

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表