鸿蒙界面开发——组件(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

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

【测试】输入正确用户名和密码,点击登录没有响应的可能性原因

目录 一、前端问题 1. 界面交互问题 2. 输入数据校验问题 二、网络问题 1. 网络连接中断 2. 代理设置问题 三、后端问题 1. 服务器故障 2. 数据库问题 3. 权限问题: 四、其他问题 1. 缓存问题 2. 第三方服务问题 3. 配置问题 一、前端问题 1. 界面交互问题 登录按钮的点击事件未正确绑定,导致点击后无法触发登录操作。 页面可能存在

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前,需要制作不同类型格式的根文件系统         在产品研发阶段,我们还是需要使用nfs的方式挂载根文件系统         优点:可以直接在上位机中修改文件系统内容,延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta

滚雪球学Java(87):Java事务处理:JDBC的ACID属性与实战技巧!真有两下子!

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE啦,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎大家关注&&收藏!持续更新中,up!up!up!! 环境说明:Windows 10