【愚公系列】2023年12月 HarmonyOS教学课程 018-ArkUI组件（Text/Span）

举报
愚公搬代码 发表于 2023/12/31 19:19:55 2023/12/31
【摘要】 🏆 作者简介，愚公搬代码🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。🏆《近期荣誉》：2023年华为云十佳博主，2022年CSDN博客之星TOP2，2022年华为云十佳博主等。🏆《博客内容》：.NET、Java、...

🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。
🏆《近期荣誉》：2023年华为云十佳博主，2022年CSDN博客之星TOP2，2022年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀一、Text/Span

在HarmonyOS中，Text/Span组件是文本控件中的一个关键部分。Text控件可以用来显示文本内容，而Span只能作为Text组件的子组件显示文本内容。

Text/Span组件的用法非常简单和直观。我们可以通过Text组件来显示普通文本，也可以通过Span组件来实现。

🔎1.创建文本

语法说明：

Text(content?: string | Resource)

文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。

使用：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('我是一段文本')
      Text($r('app.string.module_desc'))
        .baselineOffset(0)
        .fontSize(30)
        .border({ width: 1 })
        .padding(10)
        .width(300)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🔎2.添加子组件

🦋2.1 Span

在文本处理中，Span通常用于表示文本中的一部分。例如，在一个字符串中找到一个单词，可以使用Span表示这个单词在字符串中的位置和大小。Span还可以用于对文本进行修改，例如替换一个单词或插入新的文本。

HarmonyOS中的Span也表示文本不过是嵌入Text中的

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('我是Text') {
        Span('我是Span')
      }
      .padding(10)
      .borderWidth(1)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🦋2.2 decoration

Span的decoration属性用于设置文字的装饰效果，可以取以下值：

  • Underline：下划线
  • LineThrough：删除线
  • Overline：上划线
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text() {
        Span('我是Span1，').fontSize(16).fontColor(Color.Grey)
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
        Span('我是Span2').fontColor(Color.Blue).fontSize(16)
          .fontStyle(FontStyle.Italic)
          .decoration({ type: TextDecorationType.Underline, color: Color.Black })
        Span('，我是Span3').fontSize(16).fontColor(Color.Grey)
          .decoration({ type: TextDecorationType.Overline, color: Color.Green })
      }
      .borderWidth(1)
      .padding(10)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🦋2.3 textCase

textCase设置文字一直保持大写或者小写状态

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text() {
        Span('I am Upper-span').fontSize(12)
          .textCase(TextCase.UpperCase).onClick(()=>{
            console.info('我是Span——onClick')
          })
      }
      .borderWidth(1)
      .padding(10)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🔎3.自定义文本样式

🦋3.1 textAlign

textAlign属性用于设置文本在其容器中的水平对齐方式。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('左对齐')
        .width(300)
        .textAlign(TextAlign.Start)
        .border({ width: 1 })
        .padding(10)
      Text('中间对齐')
        .width(300)
        .textAlign(TextAlign.Center)
        .border({ width: 1 })
        .padding(10)
      Text('右对齐')
        .width(300)
        .textAlign(TextAlign.End)
        .border({ width: 1 })
        .padding(10)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🦋3.2 textOverflow

textOverflow属性是添加的一个文本溢出属性，用于标识当元素的文本溢出其指定大小的容器时如何处理。textOverflow需配合maxLines一起使用（默认情况下文本自动折行）

@Entry
@Component
struct Index {
  build() {
    Column() {
      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.')
        .width(250)
        .textOverflow({ overflow: TextOverflow.None })
        .maxLines(1)
        .fontSize(12)
        .border({ width: 1 }).padding(10)
      Text('我是超长文本，超出的部分显示省略号。I am an extra long text, with ellipses displayed for any excess。')
        .width(250)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(1)
        .fontSize(12)
        .border({ width: 1 }).padding(10)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🦋3.3 lineHeight

lineHeight属性用于设置行高，即每行文本的高度。它可以用于任何元素，包括块级元素、行内元素和表格单元

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('This is the text with the line height set. This is the text with the line height set.')
        .width(300).fontSize(12).border({ width: 1 }).padding(10)
      Text('This is the text with the line height set. This is the text with the line height set.')
        .width(300).fontSize(12).border({ width: 1 }).padding(10)
        .lineHeight(20)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🦋3.4 decoration

decoration属性设置文本装饰线样式及其颜色，前面span介绍过就不介绍了

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('This is the text')
        .decoration({
          type: TextDecorationType.LineThrough,
          color: Color.Red
        })
        .borderWidth(1).padding(10).margin(5)
      Text('This is the text')
        .decoration({
          type: TextDecorationType.Overline,
          color: Color.Red
        })
        .borderWidth(1).padding(10).margin(5)
      Text('This is the text')
        .decoration({
          type: TextDecorationType.Underline,
          color: Color.Red
        })
        .borderWidth(1).padding(10).margin(5)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🦋3.5 baselineOffset

baselineOffset属性是用于控制行内元素基线位置的属性。它可以将元素相对于其父元素的基线位置向上或向下移动指定的距离，以满足垂直对齐的需求。该属性接受长度或百分比值作为参数。正值会将元素向上移动，负值会将元素向下移动。当使用百分比值时，该值会相对于元素自身的 fontSize 计算。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('This is the text content with baselineOffset 0.')
        .baselineOffset(0)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)
      Text('This is the text content with baselineOffset 30.')
        .baselineOffset(30)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)

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

在这里插入图片描述

🦋3.6 letterSpacing

letterSpacing属性用于设置文本中字母之间的间距。它可以接受一个值，这个值可以是小于或大于0的数字，也可以是正负百分比数值。正值会增加字符之间的距离，而负值则会减小它们之间的距离。如果没有使用该属性，字母之间的默认间距将由系统决定。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('This is the text content with letterSpacing 0.')
        .letterSpacing(0)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)
      Text('This is the text content with letterSpacing 3.')
        .letterSpacing(3)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)
      Text('This is the text content with letterSpacing -1.')
        .letterSpacing(-1)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🦋3.7 minFontSize与maxFontSize

minFontSize和maxFontSize是用于设置文本字体大小的属性。这两个属性指定了一个范围，使得当文本的尺寸调整时，字体大小的最小值不会小于minFontSize，最大值不会大于maxFontSize。这些属性通常与viewport相关，因为文本大小可能需要在不同的屏幕尺寸和分辨率下进行调整。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('我的最大字号为30，最小字号为5，宽度为250，maxLines为1')
        .width(250)
        .maxLines(1)
        .maxFontSize(30)
        .minFontSize(5)
        .border({ width: 1 })
        .padding(10)
        .margin(5)
      Text('我的最大字号为30，最小字号为5，宽度为250，maxLines为2')
        .width(250)
        .maxLines(2)
        .maxFontSize(30)
        .minFontSize(5)
        .border({ width: 1 })
        .padding(10)
        .margin(5)
      Text('我的最大字号为30，最小字号为15，宽度为250,高度为50')
        .width(250)
        .height(50)
        .maxFontSize(30)
        .minFontSize(15)
        .border({ width: 1 })
        .padding(10)
        .margin(5)
      Text('我的最大字号为30，最小字号为15，宽度为250,高度为100')
        .width(250)
        .height(100)
        .maxFontSize(30)
        .minFontSize(15)
        .border({ width: 1 })
        .padding(10)
        .margin(5)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🦋3.8 textCase

同span

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('This is the text content with textCase set to Normal.')
        .textCase(TextCase.Normal)
        .padding(10)
        .border({ width: 1 })
        .padding(10)
        .margin(5)

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

      // 文本全大写展示
      Text('This is the text content with textCase set to UpperCase.')
        .textCase(TextCase.UpperCase)
        .border({ width: 1 })
        .padding(10)
        .margin(5)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🦋3.9 copyOption

copyOption属性设置文本是否可复制粘贴

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("这是一段可复制文本")
        .fontSize(30)
        .copyOption(CopyOptions.InApp)
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🔎4.添加事件

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('点我')
        .onClick(()=>{
          console.info('我是Text的点击响应事件');
        })
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

🔎5.案例

热搜词条是指在某一特定时间内，搜索引擎或网站等平台上，被用户频繁搜索的关键词。通常这些关键词涵盖当下流行的话题、热门事件、名人八卦、产品销售等各方面，反映了当前社会热点和大众关注度的变化。热搜词条可以帮助我们了解当前社会舆论的走向、人们关注的焦点以及市场需求等。

案例：

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Text("1").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
        Text("我是热搜词条1")
          .fontSize(12)
          .fontColor(Color.Blue)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .fontWeight(300)
        Text("爆")
          .margin({ left: 6 })
          .textAlign(TextAlign.Center)
          .fontSize(10)
          .fontColor(Color.White)
          .fontWeight(600)
          .backgroundColor(0x770100)
          .borderRadius(5)
          .width(15)
          .height(14)
      }.width('100%').margin(5)

      Row() {
        Text("2").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
        Text("我是热搜词条2 我是热搜词条2 我是热搜词条2 我是热搜词条2 我是热搜词条2")
          .fontSize(12)
          .fontColor(Color.Blue)
          .fontWeight(300)
          .constraintSize({ maxWidth: 200 })
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        Text("热")
          .margin({ left: 6 })
          .textAlign(TextAlign.Center)
          .fontSize(10)
          .fontColor(Color.White)
          .fontWeight(600)
          .backgroundColor(0xCC5500)
          .borderRadius(5)
          .width(15)
          .height(14)
      }.width('100%').margin(5)

      Row() {
        Text("3").fontSize(14).fontColor(Color.Orange).margin({ left: 10, right: 10 })
        Text("我是热搜词条3")
          .fontSize(12)
          .fontColor(Color.Blue)
          .fontWeight(300)
          .maxLines(1)
          .constraintSize({ maxWidth: 200 })
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        Text("热")
          .margin({ left: 6 })
          .textAlign(TextAlign.Center)
          .fontSize(10)
          .fontColor(Color.White)
          .fontWeight(600)
          .backgroundColor(0xCC5500)
          .borderRadius(5)
          .width(15)
          .height(14)
      }.width('100%').margin(5)

      Row() {
        Text("4").fontSize(14).fontColor(Color.Grey).margin({ left: 10, right: 10 })
        Text("我是热搜词条4 我是热搜词条4 我是热搜词条4 我是热搜词条4 我是热搜词条4")
          .fontSize(12)
          .fontColor(Color.Blue)
          .fontWeight(300)
          .constraintSize({ maxWidth: 200 })
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      }.width('100%').margin(5)
    }.width('100%')
  }
}

在这里插入图片描述

🚀感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

在这里插入图片描述

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
5G教育 Git 容器
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入