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

news2025/4/23 0:38:20

本文接上篇继续更新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.coloradmin.cn/o/2340415.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

初创企业机器学习训练:云服务器配置对效率、成本与可扩展性的影响

在当今的初创企业中&#xff0c;机器学习模型训练已成为驱动创新和智能产品的核心环节。然而&#xff0c;深度学习模型的训练通常需要大量的计算资源&#xff0c;如何高效利用云服务器的基础配置成为初创团队关注的重点。云服务器的基础配置通常包括 vCPU&#xff08;虚拟CPU&a…

【“星瑞” O6 评测】—NPU 部署 face parser 模型

前言 瑞莎星睿 O6 (Radxa Orion O6) 拥有高达 28.8TOPs NPU (Neural Processing Unit) 算力&#xff0c;支持 INT4 / INT8 / INT16 / FP16 / BF16 和 TF32 类型的加速。这里通过通过官方的工具链进行FaceParsingBiSeNet的部署 1. FaceParsingBiSeNet onnx 推理 首先从百度网盘…

56、如何快速让⼀个盒⼦⽔平垂直居中

在网页开发中&#xff0c;有多种方式能让一个盒子实现水平垂直居中。下面为你介绍几种常见且快速的方法。 1. 使用 Flexbox 布局 Flexbox 是一种非常便捷的布局模型&#xff0c;能够轻松实现元素的水平和垂直居中。 html <!DOCTYPE html> <html lang"en"&…

BDO分厂积极开展“五个一”安全活动

BDO分厂为规范化学习“五个一”活动主题&#xff0c;按照“上下联动、分头准备 、差异管理、资源共享”的原则&#xff0c;全面激活班组安全活动管理新模式&#xff0c;正在积极开展班组安全活动&#xff0c;以单元班组形式对每个班组每周组织一次“五个一”安全活动。 丁二醇单…

[Redis]1-高效的数据结构P2-Set

按照惯例&#xff0c;先丢一个官网文档链接。 上篇我们已经了解了高效的数据结构P1-String与Hash。 这篇&#xff0c;我们继续来了解Redis的 Set 与 Sorted set。 目录 有序集合 Sorted set底层实现 集合 Set总结资料引用 有序集合 Sorted set Redis 有序集合是一组唯一的字符…

用ffmpeg 实现拉取h265的flv视频转存成264的mp4 实现方案

参考文章 支持 flvh265 的ffmpeg编译安装_demuxer flvhevc异常-CSDN博客 windwos有别人编译好的 支持HEVC/H265 RTMP播放的FFMPEG/FFPLAY WINDOWS版本 但是linux没有所以得自己编译 1.需要对ffmpeg进行源码修改 这里使用 https://github.com/numberwolf/FFmpeg-QuQi-H265-…

Compose Multiplatform Android Logcat工具

一、通过adb发送指令&#xff0c;收集设备日志并保存 二、UI 三、代码 /*** 获取设备列表*/fun getDevices(): List<String> {val process ProcessBuilder("adb", "devices").redirectErrorStream(true).start()val output process.inputStream.…

[渗透测试]渗透测试靶场docker搭建 — —全集

[渗透测试]渗透测试靶场docker搭建 — —全集 对于初学者来说&#xff0c;仅仅了解漏洞原理是不够的&#xff0c;还需要进行实操。对于公网上的服务我们肯定不能轻易验证某些漏洞&#xff0c;否则可能触犯法律。这是就需要用到靶场。 本文主要给大家介绍几种常见漏洞对应的靶场…

人工智能-机器学习(线性回归,逻辑回归,聚类)

人工智能概述 人工智能分为:符号学习&#xff0c;机器学习。 机器学习是实现人工智能的一种方法&#xff0c;深度学习是实现机器学习的一种技术。 机器学习&#xff1a;使用算法来解析数据&#xff0c;从中学习&#xff0c;然后对真实世界中是事务进行决策和预测。如垃圾邮件检…

探寻Gson解析遇到不存在键值时引发的Kotlin的空指针异常的原因

文章目录 一、问题背景二、问题原因三、问题探析Kotlin空指针校验Gson.fromJson(String json, Class<T> classOfT)TypeTokenGson.fromJson(JsonReader reader, TypeToken<T> typeOfT)TypeAdapter 和 TypeAdapterFactoryReflectiveTypeAdapterFactoryRecordAdapter …

冰川流域提取分析——ArcGIS pro

一、河网提取和流域提取视频详细GIS小熊 || 6分钟学会水文分析—河网提取&#xff08;以宜宾市为例&#xff09;_哔哩哔哩_bilibili 首先你要生成研究区域DEM&#xff0c;然后依次是填洼→流向→流量→栅格计算器→河网分级→栅格河网矢量化&#xff08;得到河网.shp&#xff…

wordpress 垂直越权(CVE=2021-21389)漏洞复现详细教程

关于本地化搭建vulfocus靶场的师傅可以参考我置顶文章 KALI搭建log4j2靶场及漏洞复现全流程-CSDN博客https://blog.csdn.net/2301_78255681/article/details/147286844 描述: BuddyPress 是一个用于构建社区站点的开源 WordPress 插件。在 7.2.1 之前的 5.0.0 版本的 BuddyP…

MySQL 线上大表 DDL 如何避免锁表(pt-online-schema-change)

文章目录 1、锁表问题2、pt-online-schema-change 原理3、pt-online-schema-change 实战3.1、准备数据3.2、安装工具3.3、模拟锁表3.4、解决锁表 1、锁表问题 在系统研发过程中&#xff0c;随着业务需求千变万化&#xff0c;避免不了调整线上MySQL DDL数据表的操作&#xff0c…

剑指offer经典题目(五)

目录 栈相关 二叉树相关 栈相关 题目一&#xff1a;定义栈的数据结构&#xff0c;请在该类型中实现一个能够得到栈中所含最小元素的 min 函数&#xff0c;输入操作时保证 pop、top 和 min 函数操作时&#xff0c;栈中一定有元素。OJ地址 图示如下。 主要思想&#xff1a;我们…

3、排序算法1---按考研大纲做的

一、插入排序 1、直接插入排序 推荐先看这个视频 1.1、原理 第一步&#xff0c;索引0的位置是有序区&#xff08;有序区就是有序的部分&#xff0c;刚开始就只有第一个数据是有序的&#xff09;。第二步&#xff0c;将第2个位置到最后一个位置的元素&#xff0c;依次进行排…

llama-webui docker实现界面部署

1. 启动ollama服务 [nlp server]$ ollama serve 2025/04/21 14:18:23 routes.go:1007: INFO server config env"map[OLLAMA_DEBUG:false OLLAMA_FLASH_ATTENTION:false OLLAMA_HOST: OLLAMA_KEEP_ALIVE:24h OLLAMA_LLM_LIBRARY: OLLAMA_MAX_LOADED_MODELS:4 OLLAMA_MAX_…

Linux的Socket开发补充

是listen函数阻塞等待连接&#xff0c;还是accept函数阻塞等待连接&#xff1f; 这两个函数的名字&#xff0c;听起来像listen一直在阻塞监听&#xff0c;有连接了就accept&#xff0c;但其实不是的。 调用listen()后&#xff0c;程序会立即返回&#xff0c;继续执行后续代码&a…

Spring-AOP分析

Spring分析-AOP 1.案例引入 在上一篇文章中&#xff0c;【Spring–IOC】【https://www.cnblogs.com/jackjavacpp/p/18829545】&#xff0c;我们了解到了IOC容器的创建过程&#xff0c;在文末也提到了AOP相关&#xff0c;但是没有作细致分析&#xff0c;这篇文章就结合示例&am…

【专业解读:Semantic Kernel(SK)】大语言模型与传统编程的桥梁

目录 Start:什么是Semantic Kernel&#xff1f; 一、Semantic Kernel的本质&#xff1a;AI时代的操作系统内核 1.1 重新定义LLM的应用边界 1.2 技术定位对比 二、SK框架的六大核心组件与技术实现 2.1 内核&#xff08;Kernel&#xff09;&#xff1a;智能任务调度中心 2…

你学会了些什么211201?--http基础知识

概念 HTTP–Hyper Text Transfer Protocol&#xff0c;超文本传输协议&#xff1b;是一种建立在TCP上的无状态连接&#xff08;短连接&#xff09;。 整个基本的工作流程是&#xff1a;客户端发送一个HTTP请求&#xff08;Request &#xff09;&#xff0c;这个请求说明了客户端…