文本顯示（Text/Span）

2024-01-25 13:15 更新

Text是文本組件，通常用于展示用戶的視圖，如顯示文章的文字。具體用法可參考Text。

創(chuàng)建文本

Text可通過(guò)以下兩種方式來(lái)創(chuàng)建：

  • string字符串
    1. Text('我是一段文本')

  • 引用Resource資源

    資源引用類型可以通過(guò)$r創(chuàng)建Resource類型對(duì)象，文件位置為/resources/base/element/string.json。

    1. Text($r('app.string.module_desc'))
    2.   .baselineOffset(0)
    3.   .fontSize(30)
    4.   .border({ width: 1 })
    5.   .padding(10)
    6.   .width(300)

添加子組件

Span只能作為Text組件的子組件顯示文本內(nèi)容。可以在一個(gè)Text內(nèi)添加多個(gè)Span來(lái)顯示一段信息，例如產(chǎn)品說(shuō)明書、承諾書等。

  • 創(chuàng)建Span。

    Span組件需要寫到Text組件內(nèi)，單獨(dú)寫Span組件不會(huì)顯示信息，Text與Span同時(shí)配置文本內(nèi)容時(shí)，Span內(nèi)容覆蓋Text內(nèi)容。

    1. Text('我是Text') {
    2.   Span('我是Span')
    3. }
    4. .padding(10)
    5. .borderWidth(1)

  • 設(shè)置文本裝飾線及顏色。

    通過(guò)decoration設(shè)置文本裝飾線及顏色。

    1. Text() {
    2.   Span('我是Span1，').fontSize(16).fontColor(Color.Grey)
    3.     .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
    4.   Span('我是Span2').fontColor(Color.Blue).fontSize(16)
    5.     .fontStyle(FontStyle.Italic)
    6.     .decoration({ type: TextDecorationType.Underline, color: Color.Black })
    7.   Span('，我是Span3').fontSize(16).fontColor(Color.Grey)
    8.     .decoration({ type: TextDecorationType.Overline, color: Color.Green })
    9. }
    10. .borderWidth(1)
    11. .padding(10)

  • 通過(guò)textCase設(shè)置文字一直保持大寫或者小寫狀態(tài)。
    1. Text() {
    2.   Span('I am Upper-span').fontSize(12)
    3.     .textCase(TextCase.UpperCase)
    4. }
    5. .borderWidth(1)
    6. .padding(10)

  • 添加事件。

    由于Span組件無(wú)尺寸信息，事件僅支持點(diǎn)擊事件onClick。

    1. Text() {
    2.   Span('I am Upper-span').fontSize(12)
    3.     .textCase(TextCase.UpperCase)
    4.     .onClick(()=>{
    5.       console.info('我是Span——onClick')
    6.     })
    7. }

自定義文本樣式

  • 通過(guò)textAlign屬性設(shè)置文本對(duì)齊樣式。
    1. Text('左對(duì)齊')
    2.   .width(300)
    3.   .textAlign(TextAlign.Start)
    4.   .border({ width: 1 })
    5.   .padding(10)
    6. Text('中間對(duì)齊')
    7.   .width(300)
    8.   .textAlign(TextAlign.Center)
    9.   .border({ width: 1 })
    10.   .padding(10)
    11. Text('右對(duì)齊')
    12.   .width(300)
    13.   .textAlign(TextAlign.End)
    14.   .border({ width: 1 })
    15.   .padding(10)

  • 通過(guò)textOverflow屬性控制文本超長(zhǎng)處理，textOverflow需配合maxLines一起使用（默認(rèn)情況下文本自動(dòng)折行）。
    1. Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
    2.   .width(250)
    3.   .textOverflow({ overflow: TextOverflow.None })
    4.   .maxLines(1)
    5.   .fontSize(12)
    6.   .border({ width: 1 }).padding(10)
    7. Text('我是超長(zhǎng)文本，超出的部分顯示省略號(hào)。I am an extra long text, with ellipses displayed for any excess。')
    8.   .width(250)
    9.   .textOverflow({ overflow: TextOverflow.Ellipsis })
    10.   .maxLines(1)
    11.   .fontSize(12)
    12.   .border({ width: 1 }).padding(10)

  • 通過(guò)lineHeight屬性設(shè)置文本行高。
    1. Text('This is the text with the line height set. This is the text with the line height set.')
    2.   .width(300).fontSize(12).border({ width: 1 }).padding(10)
    3. Text('This is the text with the line height set. This is the text with the line height set.')
    4.   .width(300).fontSize(12).border({ width: 1 }).padding(10)
    5.   .lineHeight(20)

  • 通過(guò)decoration屬性設(shè)置文本裝飾線樣式及其顏色。
    1. Text('This is the text')
    2.   .decoration({
    3.     type: TextDecorationType.LineThrough,
    4.     color: Color.Red
    5.   })
    6.   .borderWidth(1).padding(10).margin(5)
    7. Text('This is the text')
    8.   .decoration({
    9.     type: TextDecorationType.Overline,
    10.     color: Color.Red
    11.   })
    12.   .borderWidth(1).padding(10).margin(5)
    13. Text('This is the text')
    14.   .decoration({
    15.     type: TextDecorationType.Underline,
    16.     color: Color.Red
    17.   })
    18.   .borderWidth(1).padding(10).margin(5)

  • 通過(guò)baselineOffset屬性設(shè)置文本基線的偏移量。
    1. Text('This is the text content with baselineOffset 0.')
    2.   .baselineOffset(0)
    3.   .fontSize(12)
    4.   .border({ width: 1 })
    5.   .padding(10)
    6.   .width('100%')
    7.   .margin(5)
    8. Text('This is the text content with baselineOffset 30.')
    9.   .baselineOffset(30)
    10.   .fontSize(12)
    11.   .border({ width: 1 })
    12.   .padding(10)
    13.   .width('100%')
    14.   .margin(5)
    15. 

    16. Text('This is the text content with baselineOffset -20.')
    17.   .baselineOffset(-20)
    18.   .fontSize(12)
    19.   .border({ width: 1 })
    20.   .padding(10)
    21.   .width('100%')
    22.   .margin(5)

  • 通過(guò)letterSpacing屬性設(shè)置文本字符間距。
    1. Text('This is the text content with letterSpacing 0.')
    2.   .letterSpacing(0)
    3.   .fontSize(12)
    4.   .border({ width: 1 })
    5.   .padding(10)
    6.   .width('100%')
    7.   .margin(5)
    8. Text('This is the text content with letterSpacing 3.')
    9.   .letterSpacing(3)
    10.   .fontSize(12)
    11.   .border({ width: 1 })
    12.   .padding(10)
    13.   .width('100%')
    14.   .margin(5)
    15. Text('This is the text content with letterSpacing -1.')
    16.   .letterSpacing(-1)
    17.   .fontSize(12)
    18.   .border({ width: 1 })
    19.   .padding(10)
    20.   .width('100%')
    21.   .margin(5)

  • 通過(guò)minFontSize與maxFontSize自適應(yīng)字體大小，minFontSize設(shè)置文本最小顯示字號(hào)，maxFontSize設(shè)置文本最大顯示字號(hào)，minFontSize與maxFontSize必須搭配同時(shí)使用，以及需配合maxline或布局大小限制一起使用，單獨(dú)設(shè)置不生效。
    1. Text('我的最大字號(hào)為30，最小字號(hào)為5，寬度為250，maxLines為1')
    2.   .width(250)
    3.   .maxLines(1)
    4.   .maxFontSize(30)
    5.   .minFontSize(5)
    6.   .border({ width: 1 })
    7.   .padding(10)
    8.   .margin(5)
    9. Text('我的最大字號(hào)為30，最小字號(hào)為5，寬度為250，maxLines為2')
    10.   .width(250)
    11.   .maxLines(2)
    12.   .maxFontSize(30)
    13.   .minFontSize(5)
    14.   .border({ width: 1 })
    15.   .padding(10)
    16.   .margin(5)
    17. Text('我的最大字號(hào)為30，最小字號(hào)為15，寬度為250,高度為50')
    18.   .width(250)
    19.   .height(50)
    20.   .maxFontSize(30)
    21.   .minFontSize(15)
    22.   .border({ width: 1 })
    23.   .padding(10)
    24.   .margin(5)
    25. Text('我的最大字號(hào)為30，最小字號(hào)為15，寬度為250,高度為100')
    26.   .width(250)
    27.   .height(100)
    28.   .maxFontSize(30)
    29.   .minFontSize(15)
    30.   .border({ width: 1 })
    31.   .padding(10)
    32.   .margin(5)

  • 通過(guò)textCase屬性設(shè)置文本大小寫。
    1. Text('This is the text content with textCase set to Normal.')
    2.   .textCase(TextCase.Normal)
    3.   .padding(10)
    4.   .border({ width: 1 })
    5.   .padding(10)
    6.   .margin(5)
    7. 

    8. // 文本全小寫展示
    9. Text('This is the text content with textCase set to LowerCase.')
    10.   .textCase(TextCase.LowerCase)
    11.   .border({ width: 1 })
    12.   .padding(10)
    13.   .margin(5)
    14. 

    15. // 文本全大寫展示
    16. Text('This is the text content with textCase set to UpperCase.')
    17.   .textCase(TextCase.UpperCase)
    18.   .border({ width: 1 })
    19.   .padding(10)
    20.   .margin(5)

  • 通過(guò)copyOption屬性設(shè)置文本是否可復(fù)制粘貼。
    1. Text("這是一段可復(fù)制文本")
    2.   .fontSize(30)
    3.   .copyOption(CopyOptions.InApp)

添加事件

Text組件可以添加通用事件，可以綁定onClick、onTouch等事件來(lái)響應(yīng)操作。

  1. Text('點(diǎn)我')
  2.   .onClick(()=>{
  3.       console.info('我是Text的點(diǎn)擊響應(yīng)事件');
  4.    })

場(chǎng)景示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextExample {
  5.   build() {
  6.     Column() {
  7.       Row() {
  8.         Text("1").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
  9.         Text("我是熱搜詞條1")
  10.           .fontSize(12)
  11.           .fontColor(Color.Blue)
  12.           .maxLines(1)
  13.           .textOverflow({ overflow: TextOverflow.Ellipsis })
  14.           .fontWeight(300)
  15.         Text("爆")
  16.           .margin({ left: 6 })
  17.           .textAlign(TextAlign.Center)
  18.           .fontSize(10)
  19.           .fontColor(Color.White)
  20.           .fontWeight(600)
  21.           .backgroundColor(0x770100)
  22.           .borderRadius(5)
  23.           .width(15)
  24.           .height(14)
  25.       }.width('100%').margin(5)
  26. 

  27.       Row() {
  28.         Text("2").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
  29.         Text("我是熱搜詞條2 我是熱搜詞條2 我是熱搜詞條2 我是熱搜詞條2 我是熱搜詞條2")
  30.           .fontSize(12)
  31.           .fontColor(Color.Blue)
  32.           .fontWeight(300)
  33.           .constraintSize({ maxWidth: 200 })
  34.           .maxLines(1)
  35.           .textOverflow({ overflow: TextOverflow.Ellipsis })
  36.         Text("熱")
  37.           .margin({ left: 6 })
  38.           .textAlign(TextAlign.Center)
  39.           .fontSize(10)
  40.           .fontColor(Color.White)
  41.           .fontWeight(600)
  42.           .backgroundColor(0xCC5500)
  43.           .borderRadius(5)
  44.           .width(15)
  45.           .height(14)
  46.       }.width('100%').margin(5)
  47. 

  48.       Row() {
  49.         Text("3").fontSize(14).fontColor(Color.Orange).margin({ left: 10, right: 10 })
  50.         Text("我是熱搜詞條3")
  51.           .fontSize(12)
  52.           .fontColor(Color.Blue)
  53.           .fontWeight(300)
  54.           .maxLines(1)
  55.           .constraintSize({ maxWidth: 200 })
  56.           .textOverflow({ overflow: TextOverflow.Ellipsis })
  57.         Text("熱")
  58.           .margin({ left: 6 })
  59.           .textAlign(TextAlign.Center)
  60.           .fontSize(10)
  61.           .fontColor(Color.White)
  62.           .fontWeight(600)
  63.           .backgroundColor(0xCC5500)
  64.           .borderRadius(5)
  65.           .width(15)
  66.           .height(14)
  67.       }.width('100%').margin(5)
  68. 

  69.       Row() {
  70.         Text("4").fontSize(14).fontColor(Color.Grey).margin({ left: 10, right: 10 })
  71.         Text("我是熱搜詞條4 我是熱搜詞條4 我是熱搜詞條4 我是熱搜詞條4 我是熱搜詞條4")
  72.           .fontSize(12)
  73.           .fontColor(Color.Blue)
  74.           .fontWeight(300)
  75.           .constraintSize({ maxWidth: 200 })
  76.           .maxLines(1)
  77.           .textOverflow({ overflow: TextOverflow.Ellipsis })
  78.       }.width('100%').margin(5)
  79.     }.width('100%')
  80.   }
  81. }
  82.

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)