鸿蒙界面开发——组件（6）：属性字符串（StyledString）文本输入

news2024/12/25 10:35:19

属性字符串StyledString/MutableStyledString

MutableStyledString继承于StyledString，以下统一简称StyledString。
是功能强大的标记对象，可用于字符或段落级别设置文本样式。
通过将StyledString附加到文本组件，可以通过多种方式更改文本，包括修改字号、添加字体颜色、使文本可点击以及自定义方式绘制文本等。
方便灵活应用文本样式的对象，可通过TextController（Text组件的控制器）中的setStyledString方法与Text组件绑定，
可通过RichEditorStyledStringController中的setStyledString方法与RichEditor组件绑定。

可以通过TextController提供的setStyledString(StyledString)方法将属性字符串附加到文本组件，并推荐在onPageShow中触发绑定，在aboutToAppear中调用setStyledString无法实现页面初始即可见属性字符串文本内容，因为aboutToAppear运行时组件还没有完成创建并成功挂载节点树。

styledString: StyledString = new StyledString("运动45分钟")

controller: TextController = new TextController()

this.controller.setStyledString(this.StyledString)  触发绑定或更新属性字符串。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
async onPageShow() {//在onPageShow中触发绑定
 this.controller.setStyledString(this.styledString)
}

规则说明

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

StyledString 对象？

constructor(value: string | ImageAttachment | CustomSpan , styles?: Array<StyleOptions>)
styledString: StyledString = new StyledString("运动45分钟")

value string | ImageAttachment | CustomSpan 是属性字符串文本内容。
说明：当value值为ImageAttachment或CustomSpan时，styles参数不生效。

styles Array<StyleOptions> 否属性字符串初始化选项。
说明：start为异常值时，按默认值0处理。
当start的值合法且length为异常值时，length的值为属性字符串长度与start的值的差值。
StyledStringKey与StyledStringValue不匹配时，不生效。styledKey参数无默认值。

StyleOptions对象说明
参数名类型必填说明
start number 否设置属性字符串样式的开始位置。
length number 否设置属性字符串样式的长度。

styledKey StyledStringKey 是样式类型的枚举值。
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_DATA UserDataSpan键。UserDataSpan所属键。
详细学习如何创建这些对象：here

styledValue StyledStringValue 是样式对象。属性字符串目前提供了TextStyle、TextShadowStyle、DecorationStyle、BaselineOffsetStyle、LineHeightStyle、LetterSpacingStyle各种Style对象来实现设置文本的各类样式。

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

StyledString 属性

getString(): string获取字符串信息。
equals(other: StyledString): boolean 判断两个属性字符串是否相等。
获取属性字符串的子字符串。subStyledString(start: number , length?: number): StyledString
获取指定范围属性字符串的样式集合。getStyles(start: number , length: number , styledKey?: StyledStringKey): Array
static fromHtml(html: string): Promise 将HTML格式字符串转换成属性字符串，当前支持转换的HTML标签范围：< p>、< span>、< img>。仅支持将这三种标签中的style属性样式转换成对应的属性字符串样式。

设置文本样式

属性字符串目前提供了TextStyle、TextShadowStyle、DecorationStyle、BaselineOffsetStyle、LineHeightStyle、LetterSpacingStyle各种Style对象来实现设置文本的各类样式。

textStyleAttrs: TextStyle = new TextStyle({ fontWeight: FontWeight.Bolder, fontSize: LengthMetrics.vp(24), fontStyle: FontStyle.Italic })
mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟 目标达成", [
  {
    start: 2,
    length: 2,
    styledKey: StyledStringKey.FONT, //StyledStringKey 样式类型的枚举值 StyledStringKey.FONT是字体样式键。TextStyle所属键。
    styledValue: this.textStyleAttrs
  },
  {
    start: 7,
    length: 4,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontColor: Color.Orange, fontSize: LengthMetrics.vp(12)})
  }
]);

在这里插入图片描述

MutableStyledString 可变的属性字符串

继承于StyledString类。经常用的是MutableStyledString，更丰富的属性方法？。

替换指定范围的字符串。replaceString(start: number , length: number , other: string): void
插入字符串。insertString(start: number , other: string): void
移除指定范围的字符串。removeString(start: number , length: number): void 当属性字符串中包含图片时，同样生效。
替换指定范围内容为指定类型新样式。replaceStyle(spanStyle: SpanStyle): void
为指定范围内容设置指定类型新样式。setStyle(spanStyle: SpanStyle): void
拓：SpanStyle的参数说明同StyleOptions

 spanStyle: SpanStyle = {
   start: 0,
   length: 5,
   styledKey: StyledStringKey.FONT,
   styledValue: new TextStyle({ fontColor: Color.Pink })
 };
 
 this.mutableStyledString.setStyle(this.spanStyle)

清除指定范围内容的指定类型样式。removeStyle(start: number , length: number , styledKey: StyledStringKey): void
被清空样式类型对象属性使用的是对应Text组件属性的设置值，若Text组件未设置值，则使用对应Text组件属性的默认值。当属性字符串中包含图片时，同样生效。
removeStyles(start: number , length: number): void
清除属性字符串对象的所有样式。clearStyles(): void被清空样式类型对象属性使用的是对应Text组件属性的设置值，若Text组件未设置值，则使用对应Text组件属性的默认值。
替换指定范围为新的属性字符串。replaceStyledString(start: number , length: number , other: StyledString): void
在指定位置插入新的属性字符串。 insertStyledString(start: number , other: StyledString): void
在末尾位置追加新的属性字符串。appendStyledString(other: StyledString): void

设置段落样式

可通过ParagraphStyle设置段落样式布局。下图显示了如何分割文本中的段落，段落以换行符 \n 结尾。

使用图片

可通过ImageAttachment来添加图片。
在这里插入图片描述

3.使用
if (this.imagePixelMap !== undefined) {
//ImageAttachment
  this.mutableStr = new MutableStyledString(new ImageAttachment({
    value: this.imagePixelMap,
    size: { width: 180, height: 160 },
    verticalAlign: ImageSpanAlignment.BASELINE,
    objectFit: ImageFit.Fill
  }))

2.引用
async aboutToAppear() {
    console.info("aboutToAppear initial imagePixelMap")
    //获取图片URL
    this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.sea'))
  }
//这个同步。。是干嘛的
  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
  }

1.定义
 imagePixelMap: image.PixelMap | undefined = undefined