开天辟地 HarmonyOS(鸿蒙) - 组件(文本类): StyledString(设置文本以及文本的不同位置的不同样式)

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

开天辟地 HarmonyOS(鸿蒙) - 组件(文本类): StyledString(设置文本以及文本的不同位置的不同样式)

示例如下:

pages\component\text\StyledStringDemo.ets

/** StyledString - 官方称之为“属性字符串”,其用设置文本以及文本的不同位置的不同样式*   Text 通过 TextController 支持此特性*   RichEditor 通过 RichEditorStyledStringController 支持此特性*/import { TitleBar, MyLog } from '../../TitleBar'
import { LengthMetrics } from '@kit.ArkUI'
import { image } from '@kit.ImageKit'@Entry
@Component
struct StyledStringDemo {build() {Column({ space: 10 }) {TitleBar()Tabs() {TabContent() { MySample1() }.tabBar('StyledString').align(Alignment.Top)TabContent() { MySample2() }.tabBar('MutableStyledString').align(Alignment.Top)}.scrollable(true).barMode(BarMode.Scrollable)}}
}@Component
struct MySample1 {@State message:string = ""textStyle: TextStyle = new TextStyle({fontColor: Color.Orange,fontSize: LengthMetrics.vp(32),});/** StyledString - 设置文本,以及文本的不同位置的不同样式(不支持 @State 装饰)*   value - 需要显示的文本内容*   styles - 样式集合(StyleOptions 类型的集合)*     start - 需要指定当前样式的字符串的起始位置*     length - 需要指定当前样式的字符串的长度*     styledKey - 需要指定的样式类型(StyledStringKey 枚举)*       FONT - 字体相关*       DECORATION - 下划线/中划线/上划线*       TEXT_SHADOW - 阴影*       BASELINE_OFFSET - 文本在原位置上的偏移量*       LETTER_SPACING - 文本字符间距*       LINE_HEIGHT - 行高*       PARAGRAPH_STYLE - 段落样式*       GESTURE - 手势事件*     styledValue - 需要指定的样式(和 Text 的相关效果差不多,详见 TextDemo.ets 中的相关说明)*       TextStyle - 对应 StyledStringKey.FONT*         fontColor, fontFamily, fontSize, fontWeight, fontStyle*       DecorationStyle - 对应 StyledStringKey.DECORATION*         type, color, style*       TextShadowStyle - 对应 StyledStringKey.TEXT_SHADOW*         radius, type, color, offsetX, offsetY*       BaselineOffsetStyle - 对应 StyledStringKey.BASELINE_OFFSET*         大于 0 向上偏移,小于 0 向下偏移*       LetterSpacingStyle - 对应 StyledStringKey.LETTER_SPACING*       LineHeightStyle - 对应 StyledStringKey.LINE_HEIGHT*       ParagraphStyle - 对应 StyledStringKey.PARAGRAPH_STYLE*         textAlign, textIndent, maxLines, overflow, wordBreak*       GestureStyle - 对应 StyledStringKey.GESTURE*         onClick, onLongPress*/styledString: StyledString = new StyledString("abcdefghijklmnopqrstuvwxyz\nabcdefghijklmnopqrstuvwxyz", [{start: 0,length: 3,styledKey: StyledStringKey.FONT,styledValue: this.textStyle},{start: 5,length: 3,styledKey: StyledStringKey.FONT,styledValue: new TextStyle({fontColor: Color.Red,fontSize: LengthMetrics.vp(24),})},{start: 5,length: 3,styledKey: StyledStringKey.DECORATION,styledValue: new DecorationStyle({type: TextDecorationType.LineThrough,color: Color.Green})},{start: 5,length: 3,styledKey: StyledStringKey.TEXT_SHADOW,styledValue: new TextShadowStyle({radius: 5,type: ShadowType.COLOR,color: Color.Blue,offsetX: 10,offsetY: 10})},{start: 10,length: 3,styledKey: StyledStringKey.BASELINE_OFFSET,styledValue: new BaselineOffsetStyle(LengthMetrics.vp(10))},{start: 15,length: 3,styledKey: StyledStringKey.LETTER_SPACING,styledValue: new LetterSpacingStyle(LengthMetrics.vp(20))},{start: 27,length: 1,styledKey: StyledStringKey.LINE_HEIGHT,styledValue: new LineHeightStyle(LengthMetrics.vp(100))},{start: 27,length: 1,styledKey: StyledStringKey.PARAGRAPH_STYLE,styledValue: new ParagraphStyle({textIndent: LengthMetrics.vp(30),})},{start: 27,length: 53,styledKey: StyledStringKey.GESTURE,styledValue:  new GestureStyle({onClick: () => {this.message = "27 - 53 onClick"},onLongPress: () => {this.message = "27 - 53 onLongPress"}})}]);controller: TextController = new TextController();onDidBuild() {/** TextController - 用于和绑定的 Text 之间的交互*   setStyledString() - 设置 StyledString*/// 注:// 如果你想要页面一加载就设置 StyledString,则不能在 aboutToAppear() 时设置,因为此时组件还没有被挂载上// 而是要在 onDidBuild() 或 onPageShow() 时设置this.controller.setStyledString(this.styledString);}build() {Column({space: 10}) {// 显示属性字符串Text(undefined, { controller: this.controller }).fontSize(16)/** StyledString - 设置文本,以及文本的不同位置的不同样式*   getString() - 获取当前的文本字符串*   getStyles() - 获取指定的字符范围中的所有样式对象的集合*/Button('获取当前 StyledString 对象的 string 和 styles').onClick(() => {let string = this.styledString.getString()let styles = this.styledString.getStyles(0, 20)this.message = `string:${string}, styles(1)_start:${styles[1].start}, styles(1)_length:${styles[1].length}, styles(1)_styledKey:${styles[1].styledKey}`})Text(this.message).fontSize(16)}}
}@Component
struct MySample2 {/** MutableStyledString - 增加了增删改操作的 StyledString(继承自 StyledString)*/mutableStyledString: MutableStyledString = new MutableStyledString("abcdefghijklmnopqrstuvwxyz\nabcdefghijklmnopqrstuvwxyz", [{start: 0,length: 3,styledKey: StyledStringKey.FONT,styledValue: new TextStyle({fontColor: Color.Orange,fontSize: LengthMetrics.vp(32),})}]);controller: TextController = new TextController();onDidBuild() {this.controller.setStyledString(this.mutableStyledString);}build() {Column({space: 10}) {Text(undefined, { controller: this.controller }).fontSize(16)Button('更新 MutableStyledString').onClick(() => {/** replaceString(), insertString(), removeString() - 对字符串做相关操作* replaceStyle(), setStyle(), removeStyle(), removeStyles(), clearStyles() - 对样式做相关操作* replaceStyledString(), insertStyledString(), appendStyledString() - 对 StyledString 做相关操作*/this.mutableStyledString.replaceString(0, 3, "xxx")this.mutableStyledString.setStyle({start: 23,length: 3,styledKey: StyledStringKey.FONT,styledValue: new TextStyle({fontColor: Color.Red,fontSize: LengthMetrics.vp(48),})})this.mutableStyledString.appendStyledString(new StyledString('123', [{start: 0,length: 3,styledKey: StyledStringKey.FONT,styledValue: new TextStyle({fontColor: Color.Green,fontSize: LengthMetrics.vp(32),})}]))// 因为 StyledString 不支持 @State 装饰,所以需要通过 TextController 的 setStyledString() 更新this.controller.setStyledString(this.mutableStyledString)})}}
}

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/879091.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用ollama运行deepseek-r1模型

Ollama是一个功能强大的本地大语言模型的运行框架,用户可以非常简单地运行使用各种LLM。最最主要的是它完全免费,本地可以离线运行; 1. 最简单的安装:curl https://ollama.ai/install.sh | sh 2.也可以访问ollam.com直接点击下载安装3. 安装完成之后,ollama list一下可以看…

【python应用】Python也能使用动态链接库

前言 动态链接库(DLL)想必大家都不陌生了吧,C/C++编程经常会用到,那么,它跟我们的Python有什么关系?要说关系恐怕也就是Python是用C写的了,不过,还有一点更重要的关系,那就是Python可以调用C函数,这一点,在Pywin32中有所体现。下面我们就来详细了解下到底Python使用动…

ERP+PLM+MDM

ERP+PLM+MDM 新一代汽车数字工厂PLM+PLM+MDM集成解决方案专为汽车整车行业设计,通过整合企业业务流程和优化关键数据管理,实现了设计制造一体化。该方案以业务流程为导向,围绕整车项目研发、快速变型设计、产品配置和装配工艺设计四大业务场景,提供全面的数据管理和流程控制…

AI应用示例:用AI通过单张面部照片预测您的职业与受教育程度

AI 生成的图像 | Flux Labs AI 制作想象一下,你走进一场面试,还没开口,AI 面试官就已经根据你的脸对你做出评估。这是不是 “以貌取人 2.0”?这算是歧视吗?还是 AI 正在推动一种新的 “面相主义”(face-ism)? 最近,来自多所大学的研究人员进行了一项研究,他们声称 AI…

电脑本地部署deepseek教程

Ollama:本地大模型运行指南奇舞精选2024-04-2814,445阅读11分钟关注 智能总结 复制 重新生成 这篇文章主要介绍了本地大模型运行框架 Ollama。包括其简介、安装方法(下载安装及大模型下载)、终端对话(如显示帮助、模型信息等命令)、API 调用(generate 和 chat 两…

可能是对春节假期的一些总结

写在前面2603 字 | 总结 | 经历 | 思考 | 感触未经允许,禁止转载。 正文「我一直都应该知道,听到别人说出她的名字,我还是会心里一跳。」过年与我当初预计的完全不同。我当初的计划,春节七八天,写很多很多文章,极速推进今年年度计划的写作一项。为此还专门订阅了一个月的…

搜狗录音笔c1折腾

1.买的pdd厂家帮我整好了大部分(应该刷过固件) 2.遇到的问题就是c to c的线...它没有协商,得插电脑usb-a口上才能识别到 3.厂家提供的搜狗录音笔助手这个软件是有点小处理的不是原软件(指解锁登录,其他的没看出问题,至少软件没报毒)

task3

任务二:Smiling-Weeping-zhr/Travel-assistant 自建项目链接,有关大模型关于大模型解答旅游相关

1.4 条件分支和循环机制

程序的流程分为顺序执行、条件分支和循环三种 顺序执行是按照地址内容的顺序执行指令。 条件分支是根据条件执行任意地址的指令。 循环是指重复执行同一地址的指令。 顺序执行每执行一个指令程序计数器的值自动加1条件分支和循环中使用的跳转指令,会参照当前执行的运算结果来判…

vue3使用flv.js播放flv直播流

目前有个需求是:管理直播机有一个列表需要查看每个直播机的实时内容,所以需要在后台加这个功能。 效果:我用ffmpeg模拟推流: 如何用ffmpeg模拟推流请看我上一篇文章 网页: 如上是可以正确再网页端拉流,这个功能费了一天的时间,在这里免费分享出来。 首先安装flv.js(用n…

DeepSeep本地部署

1、浏览器搜索引擎更改 2、搜索:Ollama操作下载: 也可直接进入下载路径:https://ollama.com/download/windows ollama run deepseek-r1 本文来自博客园,作者:他还在坚持嘛,转载请注明原文链接:他还在坚持嘛 https://www.cnblogs.com/brf-test/p/18699050