随着HarmonyOS版本的不断升级，目前最新Release版本是6.0.1(21)，会增加一些新特性，也会废弃一些旧的API，我们要不断地关注版本的迭代，也许一行代码就解决的问题，因为不熟悉API而无从下手。今天来整理一下6.0以上Text组件新增的一些特性，以备在未来的需求中用到。

演示

演示.gif

新增API

说明

1.设置文本颜色按线性或径向渐变，可以显示为径向渐变RadialGradientStyle或线性渐变LinearGradientStyle或纯色ColorShaderStyle的效果，shaderStyle的优先级高于fontColor和AI识别，纯色建议使用fontColor。
2.设置是否开启中文与西文的自动间距，当文本内容有中英文混排时，开启后会自动增加中英文间距。
3.设置为数字翻牌动效，仅限正整数，不支持小数和负数。不支持渐变色和Text跑马灯模式。当文本存在子组件时或通过属性字符串设置时，数字翻牌失效。
4.设置文本内容区在组件内的垂直对齐方式，当文本内容高度超过父容器时，默认的展示方式内容居上展示。可以设置居中、底部展示。
5.设置文本段落在垂直方向的对齐方式，当文本段落由多个子组件构成，默认对齐方式是对齐文本基线，还可以设置对齐文本顶部、底部、垂直居中。

属性字符串

属性字符串中新增了设置新增文本描边样式，支持设置描述宽度和颜色。新增装饰线设置。

文本字体样式TextStyle新增属性

文本装饰线样式DecorationStyle新增属性

演示源码

import { LengthMetrics } from '@kit.ArkUI';

@Entry
@ComponentV2
struct Text_6_Test{
  @Local count:number=0
  private timerId: number = -1
  mutableStyledString: MutableStyledString = new MutableStyledString('HarmonyOS', [{
    start: 0,
    length: 7,
    styledKey: StyledStringKey.FONT, //字体样式键
    styledValue: new TextStyle({
      fontColor: '#ff2787d9',
      fontWeight: FontWeight.Bolder,
      fontSize: LengthMetrics.fp(25),
      strokeWidth: LengthMetrics.px(-5), //文本描边宽度 小于0时为实心字，大于0时为空心字
      strokeColor: Color.Black,   //文本描边颜色
      superscript:SuperscriptStyle.SUPERSCRIPT,  //上下角标样式
    })
  },
    {
      start: 7,
      length: 2,
      styledKey: StyledStringKey.DECORATION, //文本装饰线样式键
      styledValue: new DecorationStyle({
        type: TextDecorationType.LineThrough, //装饰线类型
        thicknessScale: 2  //装饰线粗细缩放
      }, {enableMultiType: true})  //是否开启多装饰线显示
    }
  ]);
  controller: TextController = new TextController();
  aboutToAppear(): void {
    this.timerId = setInterval(() => {
      this.count++
    }, 500)
  }
  onPageShow(): void {
    this.controller.setStyledString(this.mutableStyledString)
  }
  build() {
    Column({space:10}){
      Text('API 6.0+ Text组件新特性').fontSize(20)
      Text('支持设置文本颜色按线性或径向渐变').shaderStyle({
        angle: 90,
        colors: [['#ff0000', 0.0], ['#ffff00', 0.5], ['#00ff00', 1]]
      })
      Text('中文和English自动Spacing')
      Text('中文和English自动Spacing').enableAutoSpacing(true)
      Row(){
        Text('6.0之前设置行间距\n行间距为10vp\n首行和尾行有默认行间距').lineSpacing({value:10,unit:1})
      }.backgroundColor(Color.Gray)
      Row(){
        Text('6.0新增行间距设置\n行间距为10vp\n取出首行和尾行默认行间距').lineSpacing({value:10,unit:1},{onlyBetweenLines:true})
      }.backgroundColor(Color.Green)
      Row(){
        Text('数字翻牌效果,只能单独使用数字展示 ')
        Text(this.count.toString()).fontSize(25).fontWeight(FontWeight.Bold).contentTransition(new NumericTextTransition({ flipDirection: FlipDirection.DOWN, enableBlur: true }))
          .onClick(()=>{
            this.count=0
          })
      }
      Row(){
        Text('居中显示文本       \n末尾空格       \n居中效果  ')
          .textAlign(TextAlign.Center)
      }.backgroundColor(Color.Yellow)
      Row(){
        Text('居中显示文本       \n末尾空格       \n居中效果  ')
          .textAlign(TextAlign.Center).optimizeTrailingSpace(true)
      }.backgroundColor(Color.Yellow)
      Text(){
        Span('HarmonyOS').fontSize(12)
        Span('开发笔记').fontSize(18)
        ImageSpan($r('app.media.icon128')).width(30).height(30)
        Span('默认垂直对齐方式')
      }
      Text(){
        Span('HarmonyOS').fontSize(12)
        Span('开发笔记').fontSize(18)
        ImageSpan($r('app.media.icon128')).width(30).height(30)
        Span('顶部垂直对齐方式')
      }.textVerticalAlign(TextVerticalAlign.TOP)

      Row(){
        Text('文本内容高度超过父容器').fontSize(25)
      }.backgroundColor(Color.Gray).height(10)
      Blank().height(20)
      Row(){
        Text('文本内容高度超过父容器').fontSize(25)
          .textContentAlign(TextContentAlign.CENTER)
      }.backgroundColor(Color.Gray).height(10)

      Row(){
        Text('描边和装饰线 ')
        Text(undefined,{controller:this.controller})
      }

    }.width('100%')
  }
  aboutToDisappear() {
    if (this.timerId > 0) {
      clearInterval(this.timerId)
      this.timerId = -1
    }
  }
}

想要了解更多详细内容，可以留言后面单独介绍