文本

效果

子组件

包含 Span 组件,ImageSpan 组件,ContainerSpan 组件,SymbolSpan 组件

参数

• value:文本内容

属性

textAlign

文字是否居中

注意

1. Alignment.TopStart、Alignment.Top、Alignment.TopEnd：内容顶部对齐。

2. Alignment.Start、Alignment.Center、Alignment.End：内容垂直居中。

3. Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd：内容底部对齐。

textOverflow

设置文本超长时的显示方式。

• TextOverflow.Clip：裁剪文本。

• TextOverflow.Ellipsis：文本超长时，显示省略号。需要配合 maxLines 使用。

• TextOverflow.MARQUEE, 文本超长时，滚动显示文本。

@Entry
@Component
struct Index {
    @State message: string = '初始化初始化初始化初始化初始化初始化初始化初始化初始化初始化初始化初始化初始化';
    build() {
       Column(){
           Text(this.message)
               .width(200)
               .height(40)
               .backgroundColor(Color.Red)
               .fontColor(Color.Yellow)
               .textAlign(TextAlign.Center)
               .textOverflow({overflow:TextOverflow.Ellipsis})
               .maxLines(2)
       }
    }
}

maxLines

设置文本显示的最大行数。默认值为 1。

lineHeight

设置文本的文本行高

decoration

设置文本下划线样式及其颜色

• type:下划线类型，可选值：TextDecorationType.None、TextDecorationType.Underline、TextDecorationType.Overline、TextDecorationType.LineThrough

• color:下划线颜色

• style:下划线样式，可选值：TextDecorationStyle.SOLID、TextDecorationStyle.DASHED、TextDecorationStyle.DOTTED、TextDecorationStyle.DOUBLE、TextDecorationStyle.WAVY

  .decoration({
      type:TextDecorationType.Underline,
      color:Color.Blue,
      style:TextDecorationStyle.SOLID
  })

letterSpacing

设置文本字符间距

minFontSize

设置文本最小字体大小

maxFontSize

设置文本最大字体大小

textCase

设置文本大小写

• TextCase.Normal：正常大小写。

• TextCase.Lowercase：小写。

• TextCase.Uppercase：大写。

fontColor

字体颜色

fontSize

字体大小

fontStyle

设置字体样式, 倾斜之类的

fontWeight

设置字体粗细

fontFamily

设置字体

textIndent

设置首行文本缩进。

wordBreak

设置断行规则

• WordBreak.Normal：单词不换行，超出容器宽度时，单词会被截断。

• WordBreak.BreakAll：单词不换行，超出容器宽度时，单词会被截断。

• WordBreak.BreakWord：单词换行，超出容器宽度时，有标点的时候 优先标点,单词会被截断。

fontWeight

设置字体粗细

copyOption

是否支持复制文本功能

• CopyOptions.InApp 支持应用内复制

• CopyOptions.LocalDevice 支持本地设备复制

• CopyOptions.None 不支持复制

事件

onCopy

长按文本内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。目前文本复制仅支持文本。

 .onCopy((value:string)=>{
                   console.info(value)
               })

onTextSelectionChange

文本选择的位置发生变化时，触发该回调。

示例

基础版本

@Entry
@Component
struct Index {
    @State message: string = 'aaa初始化初始化初始化初始化初始化初始化初始化初始化初始化初始化初始化初始化初始化';

    build() {
       Column(){
           Text(this.message)
               .width(200)
               .height(140)
               .backgroundColor(Color.Red)
               .fontColor(Color.Yellow)
               .textAlign(TextAlign.Center)
               .textOverflow({overflow:TextOverflow.Ellipsis})
               .maxLines(4)
               .lineHeight(35)
               .decoration({
                   type:TextDecorationType.LineThrough,
                   color:Color.Blue,
                   style:TextDecorationStyle.DOUBLE
               })
               .letterSpacing(5)
               .textCase(TextCase.Normal)
               .fontStyle(FontStyle.Italic)
               .textIndent(50)
               .wordBreak(WordBreak.BREAK_ALL)
               .fontWeight(FontWeight.Bold)
               .copyOption(CopyOptions.InApp)
               .onCopy((value:string)=>{
                   console.info(value)
               })
               .onTextSelectionChange((start:number,end:number)=>{
                   console.info(start.toString())
                   console.info(end.toString())
               })

       }
    }
}

设置选中的复制

// xxx.ets
@Entry
@Component
struct TextExample5 {
  @State onCopy: string = '';
  @State text: string =
    'This is set selection to Selection text content This is set selection to Selection text content.';
  @State start: number = 0;
  @State end: number = 20;


  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
      Text(this.text)
        .fontSize(12)
        .border({ width: 1 })
        .lineHeight(20)
        .margin(30)
        .copyOption(CopyOptions.InApp)
        .selection(this.start, this.end)
        .onCopy((value: string) => {
          this.onCopy = value;
        })
        .draggable(true)
        .caretColor(Color.Red)
        .selectedBackgroundColor(Color.Grey)
        .enableHapticFeedback(true)
      Button('Set text selection')
        .margin({ left: 20 })
        .onClick(() => {
          // 变更文本选中起始点、终点
          this.start = 10;
          this.end = 30;
        })
      Text(this.onCopy).fontSize(12).margin(10).key('copy')
    }.height(600).width(335).padding({ left: 35, right: 35, top: 35 })
  }
}