鸿蒙HarmonyOS实战-ArkUI组件（Text Span）_鸿蒙中text和span的区别是什么

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新HarmonyOS鸿蒙全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注鸿蒙）

正文

.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)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

Row() {
Text(“2”).fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
Text(“我是热搜词条2 我是热搜词条2 我是热搜词条2 我是热搜词条2 我是热搜词条2”)
.fontSize(12)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）
[外链图片转存中…(img-wsEIxuis-1713443856618)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！