4.1：文本组件

Text 是显示文本的基础组件之一，它可以包含子组件 Span ，当包含 Span 时不生效，只显示 Span 的内容。

4.1.1：Text定义介绍

interface TextInterface {
  (content?: string | Resource): TextAttribute;
}

• content：要显示的文本内容，一个简单的例子如下：

  Text("Hello, OpenHarmony")
  
  Text('Hello, OpenHarmony')
    .width('100%')
    .textAlign(TextAlign.Center)
  
  Text('Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony')
    .maxLines(1)
    .textOverflow({overflow: TextOverflow.Ellipsis})
  

  样例运行结果如下图所示：

  

4.1.2：Text属性介绍

declare class TextAttribute extends CommonMethod<TextAttribute> {
  fontColor(value: ResourceColor): TextAttribute;
  fontSize(value: number | string | Resource): TextAttribute;
  minFontSize(value: number | string | Resource): TextAttribute;
  maxFontSize(value: number | string | Resource): TextAttribute;
  fontStyle(value: FontStyle): TextAttribute;
  fontWeight(value: number | FontWeight | string): TextAttribute;
  textAlign(value: TextAlign): TextAttribute;
  lineHeight(value: number | string | Resource): TextAttribute;
  textOverflow(value: { overflow: TextOverflow }): TextAttribute;
  fontFamily(value: string | Resource): TextAttribute;
  maxLines(value: number): TextAttribute;
  decoration(value: { type: TextDecorationType; color?: ResourceColor }): TextAttribute;
  letterSpacing(value: number | string): TextAttribute;
  textCase(value: TextCase): TextAttribute;
  baselineOffset(value: number | string): TextAttribute;
}

• textAlign：设置文本的对其方式，对齐参考系是 Text 组件本身，只有 Text 组件本身的宽度大于文本内容长度， textAlign 属性才起作用， TextAlign 定义了以下 3 种类型：

  • Start（默认值）：根据文字书写相同的方向对齐，比如中文从左往右排版，那么文本则靠左对齐。

  • Center：文本居中对齐。

  • End：根据文字书写相反的方向对齐，比如中文从左往右排版，那么文本则靠右对齐。

    简单样例如下所示：

  Text("Hello, OpenHarmony")
    .backgroundColor('#aabbcc')
    .textAlign(TextAlign.Center) // 宽度等于文本内容长度，textAlign不起作用
  
  Text('Hello, OpenHarmony')
    .backgroundColor('#ccaabb')
    .margin({top: 2})
    .width(200)                  // 宽度大于文本内容长度，textAlign起作用
    .textAlign(TextAlign.End)
  
  Text('Hello, OpenHarmony')
    .backgroundColor('#bbccaa')
    .margin({top: 2})
    .width('100%')               // 宽度大于文本内容长度，textAlign起作用
    .textAlign(TextAlign.Center)
  

  样例运行结果如下图所示：

  

• maxLines、textOverflow：设置文本显示的最大行数和截取方式，默认折行显示不截取，如果设置了此参数，则文本最多显示到指定的行，如果有多余的文本，可以通过 textOverflow 来指定截取方式，本样例的截断方式是 Ellipsis ，它将截断后的文本用 "..." 表示。

  Text('Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony')
  Text('Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony')
    .margin({top: 5})
    .maxLines(1)
    .textOverflow({overflow: TextOverflow.Ellipsis})
  

  样例运行结果如下图所示：

  

• fontSize、fontColor、fontStyle、 fontWeight：分别表示设置文字的大小，颜色，样式以及粗细，我们可以组合起来设置文本的富样式，先看一个样例：

  Text('Hello, OpenHarmony')
  
  Text('Hello, OpenHarmony')
    .fontSize(20)
    .fontColor('#ff0000')
    .fontWeight(FontWeight.Bold)
    .fontStyle(FontStyle.Italic)
    .decoration({type: TextDecorationType.Underline, color: Color.Black})
  

  样例运行结果如下图所示：

  

  本样例中使用的 decoration 表示给文本添加装饰线，本样例使用的样式为 Underline ，其它样式请读者自行查看文档介绍。

(adsbygoogle = window.adsbygoogle || []).push({});