鸿蒙界面开发——组件(6):属性字符串(StyledString)文本输入

本文主要是介绍鸿蒙界面开发——组件(6):属性字符串(StyledString)文本输入,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

属性字符串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 属性

  1. getString(): string获取字符串信息。
  2. equals(other: StyledString): boolean 判断两个属性字符串是否相等。
  3. 获取属性字符串的子字符串。subStyledString(start: number , length?: number): StyledString
  4. 获取指定范围属性字符串的样式集合。getStyles(start: number , length: number , styledKey?: StyledStringKey): Array
  5. 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,更丰富的属性方法?。

  1. 替换指定范围的字符串。replaceString(start: number , length: number , other: string): void
  2. 插入字符串。insertString(start: number , other: string): void
  3. 移除指定范围的字符串。removeString(start: number , length: number): void 当属性字符串中包含图片时,同样生效。
  4. 替换指定范围内容为指定类型新样式。replaceStyle(spanStyle: SpanStyle): void
  5. 为指定范围内容设置指定类型新样式。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)
  1. 清除指定范围内容的指定类型样式。removeStyle(start: number , length: number , styledKey: StyledStringKey): void
    被清空样式类型对象属性使用的是对应Text组件属性的设置值,若Text组件未设置值,则使用对应Text组件属性的默认值。当属性字符串中包含图片时,同样生效。
  2. removeStyles(start: number , length: number): void
  3. 清除属性字符串对象的所有样式。clearStyles(): void被清空样式类型对象属性使用的是对应Text组件属性的设置值,若Text组件未设置值,则使用对应Text组件属性的默认值。
  4. 替换指定范围为新的属性字符串。replaceStyledString(start: number , length: number , other: StyledString): void
  5. 在指定位置插入新的属性字符串。 insertStyledString(start: number , other: StyledString): void
  6. 在末尾位置追加新的属性字符串。appendStyledString(other: StyledString): void

设置段落样式

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

使用图片

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

3.使用
if (this.imagePixelMap !== undefined) {
//ImageAttachmentthis.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")//获取图片URLthis.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

场景实例

在这里插入图片描述
用row和Text也可以吧。。。。。。。。。。

这篇关于鸿蒙界面开发——组件(6):属性字符串(StyledString)文本输入的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1141867

相关文章

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper

基于Python开发PPTX压缩工具

《基于Python开发PPTX压缩工具》在日常办公中,PPT文件往往因为图片过大而导致文件体积过大,不便于传输和存储,所以本文将使用Python开发一个PPTX压缩工具,需要的可以了解下... 目录引言全部代码环境准备代码结构代码实现运行结果引言在日常办公中,PPT文件往往因为图片过大而导致文件体积过大,

C#使用DeepSeek API实现自然语言处理,文本分类和情感分析

《C#使用DeepSeekAPI实现自然语言处理,文本分类和情感分析》在C#中使用DeepSeekAPI可以实现多种功能,例如自然语言处理、文本分类、情感分析等,本文主要为大家介绍了具体实现步骤,... 目录准备工作文本生成文本分类问答系统代码生成翻译功能文本摘要文本校对图像描述生成总结在C#中使用Deep

C#从XmlDocument提取完整字符串的方法

《C#从XmlDocument提取完整字符串的方法》文章介绍了两种生成格式化XML字符串的方法,方法一使用`XmlDocument`的`OuterXml`属性,但输出的XML字符串不带格式,可读性差,... 方法1:通过XMLDocument的OuterXml属性,见XmlDocument类该方法获得的xm

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》:本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.

JSON字符串转成java的Map对象详细步骤

《JSON字符串转成java的Map对象详细步骤》:本文主要介绍如何将JSON字符串转换为Java对象的步骤,包括定义Element类、使用Jackson库解析JSON和添加依赖,文中通过代码介绍... 目录步骤 1: 定义 Element 类步骤 2: 使用 Jackson 库解析 jsON步骤 3: 添

JavaScript中的isTrusted属性及其应用场景详解

《JavaScript中的isTrusted属性及其应用场景详解》在现代Web开发中,JavaScript是构建交互式应用的核心语言,随着前端技术的不断发展,开发者需要处理越来越多的复杂场景,例如事件... 目录引言一、问题背景二、isTrusted 属性的来源与作用1. isTrusted 的定义2. 为

四种Flutter子页面向父组件传递数据的方法介绍

《四种Flutter子页面向父组件传递数据的方法介绍》在Flutter中,如果父组件需要调用子组件的方法,可以通过常用的四种方式实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录方法 1:使用 GlobalKey 和 State 调用子组件方法方法 2:通过回调函数(Callb

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

Java 字符数组转字符串的常用方法

《Java字符数组转字符串的常用方法》文章总结了在Java中将字符数组转换为字符串的几种常用方法,包括使用String构造函数、String.valueOf()方法、StringBuilder以及A... 目录1. 使用String构造函数1.1 基本转换方法1.2 注意事项2. 使用String.valu