鸿蒙ArkUI实战之TextArea组件、RichEditor组件、RichText组件、Search组件的使用

本文接上篇继续更新ArkUI中组件的使用，本文介绍的组件有TextArea组件、RichEditor组件、RichText组件、Search组件，这几个组件的使用对应特定场景，使用时更加需要注意根据需求去使用

TextArea组件

官方文档：

TextArea-文本与输入-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

 参数表：

名称类型必填说明
placeholderResourceStr否

设置无输入时的提示文本。输入内容后，提示文本不显示。

仅设置placeholder属性时，手柄依然跟随拖动，手柄松开后光标停留在文字开头位置。

textResourceStr否

设置输入框当前的文本内容。

建议通过onChange事件将状态变量与文本实时绑定，

避免组件刷新时TextArea中的文本内容异常。

从API version 10开始，该参数支持$$双向绑定变量。

controller8+TextAreaController否设置TextArea控制器。

 TextArea组件多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示，在以下案例中，展示了三个多行文本输入框，第一个是默认的，并没有给高度，第二个给了高度，以及占位字符，第三个加上了，最大字符数，以及显示计数器，在输入时可通过onChange回调函数获取到输入框中的值

属性名称描述可选值或默认值
placeholder设置文本框的提示文本字符串值，如代码中的 '请输入内容'
width设置文本框的宽度可设置为数字、百分比等，如代码中的 '100%'
height设置文本框的高度可设置为像素值等，如代码中的 150
maxLength设置文本框的最大输入长度正整数，如代码中的 20
showCounter是否显示输入计数器boolean 值，如代码中的 true

 代码部分：

@Component
export struct TextAreaCase {build() {NavDestination() {Column({ space: 20 }) {TextArea()TextArea({placeholder: '请输入内容',}).width('100%').height(150)TextArea({placeholder: '请输入内容',}).width('100%').height(150).maxLength(20)// 设置最大长度.showCounter(true) // 显示计数器}.justifyContent(FlexAlign.Center).height('100%').width('80%')}.height('100%').width('100%').title('展示TextArea')}
}@Builder
function TextAreaCaseBuilder() {TextAreaCase()
}

 展示效果：

 RichEditor组件

官方文档：

RichEditor-文本与输入-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

 支持图文混排和文本交互式编辑的组件，这个组件属于是用法·多样化，一般使用场景在，对输入内容有多中交互，以及输入内容有多样化需求的场景中

属性/设置描述可选值或默认值
options配置 RichEditor 的选项，如控制器 controllerRichEditorOptions 对象，包含控制器等配置项
onReady组件准备就绪时的回调函数，用于注册事件或初始化操作回调函数，如代码中的注册文本变化回调和设置属性字符串
controllerRichEditor 的控制器，用于操作和获取组件的内容和状态RichEditorController 或 RichEditorStyledStringController 对象
StyledString属性字符串，包含文本和样式信息包含文本和样式范围的对象
MutableStyledString可变属性字符串，允许动态修改文本和样式包含初始文本和样式范围的对象

 这里借用官方案例做展示，这里需要关注的点在于，RichEditor({controller:控制器})，这里边的控制器，这个编辑器里的组件可以通过控制器控制其行为

 代码部分：

import { image } from '@kit.ImageKit';
import { LengthMetrics } from '@kit.ArkUI';@Component
export struct RichEditorCase {stringLength: number = 0;imagePixelMap: image.PixelMap | undefined = undefined;@State selection: string = "";@State content: string = "";@State range: string = "";@State replaceString: string = "";@State rangeBefore: string = "";@State rangeAfter: string = "";richEditorStyledString: MutableStyledString = new MutableStyledString("");textStyle: TextStyle = new TextStyle({fontWeight: FontWeight.Lighter,fontFamily: 'HarmonyOS Sans',fontColor: Color.Green,fontSize: LengthMetrics.vp(30),fontStyle: FontStyle.Normal})fontStyle1: TextStyle = new TextStyle({ fontColor: Color.Blue });fontStyle2: TextStyle = new TextStyle({fontWeight: FontWeight.Bolder,fontFamily: 'Arial',fontColor: Color.Orange,fontSize: LengthMetrics.vp(30),fontStyle: FontStyle.Italic})controller1: RichEditorController = new RichEditorController()options1: RichEditorOptions = { controller: this.controller1 };// 创建属性字符串对象mutableStyledString: MutableStyledString = new MutableStyledString("初始属性字符串",[{start: 0,length: 5,styledKey: StyledStringKey.FONT,styledValue: this.fontStyle1}]);styledString: StyledString = new StyledString("插入属性字符串",[{start: 2,length: 4,styledKey: StyledStringKey.FONT,styledValue: this.fontStyle2}]);controller: RichEditorStyledStringController = new RichEditorStyledStringController();options: RichEditorStyledStringOptions = { controller: this.controller };// 文本内容变化回调contentChangedListener: StyledStringChangedListener = {onWillChange: (value: StyledStringChangeValue) => {this.range = '[ ' + value.range.start + ' , ' + value.range.end + ' ]';this.replaceString = value.replacementString.getString();return true;},onDidChange: (rangeBefore, rangeAfter) => {this.rangeBefore = '[ ' + rangeBefore.start + ' , ' + rangeBefore.end + ' ]';this.rangeAfter = '[ ' + rangeAfter.start + ' , ' + rangeAfter.end + ' ]';}}async aboutToAppear() {console.info("aboutToAppear initial imagePixelMap");this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.app_icon'));}build() {NavDestination() {Column({ space: 6 }) {Column() {Text("选中区信息").fontSize(20).width("100%")Text("selection range: " + this.selection).width("100%")Text("selection content: " + this.content).width("100%")}.width("100%").height("10%")Column() {Text("onWillChange回调信息").fontSize(20).width("100%")Text("range: " + this.range).width("100%")Text("replacementString: " + this.replaceString).width("100%")Text("onWillChange回调信息").fontSize(20).width("100%")Text("rangeBefore: " + this.rangeBefore).width("100%")Text("rangeAfter: " + this.rangeAfter).width("100%")}.borderWidth(1).borderColor(Color.Black).width("100%").height("20%")RichEditor(this.options).onReady(() => {// 注册文本变化回调this.controller.onContentChanged(this.contentChangedListener);// 设定组件展示的属性字符串this.controller.setStyledString(this.mutableStyledString);}).height("20%").width("100%")RichEditor(this.options1).onReady(() => {this.controller1.addTextSpan("把这些文字转换成属性字符串");}).height("10%").width("100%").borderWidth(1).borderColor(Color.Black)Row({ space: 2 }) {Button("插入图片").stateEffect(true).onClick(() => {if (this.imagePixelMap !== undefined) {let imageStyledString = new MutableStyledString(new ImageAttachment({value: this.imagePixelMap,size: { width: 50, height: 50 },layoutStyle: { borderRadius: LengthMetrics.vp(10) },verticalAlign: ImageSpanAlignment.BASELINE,objectFit: ImageFit.Contain}))// 获取组件展示的属性字符串this.richEditorStyledString = this.controller.getStyledString();this.richEditorStyledString.appendStyledString(imageStyledString);// 使插入图片后的属性字符串展示在组件上this.controller.setStyledString(this.richEditorStyledString);this.controller.setCaretOffset(this.richEditorStyledString.length);}})Button("插入文本").onClick(() => {// 获取组件展示的属性字符串this.richEditorStyledString = this.controller.getStyledString();this.richEditorStyledString.appendStyledString(this.styledString);// 使插入文本后的属性字符串展示在组件上this.controller.setStyledString(this.richEditorStyledString);this.controller.setCaretOffset(this.richEditorStyledString.length);})Button("删除选中内容").onClick(() => {// 获取选中范围let richEditorSelection = this.controller.getSelection();let start = richEditorSelection.start ? richEditorSelection.start : 0;let end = richEditorSelection.end ? richEditorSelection.end : 0;if (start < 0 || end <= start) {return;}// 获取组件展示的属性字符串this.richEditorStyledString = this.controller.getStyledString();this.richEditorStyledString.removeString(start, end - start);// 使删除内容后的属性字符串展示在组件上this.controller.setStyledString(this.richEditorStyledString);})}Row({ space: 2 }) {Button("获取选中内容").onClick(() => {// 获取选中范围let richEditorSelection = this.controller.getSelection();let start = richEditorSelection.start ? richEditorSelection.start : 0;let end = richEditorSelection.end ? richEditorSelection.end : 0;// 获取组件展示的属性字符串this.richEditorStyledString = this.controller.getStyledString();this.selection = '[ ' + start + ' , ' + end + ' ]';if (start == end) {this.content = "";} else {this.content = this.richEditorStyledString.subStyledString(start, end - start).getString();}})Button("更新选中样式").onClick(() => {// 获取选中范围let richEditorSelection = this.controller.getSelection();let start = richEditorSelection.start ? richEditorSelection.start : 0;let end = richEditorSelection.end ? richEditorSelection.end : 0;if (start < 0 || end <= start) {return;}// 获取组件展示的属性字符串this.richEditorStyledString = this.controller.getStyledString();this.richEditorStyledString.setStyle({start: start,length: end - start,styledKey: StyledStringKey.FONT,styledValue: this.textStyle})// 使变更样式后的属性字符串展示在组件上this.controller.setStyledString(this.richEditorStyledString);})}Row({ space: 2 }) {//将属性字符串转换成span信息Button("调用fromStyledString").onClick(() => {this.controller1.addTextSpan("调用fromStyledString：" +JSON.stringify(this.controller1.fromStyledString(this.mutableStyledString)))})//将给定范围的组件内容转换成属性字符串Button("调用toStyledString").onClick(() => {this.controller.setStyledString(this.controller1.toStyledString({ start: 0, end: 13 }))})}}.justifyContent(FlexAlign.Center).height('100%').width('100%')}.height('100%').width('100%').title('展示RichEditor')}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}
}@Builder
function RichEditorCaseBuilder() {RichEditorCase()
}

 效果展示：

RichText组件

官方文档：

RichText-文本与输入-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

富文本组件，解析并显示HTML格式文本，可以在页面中展示HTML格式的文本，接收一个HTML格式字符串，这里的重点在于RichText("HTML格式字符串")

属性名称描述可选值或默认值
width设置组件的宽度可设置为像素值、百分比等，如代码中的 '80%'
height设置组件的高度可设置为像素值等，如代码中的 300
border设置边框属性包含边框宽度、颜色、圆角等，如代码中的 .border({ width: 4 }) 等
borderWidth设置边框宽度可设置为像素值等，如代码中的 1
borderColor设置边框颜色颜色值，如代码中的 '#E6B5B2'
borderRadius设置边框圆角半径可设置为像素值等，如代码中的 10

 代码部分：

@Component
export struct RichTextCase {@State data: string = '<h1 style="text-align: center;">h1标题</h1>' +'<h1 style="text-align: center;"><i>h1斜体</i></h1>' +'<h1 style="text-align: center;"><u>h1下划线</u></h1>' +'<h2 style="text-align: center;">h2标题</h2>' +'<h3 style="text-align: center;">h3标题</h3>' +'<p style="text-align: center;">p常规</p><hr/>' +'<div style="width: 500px;height: 500px;border: 1px solid;margin: 0 auto;">' +'<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">字体大小35px,行高45px</p>' +'<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;">' +'<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>';build() {NavDestination() {Column({ space: 20 }) {RichText(this.data).width('80%').height(300).border({ width: 4 }).borderWidth(1).borderColor('#E6B5B2').borderRadius(10)}.justifyContent(FlexAlign.Center).height('100%').width('100%')}.height('100%').width('100%').title('展示RichText')}
}@Builder
function RichTextCaseBuilder() {RichTextCase()
}

 效果展示：

Search组件

官方文档：

Search-文本与输入-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

搜索框组件 ，是一个鸿蒙系统重标准的搜索框样式，可修改其参数以及属性去根据需求自定义效果，这里是参数表

参数名类型必填说明
valuestring否

设置当前显示的搜索文本内容。

从API version 10开始，该参数支持$$双向绑定变量。

placeholderResourceStr10+否设置无输入时的提示文本。
iconstring否

设置搜索图标路径，默认使用系统搜索图标。

说明：

icon的数据源支持本地图片和网络图片。

- 支持的图片格式包括png、jpg、bmp、svg、gif、pixelmap和heif。

- 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp|heif];base64,[base64 data], 其中[base64 data]为Base64字符串数据。

如果与属性searchIcon同时设置，则searchIcon优先。

controllerSearchController否设置Search组件控制器。

 代码部分：

这里通过searchButton属性设置了搜索框尾部的按钮字样

@Component
export struct SearchCase {build() {NavDestination() {Column({ space: 20 }) {Search({ placeholder: '请输入内容' }).searchButton('搜索')}.justifyContent(FlexAlign.Center).height('100%').width('80%')}.height('100%').width('100%').title('展示Search')}
}@Builder
function SearchCaseBuilder() {SearchCase()
}

 效果展示：

本文就介绍到TextArea组件，RichEditor组件，RichText组件以及Search组件了，持续更新中..............

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

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

相关文章

除了`String`、`StringBuffer` 和 `StringBuilder`之外，还有什么处理字符串的方法？

除了`String`、`StringBuffer` 和 `StringBuilder`之外，还有什么处理字符串的方法？

一、标准库中的字符串处理类 1. StringJoiner&#xff08;Java 8&#xff09; 用途&#xff1a;用于在拼接字符串时自动添加分隔符、前缀和后缀。示例&#xff1a;StringJoiner sj new StringJoiner(", ", "[", "]"); sj.add("A").…
阅读更多...
Qt中读写结构体字节数据

Qt中读写结构体字节数据

在Qt中读写结构体字节数据通常涉及将结构体转换为字节数组(QByteArray)或直接从内存中读写。以下是几种常见方法&#xff1a; 方法1&#xff1a;使用QDataStream读写结构体 cpp #include <QFile> #include <QDataStream>// 定义结构体 #pragma pack(push, 1) //…
阅读更多...
Windows 10 上安装 Spring Boot CLI详细步骤

Windows 10 上安装 Spring Boot CLI详细步骤

在 Windows 10 上安装 Spring Boot CLI 可以通过以下几种方式完成。以下是详细的步骤说明&#xff1a; 1. 手动安装&#xff08;推荐&#xff09; 步骤 1&#xff1a;下载 Spring Boot CLI 访问 Spring Boot CLI 官方发布页面。下载最新版本的 .zip 文件&#xff08;例如 sp…
阅读更多...
Unity3D仿星露谷物语开发37之浇水动画

Unity3D仿星露谷物语开发37之浇水动画

1、目标 当点击水壶时&#xff0c;实现浇水的动画。同时有一个水从水壶中流出来的特效。 假如某个grid被浇过了&#xff0c;则不能再浇水了。。 如果某个grid没有被dug过&#xff0c;也不能被浇水。 2、优化Settings.cs脚本 增加如下内容&#xff1a; public static float…
阅读更多...
【2】Kubernetes 架构总览

【2】Kubernetes 架构总览

Kubernetes 架构总览 主节点与工作节点 主节点 Kubernetes 的主节点&#xff08;Master&#xff09;是组成集群控制平面的关键部分&#xff0c;负责整个集群的调度、状态管理和决策。控制平面由多个核心组件构成&#xff0c;包括&#xff1a; kube-apiserver&#xff1a;集…
阅读更多...
如何对docker镜像存在的gosu安全漏洞进行修复——筑梦之路

如何对docker镜像存在的gosu安全漏洞进行修复——筑梦之路

这里以mysql的官方镜像为例进行说明&#xff0c;主要流程为&#xff1a; 1. 分析镜像存在的安全漏洞具体是什么 2. 根据分析结果有针对性地进行修复处理 3. 基于当前镜像进行修复安全漏洞并复核验证 # 镜像地址mysql:8.0.42 安全漏洞现状分析 dockerhub网站上获取该镜像的…
阅读更多...
【Tauri2】026——Tauri+Webassembly

【Tauri2】026——Tauri+Webassembly

前言 不多废话 直言的说&#xff0c;笔者看到这篇文章大佬的文章 【04】Tauri 入门篇 - 集成 WebAssembly - 知乎https://zhuanlan.zhihu.com/p/533025312尝试集成一下WebAssembly&#xff0c;直接开始 正文 准备工作 新建一个项目 安装 vite的rsw插件和rsw pnpm instal…
阅读更多...
OpenHarmony Camera开发指导（五）：相机预览功能（ArkTS）

OpenHarmony Camera开发指导（五）：相机预览功能（ArkTS）

预览是在相机启动后实时显示场景画面&#xff0c;通常在拍照和录像前执行。 开发步骤 创建预览Surface 如果想在屏幕上显示预览画面&#xff0c;一般由XComponent组件为预览流提供Surface&#xff08;通过XComponent的getXcomponentSurfaceId方法获取surfaceid&#xff09;&…
阅读更多...
puzzle（0531）脑力航迹

puzzle（0531）脑力航迹

目录 脑力航迹 规则 解法 简单模式 中等模式 困难模式 专家模式 脑力航迹 规则 2条航迹会产生一个相对航迹&#xff1a; 根据相对航迹和其中一个航迹推导另外一个航迹。 解法 没有任何需要推理的地方&#xff0c;就是纯粹的2个矢量相加。 简单模式 中等模式 困难模…
阅读更多...
在win上安装Ubuntu安装Anaconda(linx环境)

在win上安装Ubuntu安装Anaconda(linx环境)

一&#xff0c;安装Ubuntu 1. 在 Microsoft 商城去下载Ubuntu(LTS:是长期维护的版本) 2.安装完之后启动程序&#xff0c;再重新打开一个黑窗口&#xff1a; wsl --list --verbose 3.关闭Ubuntu wsl --shutdown Ubuntu-22.04 WSL2 Ubuntu-20.04文件太占c盘空间&#xff0c;…
阅读更多...
NEAT 算法解决 Lunar Lander 问题：从理论到实践

NEAT 算法解决 Lunar Lander 问题：从理论到实践

NEAT 算法解决 Lunar Lander 问题：从理论到实践 0. 前言1. 定义环境2. 配置 NEAT3. 解决 Lunar lander 问题小结系列链接0. 前言 在使用 NEAT 解决强化学习问题一节所用的方法只适用于较简单的强化学习 (reinforcement learning, RL) 环境。在更复杂的环境中使用同样的进化解…
阅读更多...
【KWDB 创作者计划】_上位机知识篇---ESP32-S3Arduino

【KWDB 创作者计划】_上位机知识篇---ESP32-S3Arduino

文章目录 前言1. ESP32-S3核心特性2. 开发环境搭建(1) 安装Arduino IDE(2) 添加ESP32-S3支持(3) 选择开发板(4) 关键配置3. 基础代码示例(1) 串口通信（USB/硬件串口）(2) Wi-Fi连接(3) 蓝牙LE广播4. 高级功能开发(1) USB OTG功能(2) AI加速（MicroTensorFlow）(3) 双核任务处理…
阅读更多...
JavaScript学习教程，从入门到精通，DOM节点操作语法知识点及案例详解（21）

JavaScript学习教程，从入门到精通，DOM节点操作语法知识点及案例详解（21）

DOM节点操作语法知识点及案例详解 一、语法知识点 1. 获取节点 // 通过ID获取 const element document.getElementById(idName);// 通过类名获取&#xff08;返回HTMLCollection&#xff09; const elements document.getElementsByClassName(className);// 通过标签名获取…
阅读更多...
PCA 降维实战：从原理到电信客户流失数据应用

PCA 降维实战：从原理到电信客户流失数据应用

一、简介 在机器学习领域&#xff0c;数据的特征维度往往较高&#xff0c;这不仅会增加计算的复杂度&#xff0c;还可能导致过拟合等问题。主成分分析&#xff08;Principal Component Analysis&#xff0c;简称 PCA&#xff09;作为一种经典的降维技术&#xff0c;能够在保留数…
阅读更多...
信创时代编程开发语言选择指南：国产替代背景下的技术路径与实践建议

信创时代编程开发语言选择指南：国产替代背景下的技术路径与实践建议

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家、CSDN平台优质创作者&#xff0c;高级开发工程师&#xff0c;数学专业&#xff0c;10年以上C/C, C#, Java等多种编程语言开发经验&#xff0c;拥有高级工程师证书&#xff1b;擅长C/C、C#等开发语言&#xff0c;熟悉Java常用开…
阅读更多...
Arcgis10.1的汉化包及破解文件分享

Arcgis10.1的汉化包及破解文件分享

Arcgis10.1的汉化包分享 网上有好多10.2的汉化包&#xff0c;但是10.1的汉化包很少&#xff0c;特在此分析出来给大家 Arcgis10.1破解文件及汉化包: (访问密码: 9784) license manager破解安装文件 另外也分享了license manager破解安装文件&#xff0c;也在相同的分享链接里…
阅读更多...
CrewAI Community Version(一)——初步了解以及QuickStart样例

CrewAI Community Version(一)——初步了解以及QuickStart样例

目录 1. CrewAI简介1.1 CrewAI Crews1.2 CrewAI Flows1.3 Crews和Flows的使用情景 2. CrewAI安装2.1 安装uv2.2 安装CrewAI CLI 3. 官网QuickStart样例3.1 创建CrewAI Crews项目3.2 项目结构3.3 .env3.4 智能体角色及其任务3.4.1 agents.yaml3.4.2 tasks.yaml 3.5 crew.py3.6 m…
阅读更多...
word选中所有的表格——宏

word选中所有的表格——宏

Sub 选中所有表格()Dim aTable As TableApplication.ScreenUpdating FalseActiveDocument.DeleteAllEditableRanges wdEditorEveryoneFor Each aTable In ActiveDocument.TablesaTable.Range.Editors.Add wdEditorEveryoneNextActiveDocument.SelectAllEditableRanges wdEdito…
阅读更多...
Tkinter与ttk模块对比：构建现代 Python GUI 的进化之路

Tkinter与ttk模块对比：构建现代 Python GUI 的进化之路

在 Python GUI 开发中&#xff0c;标准库 tkinter 及其子模块 ttk&#xff08;Themed Tkinter&#xff09;常被同时使用。本文通过功能对比和实际案例&#xff0c;简单介绍这两个模块的核心差异。 1. 区别 Tkinter&#xff1a;Python 标准 GUI 工具包&#xff08;1994年集成&…
阅读更多...
Linux系统之部署Dillinger个人文本编辑器

Linux系统之部署Dillinger个人文本编辑器

Linux系统之部署Dillinger个人文本编辑器 一、Dillinger介绍1.1 Dillinger简介1.2 Dillinger特点1.3 使用场景二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本四、部署Node.js 环境4.1 下载Node.js安装包4.2 解…
阅读更多...
最新文章

Copyright @ 2022~2023