Text组件
Text显示一段文本
接口:
Text(content?: string | Resource)
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
content | string | Resource | 否 | 文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。 默认值:' ' |
属性:
除支持通用属性外,还支持以下属性:
名称 | 参数类型 | 描述 |
---|---|---|
textAlign | TextAlign | 设置文本段落在水平方向的对齐方式 默认值:TextAlign.Start 说明: 文本段落宽度占满Text组件宽度。 可通过align属性控制文本段落在垂直方向上的位置,此组件中不可通过align属性控制文本段落在水平方向上的位置,即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同,控制内容在顶部。Alignment.Start、Alignment.Center、Alignment.End效果相同,控制内容垂直居中。Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd效果相同,控制内容在底部。结合TextAlign属性可控制内容在水平方向的位置。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
textOverflow | {overflow: TextOverflow} | 设置文本超长时的显示方式。 默认值:{overflow: TextOverflow.Clip} 说明: 文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,可在字母间添加零宽空格:\u200B。 需配合maxLines使用,单独设置不生效。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
maxLines | number | 设置文本的最大行数。 说明: 默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。如果有多余的文本,可以通过 textOverflow来指定截断方式。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
lineHeight | string | number | Resource | 设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
decoration | { type: TextDecorationType, color?: ResourceColor } | 设置文本装饰线样式及其颜色。 默认值:{ type: TextDecorationType.None, color:Color.Black } 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
baselineOffset | number | string | 设置文本基线的偏移量,默认值0。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 设置该值为百分比时,按默认值显示。 |
letterSpacing | number | string | 设置文本字符间距。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 设置该值为百分比时,按默认值显示。 |
minFontSize | number | string | Resource | 设置文本最小显示字号。 需配合maxFontSize以及maxline或布局大小限制使用,单独设置不生效。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
maxFontSize | number | string | Resource | 设置文本最大显示字号。 需配合minFontSize以及maxline或布局大小限制使用,单独设置不生效。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
textCase | TextCase | 设置文本大小写。 默认值:TextCase.Normal 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
copyOption9+ | CopyOptions | 组件支持设置文本是否可复制粘贴。 默认值:CopyOptions.None 该接口支持在ArkTS卡片中使用。 说明: 设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice,长按文本,会弹出文本选择菜单,可选中文本并进行复制、全选操作。 |
字符串参数
@Entry
@Component
struct APage {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).width(200).height(200).backgroundColor(Color.Orange).fontSize(16).textAlign(TextAlign.Center)}.width('100%')}.height('100%')}
}
Resource参数
@Entry
@Component
struct APage {@State message: string = 'Hello World'build() {Row() {Column() {Text($r("app.string.module_desc")).fontSize(30).fontWeight(FontWeight.Bold).width(200).height(200).backgroundColor(Color.Orange).textAlign(TextAlign.Center)}.width('100%')}.height('100%')}
}
文本超出隐藏
textOverflow需要配合maxLines属性使用
@Entry
@Component
struct APage {@State message: string = 'Hello World'build() {Row() {Column() {Text("哈哈哈,今天天气真是不错呀!超级开心的").width(200).height(100).backgroundColor(Color.Orange).fontSize(20).textAlign(TextAlign.Center).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1)}.width('100%')}.height('100%')}
}
Span子组件
@Entry
@Component
struct APage {@State message: string = 'Hello World'build() {Row() {Column() {Text() {Span("¥").fontSize(30).fontWeight(FontWeight.Bold).fontColor("#f00")Span("200").fontSize(40).fontWeight(FontWeight.Bold).fontColor(Color.Blue)}}.width('100%')}.height('100%')}
}