鸿蒙OpenHarmony【属性字符串】ArkTS文本与输入

最新推荐文章于 2025-02-18 20:27:28 发布
最新推荐文章于 2025-02-18 20:27:28 发布
阅读量511 收藏 4
点赞数 5
分类专栏： dd 文章标签： harmonyos 鸿蒙 鸿蒙系统 ui 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asfn123123/article/details/143667372
版权

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

说明

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

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

规则说明

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

StyledString

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

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

参数：

参数名参数类型必填参数描述
valuestring[ImageAttachment][CustomSpan])
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

参数：

参数名类型必填说明
other[StyledString]是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

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

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

参数：

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

返回值：

类型说明
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标签范围：

、、。仅支持将这三种标签中的style属性样式转换成对应的属性字符串样式。

static fromHtml(html: string): Promise

元服务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

参数：

参数名类型必填说明
spanStyle[SpanStyle]是样式对象。**说明：**默认清空原有样式，替换为新样式。当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

参数：

参数名类型必填说明
spanStyle[SpanStyle]是样式对象。**说明：**默认不清空原有样式，叠加新样式。若是已有样式，则更新。当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是指定范围的长度。
styledKey[StyledStringKey]是样式类型枚举值。
错误码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是指定范围的长度。
other[StyledString]是新的属性字符串对象。
错误码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是开始插入位置的下标。
other[StyledString]是新的属性字符串对象。
错误码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

参数：

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

StyleOptions对象说明

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

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

SpanStyle对象说明

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

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

TextStyle

文本字体样式对象说明。

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

属性

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

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

名称类型只读必填说明
fontColor[ResourceColor]是否获取属性字符串的文本颜色。
fontFamilystring是否获取属性字符串的文本字体。
fontSizenumber是否获取属性字符串的文本字体大小。单位：fp
fontWeightnumber是否获取属性字符串的文本字体粗细。
fontStyle[FontStyle]是否获取属性字符串的文本字体样式。

constructor

constructor(value?: TextStyleInterface)

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

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

参数：

参数名类型必填说明
value[TextStyleInterface]否字体样式设置项。

TextStyleInterface对象说明

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

参数名类型必填说明
fontColor[ResourceColor]否字体颜色。
fontFamily[ResourceStr]否文本字体。
fontSize[LengthMetrics]否字体大小。如果LengthMetrics的unit值是percent，当前设置不生效，处理为16fp。
fontWeightnumber[FontWeight]string
fontStyle[FontStyle]否字体样式。

GestureStyle

事件手势对象说明。

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

constructor

constructor(value?: GestureStyleInterface)

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

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

参数：

参数名类型必填说明
value[GestureStyleInterface]否事件设置项。

GestureStyleInterface对象说明

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

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

DecorationStyle

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

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

属性

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

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

名称类型只读必填说明
type[TextDecorationType]是是获取属性字符串的文本装饰线类型。
color[ResourceColor]是否获取属性字符串的文本装饰线颜色。
style[TextDecorationStyle]是否获取属性字符串的文本装饰线样式。

constructor

constructor(value: DecorationStyleInterface)

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

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

参数：

参数名类型必填说明
value[DecorationStyleInterface]是文本装饰线设置项。

DecorationStyleInterface对象说明

参数名类型必填说明
type[TextDecorationType]是装饰线类型。
color[ResourceColor]否装饰线颜色。
style[TextDecorationStyle]否装饰线样式。

DecorationStyleResult

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

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

参数：

参数名类型必填说明
type[TextDecorationType]是装饰线类型。
color[ResourceColor]是装饰线颜色。
style[TextDecorationStyle]否装饰线样式。

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

参数：

参数名类型必填说明
value[LengthMetrics]是文本基线偏移量设置项。如果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

参数：

参数名类型必填说明
value[LengthMetrics]是文本字符间距设置项。如果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

参数：

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

TextShadowStyle

文本阴影对象说明。

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

属性

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

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

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

constructor

constructor(value: ShadowOptions | Array)

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

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

参数：

参数名类型必填说明
value[ShadowOptions]Array<[ShadowOptions]>是

ImageAttachment

图片对象说明。

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

属性

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

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

名称类型只读必填说明
value[PixelMap]是是获取属性字符串的图片数据源。
size[SizeOptions]是否获取属性字符串的图片尺寸。
verticalAlign[ImageSpanAlignment]是否获取属性字符串的图片对齐方式。
objectFit[ImageFit]是否获取属性字符串的图片缩放类型。
layoutStyle[ImageAttachmentLayoutStyle]是否获取属性字符串的图片布局。

constructor

constructor(value: ImageAttachmentInterface)

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

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

参数：

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

ImageAttachmentInterface对象说明

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

参数名类型必填说明
value[PixelMap]是设置图片数据源。
size[SizeOptions]否设置图片大小。
verticalAlign[ImageSpanAlignment]否设置图片基于文本的对齐方式。
objectFit[ImageFit]否设置图片的缩放类型。
layoutStyle[ImageAttachmentLayoutStyle]否设置图片布局。

ImageAttachmentLayoutStyle对象说明

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

参数名类型必填说明
margin[LengthMetrics][Margin]否
padding[LengthMetrics][Padding]否
borderRadius[LengthMetrics][BorderRadiuses]否

CustomSpan

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

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

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

onMeasure

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

abstract onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics

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

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

参数：

参数名类型必填说明
measureInfo[CustomSpanMeasureInfo]是文本的字体大小。

返回值：

类型说明
[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

参数：

参数名类型必填说明
context[DrawContext]是图形绘制上下文。**说明：**DrawContext的canvas方法获取的画布是Text组件的画布，绘制时不会超出Text组件的范围。
drawInfo[CustomSpanDrawInfo]是自定义绘制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

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

说明

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

constructor

constructor(value?: ParagraphStyleInterface)

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

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

参数：

参数名类型必填说明
value[ParagraphStyleInterface]否段落样式设置项。

ParagraphStyleInterface对象说明

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

参数名类型必填说明
textAlign[TextAlign]否设置文本段落在水平方向的对齐方式。
textIndent[LengthMetrics]否设置文本段落的首行文本缩进。
maxLinesnumber否设置文本段落的最大行数。
overflow[TextOverflow]否设置文本段落超长时的显示方式。需配合maxLines使用，单独设置不生效。不支持TextOverflow.MARQUEE。
wordBreak[WordBreak]否设置文本段落的断行规则。
leadingMargin[LengthMetrics][LeadingMarginPlaceholder]否

UserDataSpan

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

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

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

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

StyledStringKey12+枚举说明

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

系统能力： 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

属性字符串接口基本使用示例

// 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

属性字符串支持事件接口示例

// 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

属性字符串支持文本样式接口示例

// 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

属性字符串图片接口使用示例

// 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使用示例

// 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 })
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

OpenHarmony/HarmonyOS文本通用属性
坚果的博客
03-29 1万+
文本通用属性目前只针对包含文本元素的组件，设置文本样式。之所以单独列出来就是因为它的使用实在是太普遍了，所以有必要列出来。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：文本通用）
m0_64420071的博客
03-05 3536
ArkTS声明式开发（通用属性：文本通用）
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：尺寸设置）
m0_64420071的博客
03-01 4903
ArkTS声明式开发（通用属性：尺寸设置）
HarmonyOS NEXT实战开发：边框设置
hanyanyou的博客
07-21 1467
设置组件边框样式。
鸿蒙中属性stateStyles样式不生效的问题
最新发布
J57504839的博客
02-18 159
可以看到我normal样式这样写语法也是通过的，但是是不生效的，换成链式编程后生效。但是我这里写一个聚焦失焦切换样式切换的例子，但是并没有生效，我想到的是这几个问题。这个出问题的小伙伴可能是写法错了，但是编译器也没有报错，问了Al他也漏了细节。1.链式编程focusable和stateStyle先后问题，换顺序后无效。2.直接赋值不行，要在操作中进行切换布尔值，转接了无效。3.点击事件没有生效？加了控制台也排除这个问题了。大家可以动手复刻一下，知道的话可以告诉我。4.鸿蒙底层样式冲突？
鸿蒙5.0版开发：ArkTS基础组件（TextArea）
m0_69424697的博客
09-21 1578
多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。
HarmonyOS Next开发学习手册——焦点事件
maniuT的博客
07-05 1420
由组件自定义的走焦算法，规格由组件定义。
鸿蒙Harmony开发：文本样式之属性字符串（StyledString/MutableStyledString）
asf147852的博客
08-04 1702
可以通过多种方式更改文本，包括修改字号、添加字体颜色、使文本可点击以及自定义方式绘制文本等。
鸿蒙OpenHarmony【TextInput】ArkTS文本与输入
asfn123123的博客
11-08 1641
单行文本输入框组件。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：RichText）
m0_64420071的博客
03-12 1625
ArkTS声明式开发（基础手势：RichText）
鸿蒙OpenHarmony【富文本（RichEditor）】 ArkUI
adsjgfjha123123的博客
12-17 887
RichEditor通过调用接口来创建，可以创建以下两种类型
HarmonyOS实战开发：UI应用框架-文本组件公共接口
2401_84917132的博客
08-21 1041
小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的。
鸿蒙5.0版开发：ArkTS基础组件（Text）
m0_69424697的博客
09-21 1641
显示一段文本的组件。
鸿蒙5.0版开发：ArkTS组件通用属性（尺寸设置）
m0_73088370的博客
08-26 1589
用于设置组件的宽高、边距。
鸿蒙ArkTS声明式组件：【TextClock】
2401_82772199的博客
07-02 889
TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示，最高精度到秒级。该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Text）
m0_64420071的博客
03-13 2807
ArkTS声明式开发（基础手势：Text）
OpenHarmony3.2 打开txt文件，中文内容乱码问题
donghaifeng_2010blog的博客
03-04 157
鸿蒙应用程序开发项目 美食杰app （提供源代码以及图片资源）
m0_73641260的博客
07-18 2666
本项目基于鸿蒙开发工具DevEco Studio 实现，利用ArkTS开发语言完成设计。DevEco Studio下载链接点击下载，一直默认操作就行项目效果演示 demo demo 登入页面 代码 demo 由于采用Tabs()组件，故所有页面代码写都在一个文件里 demo 推荐页 demo demo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值