鸿蒙5.0开发进阶：UI框架-ArkTS组件（属性字符串）

最新推荐文章于 2025-11-25 07:23:10 发布
原创 最新推荐文章于 2025-11-25 07:23:10 发布 · 807 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #鸿蒙系统 #前端 #ArkUI #ArkTS

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

属性字符串

方便灵活应用文本样式的对象，可通过TextController中的setStyledString方法与Text组件绑定，可通过RichEditorStyledStringController中的setStyledString方法与RichEditor组件绑定。

说明

从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

属性字符串目前不支持在worker线程中使用。

规则说明

  • 当组件样式和属性字符串中的样式冲突时，冲突部分以属性字符串设置的样式为准，未冲突部分则生效组件的样式。
  • 当属性字符串和Text子组件冲突时，属性字符串优先级高，即当Text组件中绑定了属性字符串，忽略Text组件下包含Span等子组件的情况。
  • 不支持@State修饰。

StyledString

constructor(value: string | ImageAttachment | CustomSpan , styles?: Array<StyleOptions>)

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

参数名类型必填说明
valuestring | ImageAttachment | CustomSpan是

属性字符串文本内容。

说明：

当value值为ImageAttachment或CustomSpan时，styles参数不生效。

stylesArray<StyleOptions>否

属性字符串初始化选项。

说明：

start为异常值时，按默认值0处理。

当start的值合法且length为异常值时，length的值为属性字符串长度与start的值的差值。

StyledStringKey与StyledStringValue不匹配时，不生效。

styledKey参数无默认值。

属性

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读可选说明
lengthnumber是否

属性字符串字符的长度。

说明：

当属性字符串中包含图片或者CustomSpan时，其返回的长度按1计算。

getString

getString(): string

获取字符串信息。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型说明
string

属性字符串文本内容。

说明：

当属性字符串中包含图片时，其返回的结果用空格表示。

equals

equals(other: StyledString): boolean

判断两个属性字符串是否相等。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
otherStyledString是StyledString类型的比较对象。

返回值：

类型说明
boolean

两个属性字符串是否相等。

说明：

当属性字符串的文本及样式均一致，视为相等。

不比较GestureStyle，当属性字符串配置了不同事件，文本和其他样式相同时，亦视为相等。

当比较CustomSpan时，比较的是地址，地址相等，视为相等。

subStyledString

获取属性字符串的子字符串。

subStyledString(start: number , length?: number): StyledString

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startnumber是子属性字符串开始位置的下标。
lengthnumber否子属性字符串的长度。

返回值：

类型说明
StyledString

子属性字符串。

说明：

当start为合法入参时，length的默认值是被查询属性字符串对象的长度与start的值的差。

当start和length越界或者必填传入undefined时，会抛出异常。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed.

getStyles

获取指定范围属性字符串的样式集合。

getStyles(start: number , length: number , styledKey?: StyledStringKey): Array<SpanStyle>

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startnumber是指定范围属性字符串的下标。
lengthnumber是指定范围属性字符串的长度。
styledKeyStyledStringKey否指定范围属性字符串样式的枚举值。

返回值：

类型说明
Array<SpanStyle>

各样式对象的数组。

说明：

当指定范围属性字符串未设置任何样式，则返回空数组。

当start和length越界或者必填传入undefined时，会抛出异常；

当styledKey传入异常值或undefined时，会抛出异常。

当styledKey为CustomSpan时，返回的是创建CustomSpan时传入的样式对象，即修改该样式对象也会影响实际的显示效果。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.

fromHtml

将HTML格式字符串转换成属性字符串，当前支持转换的HTML标签范围：<p>、<span>、<img>。仅支持将这三种标签中的style属性样式转换成对应的属性字符串样式。

static fromHtml(html: string): Promise<StyledString>

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
htmlstring是html格式的字符串。

返回值：

类型说明
StyledString属性字符串。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.

MutableStyledString

继承于StyledString类。

说明

当start和length越界或者必填传入undefined时，会抛出异常；

当styledKey和styledValue传入异常值或者两者对应关系不匹配时，会抛出异常。

replaceString

替换指定范围的字符串。

replaceString(start: number , length: number , other: string): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startnumber是指定范围的下标。
lengthnumber是指定范围的长度。
otherstring是

替换的新文本内容。

说明：

替换的字符串使用的是start位置字符的样式。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.

insertString

插入字符串。

insertString(start: number , other: string): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startnumber是插入位置的下标。
otherstring是

插入的新文本内容。

说明：

插入的字符串使用的是start-1位置字符的样式。若start-1位置字符未设置样式，则使用start位置字符样式。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.

removeString

移除指定范围的字符串。

当属性字符串中包含图片时，同样生效。

removeString(start: number , length: number): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startnumber是指定范围的下标。
lengthnumber是指定范围的长度。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.

replaceStyle

替换指定范围内容为指定类型新样式。

replaceStyle(spanStyle: SpanStyle): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
spanStyleSpanStyle是

样式对象。

说明：

默认清空原有样式，替换为新样式。

当SpanStyle的styledKey为IMAGE或CUSTOM_SPAN时，只有当start的位置当前是image或CustomSpan且长度为1，才会生效，其余情况无效果。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.

setStyle

为指定范围内容设置指定类型新样式。

setStyle(spanStyle: SpanStyle): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
spanStyleSpanStyle是

样式对象。

说明：

默认不清空原有样式，叠加新样式。若是已有样式，则更新。

当SpanStyle的styledKey为IMAGE或CUSTOM_SPAN时，只有当start的位置当前是image或者CustomSpan且长度为1，才会生效，其余情况无效果。

removeStyle

清除指定范围内容的指定类型样式。

被清空样式类型对象属性使用的是对应Text组件属性的设置值，若Text组件未设置值，则使用对应Text组件属性的默认值。

当属性字符串中包含图片时，同样生效。

removeStyle(start: number , length: number , styledKey: StyledStringKey): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startnumber是指定范围开始位置的下标。
lengthnumber是指定范围的长度。
styledKeyStyledStringKey是样式类型枚举值。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.

removeStyles

清除指定范围内容的所有样式。

被清空样式类型对象属性使用的是对应Text组件属性的设置值，若Text组件未设置值，则使用对应Text组件属性的默认值。

当属性字符串中包含图片时，同样生效。

removeStyles(start: number , length: number): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startnumber是指定范围开始位置的下标。
lengthnumber是指定范围的长度。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.

clearStyles

清除属性字符串对象的所有样式。

被清空样式类型对象属性使用的是对应Text组件属性的设置值，若Text组件未设置值，则使用对应Text组件属性的默认值。

clearStyles(): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

replaceStyledString

替换指定范围为新的属性字符串。

replaceStyledString(start: number , length: number , other: StyledString): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startnumber是指定范围开始位置的下标。
lengthnumber是指定范围的长度。
otherStyledString是新的属性字符串对象。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.

insertStyledString

在指定位置插入新的属性字符串。

insertStyledString(start: number , other: StyledString): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startnumber是开始插入位置的下标。
otherStyledString是新的属性字符串对象。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.

appendStyledString

在末尾位置追加新的属性字符串。

appendStyledString(other: StyledString): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
otherStyledString是新的属性字符串对象。

StyledStringValue

type StyledStringValue = TextStyle | DecorationStyle | BaselineOffsetStyle | LetterSpacingStyle |

TextShadowStyle | GestureStyle | ImageAttachment | ParagraphStyle | LineHeightStyle | UrlStyle | CustomSpan | UserDataSpan | BackgroundColorStyle

样式对象类型，用于设置属性字符串的样式。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型说明
TextStyle文本字体样式。
DecorationStyle文本装饰线样式。
BaselineOffsetStyle文本基线偏移量样式。
LetterSpacingStyle文本字符间距样式。
LineHeightStyle文本行高样式。
TextShadowStyle文本阴影样式。
GestureStyle事件手势样式。
ParagraphStyle文本段落样式。
ImageAttachment图片样式。
CustomSpan自定义绘制Span样式。
UserDataSpanUserDataSpan样式。

StyleOptions对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数名类型必填说明
startnumber否设置属性字符串样式的开始位置。
lengthnumber否设置属性字符串样式的长度。
styledKeyStyledStringKey是样式类型的枚举值。
styledValueStyledStringValue是样式对象。

SpanStyle对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数名类型必填说明
startnumber是匹配属性字符串样式的开始位置。
lengthnumber是匹配属性字符串样式的长度。
styledKeyStyledStringKey是样式类型的枚举值。
styledValueStyledStringValue是样式对象。

TextStyle

文本字体样式对象说明。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读必填说明
fontColorResourceColor是否获取属性字符串的文本颜色。
fontFamilystring是否获取属性字符串的文本字体。
fontSizenumber是否

获取属性字符串的文本字体大小。

单位：fp

fontWeightnumber是否获取属性字符串的文本字体粗细。
fontStyleFontStyle是否获取属性字符串的文本字体样式。

constructor

constructor(value?: TextStyleInterface)

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueTextStyleInterface否字体样式设置项。

TextStyleInterface对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数名类型必填说明
fontColorResourceColor否字体颜色。
fontFamilyResourceStr否文本字体。
fontSizeLengthMetrics否字体大小。如果LengthMetrics的unit值是percent，当前设置不生效，处理为16fp。
fontWeightnumber | FontWeight | string否字体粗细。
fontStyleFontStyle否字体样式。

GestureStyle

事件手势对象说明。

系统能力： SystemCapability.ArkUI.ArkUI.Full

constructor

constructor(value?: GestureStyleInterface)

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueGestureStyleInterface否事件设置项。

GestureStyleInterface对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数名类型必填说明
onClickCallBack<ClickEvent>否设置点击事件。
onLongPressCallBack<GestureEvent>否设置长按事件。

DecorationStyle

文本装饰线样式对象说明。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读必填说明
typeTextDecorationType是是获取属性字符串的文本装饰线类型。
colorResourceColor是否获取属性字符串的文本装饰线颜色。
styleTextDecorationStyle是否获取属性字符串的文本装饰线样式。

constructor

constructor(value: DecorationStyleInterface)

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueDecorationStyleInterface是文本装饰线设置项。

DecorationStyleInterface对象说明

参数名类型必填说明
typeTextDecorationType是装饰线类型。
colorResourceColor否装饰线颜色。
styleTextDecorationStyle否装饰线样式。

DecorationStyleResult

后端返回的文本装饰线样式信息。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
typeTextDecorationType是装饰线类型。
colorResourceColor是装饰线颜色。
styleTextDecorationStyle否装饰线样式。

BaselineOffsetStyle

文本基线偏移量对象说明。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读必填说明
baselineOffsetnumber是是

获取属性字符串的文本基线偏移量。

单位：vp

constructor

constructor(value: LengthMetrics)

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLengthMetrics是文本基线偏移量设置项。如果LengthMetrics的unit值是percent，该设置不生效。

LetterSpacingStyle

文本字符间距对象说明。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读必填说明
letterSpacingnumber是是

获取属性字符串的文本字符间距。

单位：vp

constructor

constructor(value: LengthMetrics)

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLengthMetrics是文本字符间距设置项。如果LengthMetrics的unit值是percent，该设置不生效。

LineHeightStyle

文本行高对象说明。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读必填说明
lineHeightnumber是是

获取属性字符串的文本行高。

单位：vp

constructor

constructor(lineHeight: LengthMetrics)

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
lineHeightLengthMetrics是文本行高设置项。如果LengthMetrics的value值不大于0时，不限制文本行高，自适应字体大小。

TextShadowStyle

文本阴影对象说明。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读必填说明
textShadowArray<ShadowOptions>是是获取属性字符串的文本阴影。

constructor

constructor(value: ShadowOptions | Array<ShadowOptions>)

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueShadowOptions | Array<ShadowOptions>是文本阴影设置项。

ImageAttachment

图片对象说明。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读必填说明
valuePixelMap是是获取属性字符串的图片数据源。
sizeSizeOptions是否获取属性字符串的图片尺寸。
verticalAlignImageSpanAlignment是否获取属性字符串的图片对齐方式。
objectFitImageFit是否获取属性字符串的图片缩放类型。
layoutStyleImageAttachmentLayoutStyle是否获取属性字符串的图片布局。

constructor

constructor(value: ImageAttachmentInterface)

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueImageAttachmentInterface是图片设置项。

ImageAttachmentInterface对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数名类型必填说明
valuePixelMap是设置图片数据源。
sizeSizeOptions否设置图片大小。
verticalAlignImageSpanAlignment否设置图片基于文本的对齐方式。
objectFitImageFit否设置图片的缩放类型。
layoutStyleImageAttachmentLayoutStyle否设置图片布局。

ImageAttachmentLayoutStyle对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数名类型必填说明
marginLengthMetrics | Margin否设置图片外边距。
paddingLengthMetrics | Padding否设置图片内边距。
borderRadiusLengthMetrics | BorderRadiuses否设置圆角。

CustomSpan

自定义绘制Span，仅提供基类，具体实现由开发者定义。

自定义绘制Span拖拽显示的缩略图为空白。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onMeasure

获取自定义绘制Span的尺寸大小。

abstract onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
measureInfoCustomSpanMeasureInfo是文本的字体大小。

返回值：

类型说明
CustomSpanMetrics

自定义绘制Span的尺寸信息。

说明：

最终的CustomSpan的高度是由当前Text组件的行高所决定的。当height不传值，则默认取Text组件的fontSize的值作为CustomSpan的高度；当height大于当前行的其他子组件的高度时，此时height即为Text组件的行高。

onDraw

绘制自定义绘制Span。

abstract onDraw(context: DrawContext, drawInfo: CustomSpanDrawInfo): void

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
contextDrawContext是

图形绘制上下文。

说明：

DrawContext的canvas方法获取的画布是Text组件的画布，绘制时不会超出Text组件的范围。

drawInfoCustomSpanDrawInfo是自定义绘制Span的绘制信息。

CustomSpanMeasureInfo对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数名类型必填说明
fontSizenumber是

设置文本字体大小。

单位：fp

CustomSpanMetrics对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数名类型必填说明
widthnumber是

自定义绘制Span的宽。

单位：vp

heightnumber否

自定义绘制Span的高。

单位：vp

CustomSpanDrawInfo对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数名类型必填说明
xnumber是

自定义绘制Span相对于挂载组件的偏移。

单位：px

lineTopnumber是

自定义绘制Span相对于Text组件的上边距。

单位：px

lineBottomnumber是

自定义绘制Span相对于Text组件的下边距。

单位：px

baselinenumber是

自定义绘制Span的所在行的基线偏移量。

单位：px

ParagraphStyle

文本段落样式对象说明。

除首个段落外，后续段落按'\n'划分。

每个段落的段落样式按首个占位设置的段落样式生效，未设置时，段落按被绑定组件的段落样式生效。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读必填说明
textAlignTextAlign是否获取属性字符串文本段落在水平方向的对齐方式。
textIndentnumber是否获取属性字符串文本段落的首行文本缩进。
maxLinesnumber是否获取属性字符串文本段落的最大行数。
overflowTextOverflow是否获取属性字符串文本段落超长时的显示方式。
wordBreakWordBreak是否获取属性字符串文本段落的断行规则。
leadingMarginnumber | LeadingMarginPlaceholder是否获取属性字符串文本段落的缩进。

说明

属性字符串的maxLines和overflow仅在Text中生效，建议在组件侧设置。

constructor

constructor(value?: ParagraphStyleInterface)

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueParagraphStyleInterface否段落样式设置项。

ParagraphStyleInterface对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数名类型必填说明
textAlignTextAlign否设置文本段落在水平方向的对齐方式。
textIndentLengthMetrics否设置文本段落的首行文本缩进。
maxLinesnumber否设置文本段落的最大行数。
overflowTextOverflow否

设置文本段落超长时的显示方式。

需配合maxLines使用，单独设置不生效。不支持TextOverflow.MARQUEE。

wordBreakWordBreak否设置文本段落的断行规则。
leadingMarginLengthMetrics | LeadingMarginPlaceholder否设置文本段落的缩进。

UserDataSpan

支持存储自定义扩展信息，用于存储和获取用户数据，仅提供基类，具体实现由开发者定义。

扩展信息不影响实际显示效果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

StyledStringKey枚举说明

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称说明
FONT字体样式键。TextStyle所属键。
DECORATION文本装饰线样式键。DecorationStyle所属键。
BASELINE_OFFSET文本基线偏移量样式键。BaselineOffsetStyle所属键。
LETTER_SPACING文本字符间距样式键。LetterSpacingStyle所属键。
LINE_HEIGHT文本行高样式键。LineHeightStyle所属键。
TEXT_SHADOW文本阴影样式键。TextShadowStyle所属键。
GESTURE事件手势键。GestureStyle所属键。
PARAGRAPH_STYLE段落样式键。ParagraphStyle所属键。
IMAGE图片键。ImageAttachment所属键。
CUSTOM_SPAN自定义绘制Span键。CustomSpan所属键。
USER_DATAUserDataSpan键。UserDataSpan所属键。

示例

示例1（属性字符串处理）

该示例通过insertString、removeStyles、replaceStyle、getStyles接口实现属性字符串的插入、删除、替换、查看。

// xxx.ets
@Entry
@Component
struct styled_string_demo1 {
  @State height1: number = 450;
  @State fontSize1: number = 16;
  @State fontWeight1: number = 400;
  @State color1: Color = Color.Blue;
  scroll: Scroller = new Scroller();
  fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Blue });
  fontStyleAttr2: StyledStringValue = new TextStyle({ fontColor: Color.Orange });
  // 创建可读写属性字符串的对象mutableStyledString1
  mutableStyledString1: MutableStyledString = new MutableStyledString("运动45分钟");
  // 创建构造入参有字符串和样式的对象mutableStyledString2
  mutableStyledString2: MutableStyledString = new MutableStyledString("test hello world", [{
    start: 0,
    length: 5,
    styledKey: StyledStringKey.FONT,
    styledValue: this.fontStyleAttr1
  }]);
  // 创建只读属性字符串对象styledString2
  styledString2: StyledString = new StyledString("运动45分钟");
  spanStyle1: SpanStyle = {
    start: 0,
    length: 5,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontColor: Color.Pink })
  };
  spanStyle2: SpanStyle = {
    start: 0,
    length: 2,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontColor: Color.Red })
  };
  @State string1: string = '';
  @State fontColor1: ResourceColor = Color.Red;
  controller1: TextController = new TextController();
  controller2: TextController = new TextController();
  controller3: TextController = new TextController();

  async onPageShow() {
    this.controller1.setStyledString(this.styledString2)
    this.controller2.setStyledString(this.mutableStyledString1)
    this.controller3.setStyledString(this.mutableStyledString2)
  }

  build() {
    Column() {
      Scroll(this.scroll) {
        Column() {
          // 显示属性字符串
          Text(undefined, { controller: this.controller1 })
          Text(undefined, { controller: this.controller3 }).key('mutableStyledString2')
          Button('修改string1的值')
            .onClick(() => {
              let result = this.mutableStyledString1.equals(this.styledString2);
              if (result) {
                this.string1 = this.mutableStyledString1.getString();
                console.info("mutableStyledString1 content:", this.mutableStyledString1.getString());
                console.info("mutableStyledString1 length:", this.mutableStyledString1.length);
              }
            })

          // 属性字符串与Span冲突时忽略Span,以及样式与Text组件属性未冲突部分生效Text设置的属性
          Text(undefined, { controller: this.controller2 }) {
            Span("span and styledString test")
              .fontColor(Color.Yellow)
              .decoration({ type: TextDecorationType.LineThrough })
            ImageSpan($r('app.media.icon'))
          }
          .key('styledString2')
          .fontColor(this.fontColor1)
          .letterSpacing(10)
          .fontSize(32)
          .fontWeight(600)
          .fontStyle(FontStyle.Italic)
          .lineHeight(30)
          .textShadow({ radius: 5, color: Color.Blue, offsetX: 5, offsetY: 5 })
          .textCase(TextCase.UpperCase)
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Yellow })
          .baselineOffset(2)
          .copyOption(CopyOptions.InApp)
          .margin({ top: 10 })
          .draggable(true)

          // 以上冲突测试对照组
          Text() {
            Span(this.string1)
              .fontColor(this.color1)
              .decoration({ type: TextDecorationType.LineThrough })
            ImageSpan($r('app.media.icon'))
              .width(50).height(50)
          }
          .letterSpacing(10)
          .fontSize(32)
          .fontWeight(600)
          .fontStyle(FontStyle.Italic)
          .lineHeight(30)
          .textShadow({ radius: 5, color: Color.Blue, offsetX: 5, offsetY: 5 })
          .textCase(TextCase.UpperCase)
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Yellow })
          .baselineOffset(2)

          Button('设置样式及替换文本')
            .onClick(() => {
              this.mutableStyledString1.replaceStyle({
                start: 2,
                length: 2,
                styledKey: StyledStringKey.FONT,
                styledValue: this.fontStyleAttr1
              })
              this.mutableStyledString1.insertString(0, "压力85偏高，")
              this.mutableStyledString1.setStyle({
                start: 2,
                length: 2,
                styledKey: StyledStringKey.FONT,
                styledValue: this.fontStyleAttr2
              })
              this.controller2.setStyledString(this.mutableStyledString1)
            })
            .margin({ top: 10 })

          Button('查询样式及清空样式')
            .onClick(() => {
              let styles = this.mutableStyledString1.getStyles(0, this.mutableStyledString1.length)
              if (styles.length == 2) {
                for (let i = 0; i < styles.length; i++) {
                  console.info('StyledString style object start:' + styles[i].start)
                  console.info('StyledString style object length:' + styles[i].length)
                  console.info('StyledString style object key:' + styles[i].styledKey)
                  if (styles[i].styledKey === 0) {
                    let fontAttr = styles[i].styledValue as TextStyle;
                    console.info('StyledString fontColor:' + fontAttr.fontColor)
                  }
                }
              }
              if (styles[0] !== undefined) {
                this.mutableStyledString2.setStyle(styles[0]);
                this.controller3.setStyledString(this.mutableStyledString2);
              }
              this.mutableStyledString1.removeStyles(2, 3);
              this.controller2.setStyledString(this.mutableStyledString1);
            })
            .margin({ top: 10 })
        }.width('100%')

      }
      .expandSafeArea([SafeAreaType.KEYBOARD])
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.On)
      .scrollBarColor(Color.Gray)
      .scrollBarWidth(10)
      .edgeEffect(EdgeEffect.None)
    }
    .width('100%')
  }
}

示例2（设置事件）

该示例通过styledKey、styledValue接口实现属性字符串绑定事件。

// xxx.ets
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct styled_string_demo2 {
  scroll: Scroller = new Scroller();
  fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Blue });
  clickGestureAttr: GestureStyle = new GestureStyle({
    onClick: () => {
      promptAction.showToast({ message: 'clickGestureAttr object trigger click event' })
      this.backgroundColor1 = Color.Yellow
    }
  })
  gestureStyleAttr: GestureStyle = new GestureStyle({
    onClick: () => {
      promptAction.showToast({ message: 'gestureStyleAttr object trigger click event' })
      this.backgroundColor1 = Color.Green
    },
    onLongPress: () => {
      promptAction.showToast({ message: 'gestureStyleAttr object trigger long press event' })
      this.backgroundColor1 = Color.Orange
    }
  });
  // 创建事件的对象mutableStyledString3
  mutableStyledString3: MutableStyledString = new MutableStyledString("hello world", [{
    start: 0,
    length: 5,
    styledKey: StyledStringKey.GESTURE,
    styledValue: this.clickGestureAttr
  },
    {
      start: 0,
      length: 5,
      styledKey: StyledStringKey.FONT,
      styledValue: this.fontStyleAttr1
    },
    {
      start: 6,
      length: 5,
      styledKey: StyledStringKey.GESTURE,
      styledValue: this.gestureStyleAttr
    },
    {
      start: 6,
      length: 5,
      styledKey: StyledStringKey.FONT,
      styledValue: new TextStyle({ fontColor: Color.Pink })
    }]);
  @State fontColor1: ResourceColor = Color.Red;
  @State backgroundColor1: ResourceColor | undefined = undefined;
  controller3: TextController = new TextController();

  async onPageShow() {
    this.controller3.setStyledString(this.mutableStyledString3)
  }

  build() {
    Column() {
      Scroll(this.scroll) {
        Column({ space: 30 }) {
          Button("响应属性字符串事件改变背景色").backgroundColor(this.backgroundColor1).width('80%')
          // 包含事件的属性字符串
          Text(undefined, { controller: this.controller3 }).fontSize(30)
            .copyOption(CopyOptions.InApp)
            .draggable(true)
            .clip(true)
        }.width('100%')
      }
      .expandSafeArea([SafeAreaType.KEYBOARD])
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.On)
      .scrollBarColor(Color.Gray)
      .scrollBarWidth(10)
      .edgeEffect(EdgeEffect.None)
    }
    .width('100%')
  }
}

示例3（设置文本样式）

该示例通过getStyles、setStyle接口实现属性字符串查询和设置样式。

// xxx.ets
import { LengthMetrics, LengthUnit } from '@kit.ArkUI'

@Entry
@Component
struct styled_string_demo3 {
  fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Blue });
  fontStyleAttr2: StyledStringValue = new TextStyle({
    fontColor: Color.Orange,
    fontSize: LengthMetrics.vp(20),
    fontWeight: FontWeight.Bolder,
    fontStyle: FontStyle.Italic,
    fontFamily: "Arial"
  });
  fontStyleAttr3: StyledStringValue = new TextStyle({
    fontColor: Color.Orange,
    fontSize: LengthMetrics.vp(20),
    fontWeight: FontWeight.Lighter,
    fontStyle: FontStyle.Italic,
    fontFamily: "Arial"
  });
  // 创建多重TextStyle样式的对象mutableStyledString1
  mutableStyledString1: MutableStyledString = new MutableStyledString("运动45分钟", [{
    start: 0,
    length: 2,
    styledKey: StyledStringKey.FONT,
    styledValue: this.fontStyleAttr3
  }, {
    start: 2,
    length: 2,
    styledKey: StyledStringKey.FONT,
    styledValue: this.fontStyleAttr2
  }
  ]);
  // 创建有多种样式组合对象mutableStyledString2
  mutableStyledString2: MutableStyledString = new MutableStyledString("test hello world", [{
    start: 0,
    length: 5,
    styledKey: StyledStringKey.FONT,
    styledValue: this.fontStyleAttr1
  }, {
    start: 0,
    length: 5,
    styledKey: StyledStringKey.DECORATION,
    styledValue: new DecorationStyle({ type: TextDecorationType.LineThrough, color: Color.Blue })
  }, {
    start: 0,
    length: 5,
    styledKey: StyledStringKey.TEXT_SHADOW,
    styledValue: new TextShadowStyle({
      radius: 5,
      type: ShadowType.COLOR,
      color: Color.Yellow,
      offsetX: 10,
      offsetY: -10
    })
  }, {
    start: 0,
    length: 5,
    styledKey: StyledStringKey.BASELINE_OFFSET,
    styledValue: new BaselineOffsetStyle(LengthMetrics.px(20))
  }, {
    start: 0,
    length: 5,
    styledKey: StyledStringKey.LETTER_SPACING,
    styledValue: new LetterSpacingStyle(new LengthMetrics(10, LengthUnit.VP))
  }, {
    start: 6,
    length: 5,
    styledKey: StyledStringKey.BASELINE_OFFSET,
    styledValue: new BaselineOffsetStyle(LengthMetrics.fp(10))
  }
  ]);
  @State fontColor1: ResourceColor = Color.Red;
  controller: TextController = new TextController();
  options: TextOptions = { controller: this.controller };
  controller2: TextController = new TextController();
  spanStyle1: SpanStyle = {
    start: 0,
    length: 5,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontColor: Color.Pink })
  };

  async onPageShow() {
    this.controller.setStyledString(this.mutableStyledString1)
    this.controller2.setStyledString(this.mutableStyledString2)
  }

  build() {
    Column() {
      Column({ space: 10 }) {
        // 显示配了字体各种样式的属性字符串，Text组件亦配置冲突部分生效属性字符串配置，未冲突区间生效Text组件属性设置值
        Text(undefined, this.options)
          .fontColor(this.fontColor1)
          .font({ size: 20, weight: 500, style: FontStyle.Normal })
        // 显示配置了文本阴影、划线、字符间距、基线偏移量的属性字符串，Text组件亦配置生效属性字符串配置
        Text(undefined, { controller: this.controller2 })
          .fontSize(30)
          .copyOption(CopyOptions.InApp)
          .draggable(true)
          .decoration({ type: TextDecorationType.Overline, color: Color.Pink })
          .textShadow({
            radius: 10,
            type: ShadowType.COLOR,
            color: Color.Green,
            offsetX: -10,
            offsetY: 10
          })
        Button('查询字体样式')
          .onClick(() => {
            let styles = this.mutableStyledString1.getStyles(0, this.mutableStyledString1.length)
            if (styles.length !== 0) {
              for (let i = 0; i < styles.length; i++) {
                console.info('mutableStyledString1 style object start:' + styles[i].start)
                console.info('mutableStyledString1 style object length:' + styles[i].length)
                console.info('mutableStyledString1 style object key:' + styles[i].styledKey)
                if (styles[i].styledKey === 0) {
                  let fontAttr = styles[i].styledValue as TextStyle;
                  console.info('mutableStyledString1 fontColor:' + fontAttr.fontColor)
                  console.info('mutableStyledString1 fontSize:' + fontAttr.fontSize)
                  console.info('mutableStyledString1 fontWeight:' + fontAttr.fontWeight)
                  console.info('mutableStyledString1 fontStyle:' + fontAttr.fontStyle)
                  console.info('mutableStyledString1 fontStyle:' + fontAttr.fontFamily)
                }
              }
            }
          })
          .margin({ top: 10 })
        Button('查询其他文本样式')
          .onClick(() => {
            let styles = this.mutableStyledString2.getStyles(0, this.mutableStyledString2.length)
            if (styles.length !== 0) {
              for (let i = 0; i < styles.length; i++) {
                console.info('mutableStyledString2 style object start:' + styles[i].start)
                console.info('mutableStyledString2 style object length:' + styles[i].length)
                console.info('mutableStyledString2 style object key:' + styles[i].styledKey)
                if (styles[i].styledKey === 1) {
                  let decoAttr = styles[i].styledValue as DecorationStyle;
                  console.info('mutableStyledString2 decoration type:' + decoAttr.type)
                  console.info('mutableStyledString2 decoration color:' + decoAttr.color)
                }
                if (styles[i].styledKey === 2) {
                  let baselineAttr = styles[i].styledValue as BaselineOffsetStyle;
                  console.info('mutableStyledString2 baselineOffset:' + baselineAttr.baselineOffset)
                }
                if (styles[i].styledKey === 3) {
                  let letterAttr = styles[i].styledValue as LetterSpacingStyle;
                  console.info('mutableStyledString2 letterSpacing:' + letterAttr.letterSpacing)
                }
                if (styles[i].styledKey === 4) {
                  let textShadowAttr = styles[i].styledValue as TextShadowStyle;
                  let shadowValues = textShadowAttr.textShadow;
                  if (shadowValues.length > 0) {
                    for (let j = 0; j < shadowValues.length; j++) {
                      console.info('mutableStyledString2 textShadow type:' + shadowValues[j].type);
                      console.info('mutableStyledString2 textShadow radius:' + shadowValues[j].radius);
                      console.info('mutableStyledString2 textShadow color:' + shadowValues[j].color);
                      console.info('mutableStyledString2 textShadow offsetX:' + shadowValues[j].offsetX);
                      console.info('mutableStyledString2 textShadow offsetY:' + shadowValues[j].offsetY);
                    }
                  }
                }
              }
            }
          })
          .margin({ top: 10 })
        Button('更新mutableStyledString1样式')
          .onClick(() => {
            this.mutableStyledString1.setStyle(this.spanStyle1)
            this.controller.setStyledString(this.mutableStyledString1)
          })
          .margin({ top: 10 })
      }.width('100%')
    }
    .width('100%')
  }
}

示例4（设置图片）

该示例通过ImageAttachment接口实现属性字符串设置图片。

// xxx.ets
import { image } from '@kit.ImageKit'
import { LengthMetrics } from '@kit.ArkUI'

@Entry
@Component
struct styled_string_demo4 {
  @State message: string = 'Hello World'
  imagePixelMap: image.PixelMap | undefined = undefined
  @State imagePixelMap3: image.PixelMap | undefined = undefined
  mutableStr: MutableStyledString = new MutableStyledString('123');
  controller: TextController = new TextController();
  mutableStr2: MutableStyledString = new MutableStyledString('This is set decoration line style to the mutableStr2', [{
    start: 0,
    length: 15,
    styledKey: StyledStringKey.DECORATION,
    styledValue: new DecorationStyle({
      type: TextDecorationType.Overline,
      color: Color.Orange,
      style: TextDecorationStyle.DOUBLE
    })
  }])

  async aboutToAppear() {
    console.info("aboutToAppear initial imagePixelMap")
    this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.icon'))
  }

  private async getPixmapFromMedia(resource: Resource) {
    let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
      bundleName: resource.bundleName,
      moduleName: resource.moduleName,
      id: resource.id
    })
    let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))
    let createPixelMap: image.PixelMap = await imageSource.createPixelMap({
      desiredPixelFormat: image.PixelMapFormat.RGBA_8888
    })
    await imageSource.release()
    return createPixelMap
  }

  build() {
    Row() {
      Column({ space: 5 }) {
        Text(undefined, { controller: this.controller })
          .copyOption(CopyOptions.InApp)
          .draggable(true)
          .fontSize(30)

        Button('设置图片')
          .onClick(() => {
            if (this.imagePixelMap !== undefined) {
              this.mutableStr = new MutableStyledString(new ImageAttachment({
                value: this.imagePixelMap,
                size: { width: 50, height: 50 },
                layoutStyle: { borderRadius: LengthMetrics.vp(10) },
                verticalAlign: ImageSpanAlignment.BASELINE,
                objectFit: ImageFit.Contain
              }))
              this.controller.setStyledString(this.mutableStr)
            }
          })

        Button('Image之Append')
          .onClick(() => {
            let str = new StyledString('123')
            this.mutableStr.appendStyledString(str)
            this.controller.setStyledString(this.mutableStr)
          })

        Button('Image之Insert 前')
          .onClick(() => {
            this.mutableStr.insertString(0, '123')
            this.controller.setStyledString(this.mutableStr)
          })

        Button('Image之Insert 后')
          .onClick(() => {
            this.mutableStr.insertString(1, '123')
            this.controller.setStyledString(this.mutableStr)
          })

        Button('Image之replace')
          .onClick(() => {
            this.mutableStr.replaceString(2, 5, "789")
            this.controller.setStyledString(this.mutableStr)
          })

        Button('Image之Get')
          .onClick(() => {
            let imageArray = this.mutableStr.getStyles(0, 1, StyledStringKey.IMAGE)
            for (let i = 0; i < imageArray.length; ++i) {
              console.info('mutableStr start ' + imageArray[i].start + ' length ' + imageArray[i].length + ' type ' + imageArray[i].styledKey)
              if (imageArray[i].styledKey === 300) {
                let attachment = imageArray[i].styledValue as ImageAttachment
                this.imagePixelMap3 = attachment.value
                console.info('mutableStr value ' + JSON.stringify(attachment.value))
                if (attachment.size !== undefined) {
                  console.info('mutableStr size width ' + attachment.size.width + ' height ' + attachment.size.height)
                }
                console.info('mutableStr vertical ' + attachment.verticalAlign)
                console.info('mutableStr fit ' + attachment.objectFit)
                if (attachment.layoutStyle !== undefined) {
                  let radius = attachment.layoutStyle.borderRadius as BorderRadiuses
                  console.info('mutableStr radius ' + JSON.stringify(radius))
                }
              }

            }
          })

        Image(this.imagePixelMap3).width(50).height(50)

      }
      .width('100%')
    }
    .height('100%')
  }
}

示例5（设置文本行高和段落样式）

该示例通过LineHeightStyle、ParagraphStyle接口实现属性字符串设置文本行高和段落样式。

import { LengthMetrics } from '@kit.ArkUI'
const canvasWidth = 1000
const canvasHeight = 100
class LeadingMarginCreator {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(canvasWidth, canvasHeight)
  private offContext: OffscreenCanvasRenderingContext2D = this.offscreenCanvas.getContext("2d", this.settings)
  public static instance: LeadingMarginCreator = new LeadingMarginCreator()

  public genSquareMark(fontSize: number): PixelMap {
    this.offContext = this.offscreenCanvas.getContext("2d", this.settings)
    this.clearCanvas()
    const coordinate = fontSize * (1 - 1 / 1.5) / 2
    const sideLength = fontSize / 1.5
    this.offContext.fillRect(coordinate, coordinate, sideLength, sideLength)
    return this.offContext.getPixelMap(0, 0, fontSize, fontSize)
  }

  private clearCanvas() {
    this.offContext.clearRect(0, 0, canvasWidth, canvasHeight)
  }
}
@Entry
@Component
struct Index {
  private leadingMarkCreatorInstance = LeadingMarginCreator.instance
  leadingMarginPlaceholder1: LeadingMarginPlaceholder = {
    pixelMap: this.leadingMarkCreatorInstance.genSquareMark(24),
    size:[15, 15]
  }
  titleParagraphStyleAttr: ParagraphStyle = new ParagraphStyle({ textAlign: TextAlign.Center });
  //第一段落首行缩进15vp
  paragraphStyleAttr1: ParagraphStyle = new ParagraphStyle({ textIndent: LengthMetrics.vp(15) });
  //第二段落缩进15vp且首行有placeholder占位显示
  paragraphStyleAttr2: ParagraphStyle = new ParagraphStyle({ textAlign: TextAlign.Start, leadingMargin:  this.leadingMarginPlaceholder1 });
  //第三段落不设置缩进配置最大行数及超长显示方式
  paragraphStyleAttr3: ParagraphStyle = new ParagraphStyle({ textAlign: TextAlign.End, maxLines: 1, wordBreak: WordBreak.BREAK_ALL, overflow: TextOverflow.Ellipsis});
  //行高样式对象
  lineHeightStyle1: LineHeightStyle= new LineHeightStyle(new LengthMetrics(24));
  //创建含段落样式的对象paragraphStyledString1
  paragraphStyledString1: StyledString = new StyledString("段落标题\n正文第一段落开始0123456789正文第一段落结束\n正文第二段落开始hello world正文第二段落结束\n正文第三段落ABCDEFGHIJKLMNOPQRSTUVWXYZ。", [
    {
      start: 0,
      length: 4,
      styledKey: StyledStringKey.PARAGRAPH_STYLE,
      styledValue: this.titleParagraphStyleAttr
    },
    {
      start: 0,
      length: 4,
      styledKey: StyledStringKey.LINE_HEIGHT,
      styledValue: new LineHeightStyle(new LengthMetrics(50))
    },{
    start: 0,
    length: 4,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontSize: LengthMetrics.vp(24), fontWeight: FontWeight.Bolder })
  },
    {
      start: 5,
      length: 3,
      styledKey: StyledStringKey.PARAGRAPH_STYLE,
      styledValue: this.paragraphStyleAttr1
    },
    {
      start: 5,
      length: 20,
      styledKey: StyledStringKey.LINE_HEIGHT,
      styledValue: this.lineHeightStyle1
    },
    {
      start: 32,
      length: 5,
      styledKey: StyledStringKey.PARAGRAPH_STYLE,
      styledValue: this.paragraphStyleAttr2
    },
    {
      start: 32,
      length: 20,
      styledKey: StyledStringKey.LINE_HEIGHT,
      styledValue: this.lineHeightStyle1
    },
    {
      start: 60,
      length: 5,
      styledKey: StyledStringKey.PARAGRAPH_STYLE,
      styledValue: this.paragraphStyleAttr3
    },
    {
      start: 60,
      length: 5,
      styledKey: StyledStringKey.LINE_HEIGHT,
      styledValue: this.lineHeightStyle1
    }
  ]);
  controller: TextController = new TextController();
  async onPageShow() {
    this.controller.setStyledString(this.paragraphStyledString1)
  }

  build() {
    Row() {
      Column( { space : 5 }) {
        Text(undefined, { controller: this.controller })
          .width(240)
          .borderWidth(1)
          .copyOption(CopyOptions.InApp)
          .draggable(true)

        //查询段落样式
        Text()
          .onClick(() => {
            let styles = this.paragraphStyledString1.getStyles(0, this.paragraphStyledString1.length)
            if (styles.length !== 0) {
              for (let i = 0; i < styles.length; i++) {
                console.info('paragraphStyledString1 style object start:' + styles[i].start)
                console.info('paragraphStyledString1 style object length:' + styles[i].length)
                console.info('paragraphStyledString1 style object key:' + styles[i].styledKey)
                if (styles[i].styledKey === 200) {
                  let paraAttr = styles[i].styledValue as ParagraphStyle;
                  console.info('paragraphStyledString1 textAlign:' + paraAttr.textAlign)
                  console.info('paragraphStyledString1 textIndent:' + paraAttr.textIndent)
                  console.info('paragraphStyledString1 maxLines:' + paraAttr.maxLines)
                  console.info('paragraphStyledString1 wordBreak:' + paraAttr.wordBreak)
                  console.info('paragraphStyledString1 leadingMargin:' + paraAttr.leadingMargin)
                  console.info('paragraphStyledString1 overflow:' + paraAttr.overflow)
                }
              }
            }
          })
          .margin({ top: 10 })
      }
      .width('100%')
    }
    .height('100%')
  }
}

示例6（设置自定义绘制Span）

该示例通过CustomSpan接口实现属性字符串设置自定义绘制Span。

// xxx.ets
import { drawing } from '@kit.ArkGraphics2D'
import { image } from '@kit.ImageKit'
import { LengthMetrics } from '@kit.ArkUI'

class MyCustomSpan extends CustomSpan {
  constructor(word: string, width: number, height: number) {
    super();
    this.word = word;
    this.width = width;
    this.height = height;
  }

  onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics {
    return { width: this.width, height: this.height };
  }

  onDraw(context: DrawContext, options: CustomSpanDrawInfo) {
    let canvas = context.canvas;

    const brush = new drawing.Brush();
    brush.setColor({ alpha: 255, red: 0, green: 74, blue: 175 });
    const font = new drawing.Font();
    font.setSize(25);
    const textBlob = drawing.TextBlob.makeFromString(this.word, font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
    canvas.attachBrush(brush);
    canvas.drawRect({
      left: options.x + 10,
      right: options.x + vp2px(this.width) - 10,
      top: options.lineTop + 10,
      bottom: options.lineBottom - 10
    });

    brush.setColor({ alpha: 255, red: 23, green: 169, blue: 141 });
    canvas.attachBrush(brush);
    canvas.drawTextBlob(textBlob, options.x + 20, options.lineBottom - 15);
    canvas.detachBrush();
  }

  setWord(word: string) {
    this.word = word;
  }

  width: number = 160;
  word: string = "drawing";
  height: number = 10;
}

@Entry
@Component
struct styled_string_demo6 {
  customSpan2: MyCustomSpan = new MyCustomSpan("change", 130, 10);
  customSpan1: MyCustomSpan = new MyCustomSpan("Hello", 80, 10);
  customSpan3: MyCustomSpan = new MyCustomSpan("World", 80, 40);
  style2: MutableStyledString = new MutableStyledString(this.customSpan2);
  style1: MutableStyledString = new MutableStyledString(this.customSpan1);
  textStyle: MutableStyledString = new MutableStyledString("123");
  textController: TextController = new TextController();
  imagePixelMap: image.PixelMap | undefined = undefined;
  isPageShow: boolean = true;

  private async getPixmapFromMedia(resource: Resource) {
    let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
      bundleName: resource.bundleName,
      moduleName: resource.moduleName,
      id: resource.id
    });
    let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength));
    let createPixelMap: image.PixelMap = await imageSource.createPixelMap({
      desiredPixelFormat: image.PixelMapFormat.RGBA_8888,
      desiredSize: { width: 50, height: 50 }
    });
    await imageSource.release();
    return createPixelMap;
  }

  async onPageShow() {
    if (!this.isPageShow) {
      return
    }
    this.isPageShow = false;

    this.style1.appendStyledString(new MutableStyledString("文本绘制 示例代码 CustomSpan", [
      {
        start: 0,
        length: 5,
        styledKey: StyledStringKey.FONT,
        styledValue: new TextStyle({ fontColor: Color.Pink })
      }, {
      start: 5,
      length: 5,
      styledKey: StyledStringKey.FONT,
      styledValue: new TextStyle({ fontColor: Color.Orange, fontStyle: FontStyle.Italic })
    }, {
      start: 10,
      length: 500,
      styledKey: StyledStringKey.FONT,
      styledValue: new TextStyle({ fontColor: Color.Green, fontWeight: FontWeight.Bold })
    }
    ]))
    this.style1.appendStyledString(new StyledString(this.customSpan3))
    this.style1.appendStyledString(new StyledString("自定义绘制", [{
      start: 0,
      length: 5,
      styledKey: StyledStringKey.FONT,
      styledValue: new TextStyle({ fontColor: Color.Green, fontSize: LengthMetrics.px(50) })
    }]))
    this.textController.setStyledString(this.style1)
    this.imagePixelMap = await this.getPixmapFromMedia($r('sys.media.ohos_ic_public_voice')).then()
  }

  build() {
    Row() {
      Column() {
        Text(undefined, { controller: this.textController })
          .copyOption(CopyOptions.InApp)
          .fontSize(30)
      }
      .width('100%')
    }
    .height('100%')
  }
}

示例7（支持存储自定义扩展信息）

该示例通过UserDataSpan接口实现属性字符串支持存储自定义扩展信息的功能。

// xxx.ets
class MyUserDateSpan extends UserDataSpan {
  constructor(name: string, age: number) {
    super()
    this.name = name
    this.age = age
  }

  name: string
  age: number
}

@Entry
@Component
struct styled_string_demo7 {
  @State name: string = "world"
  @State age: number = 10
  controller: TextController = new TextController()
  styleString: MutableStyledString = new MutableStyledString("hello world", [{
    start: 0,
    length: 11,
    styledKey: StyledStringKey.USER_DATA,
    styledValue: new MyUserDateSpan("hello", 21)
  }])

  onPageShow(): void {
    this.controller.setStyledString(this.styleString)
  }

  build() {
    Column() {
      Text(undefined, { controller: this.controller })
      Button("get user data").onClick(() => {
        let arr = this.styleString.getStyles(0, this.styleString.length)
        let userDataSpan = arr[0].styledValue as MyUserDateSpan
        this.name = userDataSpan.name
        this.age = userDataSpan.age
      })
      Text("name:" + this.name + "  age: " + this.age)
    }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 })
  }
}

鸿蒙Harmony开发：文本样式之属性字符串（StyledString/MutableStyledString）
asf147852的博客
08-04 1804
可以通过多种方式更改文本，包括修改字号、添加字体颜色、使文本可点击以及自定义方式绘制文本等。
鸿蒙5.0进阶开发：UI开发-属性字符串（StyledString/MutableStyledString）
AyomQAQ的博客
12-22 1153
将StyledString应用到文本组件上，可以采用多种方式修改文本，包括调整字号、添加字体颜色、使文本具备可点击性，以及通过自定义方式绘制文本等。
鸿蒙开发之字典、数组、字符串基本操作(持续更新...)
qq_33067629的博客
05-16 2673
鸿蒙开发知识点
鸿蒙开发中，判断一个数字是否为数字的方法
m0_55538696的博客
01-07 2077
在JavaScript中，NaN（Not a Number）是一个特殊的值，表示非数字。当一个数字被赋值为NaN后，它将无法再被改变。关键字：是否为NaN JavaScript TypeScript ArkTS 鸿蒙开发 HarmonyOS开发 判断数字类型。由于这些特殊性质，一旦一个数字被赋值为NaN，它就无法再通过常规的算术运算或比较操作来改变其值了。isNaN()返回一个布尔值，表示一个值是否为保留值NaN（非数字）。我们想要根据文本框中的内容设置图片的宽度大小，先要获取输入框中的内容。
鸿蒙5.0版开发：ArkTS组件-属性字符串
m0_69424697的博客
11-14 1578
方便灵活应用文本样式的对象，可通过TextController中的setStyledString方法与Text组件绑定
鸿蒙5.0开发进阶：UI框架-ArkTS组件（TextClock）
Androidbye的博客
01-20 970
TextClock组件通过文本将当前系统时间显示在设备上。
鸿蒙5.0开发进阶：UI框架-ArkTS组件（RichEditor）
Androidbye的博客
01-13 1033
支持图文混排和文本交互式编辑的组件。
鸿蒙5.0开发进阶：UI框架-ArkTS组件（Badge）
Androidbye的博客
01-17 811
信息标记组件，可以附加在单个组件上用于信息提醒的容器组件。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（颜色渐变）
Androidbye的博客
12-23 1210
设置组件的颜色渐变效果。
（HarmonyOS5.0） 华为鸿蒙开发学习实战教程
2501_93207838的博客
09-01 1265
《HarmonyOS5.0实战学习指南》摘要 本文介绍了基于HarmonyOS5.0开发"个人健康助手"应用的完整教程。首先详细讲解了开发环境搭建和SDK配置，强调版本兼容性。核心内容包括：基础功能开发（数据展示、目标管理）、HarmonyOS5.0新特性集成（状态管理增强、分布式能力、元服务卡片）以及项目优化测试（性能、兼容性、自动化测试）。教程采用项目驱动方式，通过健康数据同步、多设备协同等场景展示5.0特性应用，并提供了性能优化方案和测试策略。最后总结了开发经验，提出了功能扩展建议
鸿蒙5.0【OpenHarmony】应用全局的UI状态存储：AppStorage
2401_82772199的博客
08-24 1209
AppStorage是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。 和AppStorage不同的是，LocalStorage是页面级的，通常应用于页面内的数据共享。而AppStorage是应用级的全局状态共享，还相当于整个应用的“中枢”，[持久化数据PersistentStorage]和[环境变量Environment]都是通过AppStorage中转，才可以和UI交互。
【鸿蒙实战开发】HarmonyOS应用开发性能优化入门引导
HarmonyOS007的博客
07-28 1374
这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
OpenHarmony开发指南：ArkUI组件集合规范
DMZDAMS的博客
07-21 1315
本示例为ArkUI中组件、通用、动画、全局方法的集合。
鸿蒙 equals 的使用
weixin_43325149的博客
12-23 1163
MutableStyledString 继承于 StyledString ，所有这个字符串对象才有equals 方法。equals对对象StyledString才有效果。这里的意思其实就是说 这很明显不相等 ，所以就报错。这个的话就可以直接比较两个string类型的数据。判断字符串可用“==”和“equals”但是：如果这样写就不行。
鸿蒙Qt字体实战：消灭“豆腐块“乱码与自定义字体加载
小淼淼的博客
11-23 545
Qt应用移植到鸿蒙系统时常见中文字体显示为方框（"豆腐块"）问题，主要原因是系统字体回退失败或自定义字体加载路径错误。解决方案包括：显式指定系统字体、将字体文件拷贝到沙箱目录再加载、在QML中正确使用FontLoader引用字体名称。此外还需注意High DPI适配问题，通过设置环境变量或手动调整缩放因子来优化字体渲染效果。建议打包开源中文字体随App发布，确保字体在不同设备上都能正常显示。
鸿蒙Cordova开发踩坑记录：LocalStorage的“失忆症“
小淼淼的博客
11-24 674
摘要：本文揭示了鸿蒙混合开发中LocalStorage数据丢失问题，发现应用更新或重签名会导致沙箱重建，使WebView存储目录失效。为解决该问题，提出基于Native Preferences的持久化方案：1）封装NativeStorage插件通过JSBridge与前端交互；2）采用双写策略同步LocalStorage与Native存储；3）启动时实施数据迁移确保兼容性。同时强调避免存储大对象、保持签名一致及合理控制flush时机等注意事项。最终建议采用"LocalStorage+Preferen
【HarmonyOS 6】在UI控件上滑动也会触发onClick点击事件？
路漫漫亦无涯
11-24 93
HarmonyOS 6开发中遇到滑动触发onClick事件的问题，原因是滑动后抬起手指会触发默认点击事件。从API12开始，onClick新增distanceThreshold参数可设置移动阈值，当手指移动超过该阈值时点击识别失败。解决方案是在onClick中添加distanceThreshold参数并设置为1vp，这样轻微滑动就不会误触发点击事件。本文通过示例代码演示了问题复现和解决方法，提醒开发者注意API新特性的使用。
HarmonyOS在智能穿戴中的生物识别
最新发布
2509_93942294的博客
11-25 354
系统能通过这些细微的、节律性的变化，不仅确认“是你”，还能推断出你的情绪压力水平、睡眠阶段甚至潜在的健康风险。举个例子，手表采集到你的心电原始数据，可以通过分布式软总线，安全地流转到你的手机上进行更复杂的算法分析（比如房颤筛查），分析结果再回流到手表显示。心电的波形，特别是P波、QRS波群、T波的形态、间隔和幅度，是比心率更为复杂和个性化的生物标识。无缝身份认证： 系统可以综合你的心率模式、活动状态等连续生物特征，在你拿起手机或靠近电脑时，实现无感的自动解锁，真正做到“你就是密码”。
HarmonyOS 跨设备迁移与协同：深入技术实现与创新应用
不懂先生的博客
11-25 85
HarmonyOS 的分布式架构是其实现跨设备迁移与协同的基石。它基于“一次开发，多端部署”的理念，通过分布式软总线、分布式数据管理和分布式任务调度三大核心组件，构建了一个虚拟的“超级终端”。跨设备迁移的典型流程包括：设备发现、迁移触发、状态序列化、数据传输和状态恢复。整个过程由系统自动管理，开发者只需实现关键回调。设备发现：通过获取附近可用的设备列表。迁移触发：用户通过手势（如拖拽）或系统事件发起迁移。状态序列化：应用将当前状态（如 UI 状态、变量值）序列化为可传输的数据。数据传输。
鸿蒙5.0版开发：ArkTS组件通用属性（触摸热区设置）
08-21
在 HarmonyOS 5.0 的 ArkTS 组件中，设置触摸热区（Touch Area）属性可以通过组件的 `touchable` 和 `hitTestBehavior` 等属性来实现。这些属性允许开发者定义组件响应触摸事件的区域和行为。 ### 配置触摸热区属性...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值