鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Search)

搜索框组件,适用于浏览器的搜索内容输入框等应用场景。

说明:

该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

Search(options?: { value?: string, placeholder?: ResourceStr, icon?: string, controller?: SearchController })

参数:

参数名参数类型必填参数描述
valuestring设置当前显示的搜索文本内容。
从API version 10开始,该参数支持$$双向绑定变量。
placeholderResourceStr10+设置无输入时的提示文本。
iconstring设置搜索图标路径,默认使用系统搜索图标。
说明:
icon的数据源支持本地图片和网络图片。
- 支持的图片格式包括png、jpg、bmp、svg、gif和pixelmap。
- 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp];base64,[base64 data], 其中[base64 data]为Base64字符串数据。
如果与属性searchIcon同时设置,则searchIcon优先。
controllerSearchController设置Search组件控制器。

属性

除支持通用属性外,还支持以下属性:

名称参数类型描述
searchButton10+value: string,
option?: SearchButtonOptions
搜索框末尾搜索按钮文本内容,默认无搜索按钮。
placeholderColorResourceColor设置placeholder文本颜色。
默认值:'#99182431'。
placeholderFontFont设置placeholder文本样式,包括字体大小,字体粗细,字体族,字体风格。目前仅支持默认字体族。
textFontFont设置搜索框内输入文本样式,包括字体大小,字体粗细,字体族,字体风格。目前仅支持默认字体族。
textAlignTextAlign设置文本在搜索框中的对齐方式。目前支持的对齐方式有:Start、Center、End。
默认值:TextAlign.Start
copyOption9+CopyOptions设置输入的文本是否可复制。
默认值:CopyOptions.LocalDevice,支持设备内复制。
设置CopyOptions.None时,当前Search中的文字无法被复制或剪切,仅支持粘贴。
searchIcon10+IconOptions设置左侧搜索图标样式。
cancelButton10+{
style? : CancelButtonStyle
icon?: IconOptions
}
设置右侧清除按钮样式。
默认值:
{
style:CancelButtonStyle.INPUT
}
fontColor10+ResourceColor设置输入文本的字体颜色。
默认值:'#FF182431'。
说明:
文本通用属性fontSize、fontStyle、fontWeight和fontFamily在textFont属性中设置。
caretStyle10+CaretStyle设置光标样式。
默认值:
{
width: '1.5vp',
color: '#007DFF'
}
enableKeyboardOnFocus10+booleanSearch获焦时,是否绑定输入法
默认值:true。从API version 10开始,获焦默认绑定输入法。
selectionMenuHidden10+boolean设置长按输入框或者右键输入框时,是否弹出文本选择菜单。
默认值:false
customKeyboard10+CustomBuilder设置自定义键盘。
说明:
当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载指定的自定义组件。
自定义键盘的高度可以通过自定义组件根节点的height属性设置,宽度不可设置,使用系统默认值。
自定义键盘采用覆盖原始界面的方式呈现,不会对应用原始界面产生压缩或者上提。
自定义键盘无法获取焦点,但是会拦截手势事件。
默认在输入控件失去焦点时,关闭自定义键盘,开发者也可以通过stopEditing方法控制键盘关闭。
如果设备支持拍摄输入,设置自定义键盘后,该输入框会不支持拍摄输入。
type11+SearchType设置输入框类型。
默认值:SearchType.Normal
maxLength11+number设置文本的最大输入字符数。
默认不设置最大输入字符数限制。
到达文本最大字符限制,将无法继续输入字符。

IconOptions10+对象说明

参数名参数类型必填参数描述
sizeLength图标尺寸,不支持百分比。
colorResourceColor图标颜色。
srcResourceStr图标/图片源。

CaretStyle10+对象说明

参数名参数类型必填参数描述
widthLength光标尺寸,不支持百分比。
colorResourceColor光标颜色。

SearchButtonOptions10+对象说明

参数名参数类型必填参数描述
fontSizeLength文本按钮字体大小,不支持百分比。
fontColorResourceColor文本按钮字体颜色。

CancelButtonStyle10+枚举说明

名称描述
CONSTANT清除按钮常显样式。
INVISIBLE清除按钮常隐样式。
INPUT清除按钮输入样式。

SearchType11+枚举说明

名称描述
Normal基本输入模式。
支持输入数字、字母、下划线、空格、特殊字符。
Email邮箱地址输入模式。支持数字,字母,下划线,以及@字符(只能存在一个@字符)。
Number纯数字输入模式。
PhoneNumber电话号码输入模式。
支持输入数字、+ 、-、*、#,长度不限。

事件

除支持通用事件外,还支持以下事件:

名称功能描述
onSubmit(callback: (value: string) => void)点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。
-value: 当前搜索框中输入的文本内容。
onChange(callback: (value: string) => void)输入内容发生变化时,触发该回调。
-value: 当前搜索框中输入的文本内容。
onCopy(callback: (value: string) => void)长按搜索框弹出剪切板之后,点击剪切板的复制按钮触发该回调。
-value: 复制的文本内容。
onCut(callback: (value: string) => void)长按搜索框弹出剪切板之后,点击剪切板的剪切按钮触发该回调。
-value: 剪切的文本内容。
onPaste(callback: (value: string, event11+: PasteEvent) => void)长按搜索框弹出剪切板之后,点击剪切板的粘贴按钮触发该回调。
- value: 粘贴的文本内容。
- event: 用户自定义的粘贴事件。
onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)10+文本选择的位置发生变化时,触发该回调。
selectionStart:文本选择区域起始位置,文本框中文字的起始位置为0。
selectionEnd:文本选择区域结束位置。
onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void)10+文本内容滚动时,触发该回调。
totalOffsetX:文本在内容区的横坐标偏移,单位px。
totalOffsetY:文本在内容区的纵坐标偏移,单位px。

SearchController

Search组件的控制器,目前通过它可控制Search组件的光标位置。

导入对象

controller: SearchController = new SearchController()

caretPosition

caretPosition(value: number): void

设置输入光标的位置。

参数:

参数名参数类型必填参数描述
valuenumber从字符串开始到光标所在位置的长度。

stopEditing10+

stopEditing(): void

退出编辑态。

getTextContentRect10+

getTextContentRect(): RectResult

获取已编辑文本内容区域相对组件的位置和大小,返回值单位为像素。

返回值:

类型说明
RectResult已编辑文本内容的相对组件的位置和大小。

说明:

  • 返回的位置信息是相对Search组件中搜索图标的偏移值。
  • 不输入文本时,返回值中有相对Search组件的位置信息,但大小为0。
  • 返回值中的位置信息是第一个字符相对于可编辑组件的位置。

RectResult10+

位置和大小,单位均为像素。

参数类型描述
xnumber水平方向横坐标。
ynumber竖直方向纵坐标。
widthnumber内容宽度大小。
heightnumber内容高度大小。

getTextContentLineCount10+

getTextContentLineCount(): number

获取已编辑文本内容的行数。

返回值:

类型说明
number已编辑文本内容行数。

getCaretOffset11+

getCaretOffset(): CaretOffset

返回当前光标所在位置信息。

返回值:

类型说明
CaretOffset光标相对输入框的位置。

说明:

  • 返回的位置信息是相对Search组件中搜索图标的偏移值。
  • 不输入文本时,返回值中有相对Search组件的位置信息。
  • 返回值中的位置信息是光标相对于可编辑组件的位置。
  • 在当前帧更新光标位置同时调用该接口,该接口不生效。

示例

示例1

// xxx.ets
@Entry
@Component
struct SearchExample {@State changeValue: string = ''@State submitValue: string = ''@State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }controller: SearchController = new SearchController()build() {Column({space: 10}) {Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)Text('onChange:' + this.changeValue).fontSize(18).margin(15)Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller }).searchButton('SEARCH').width('95%').height(40).backgroundColor('#F5F5F5').placeholderColor(Color.Grey).placeholderFont({ size: 14, weight: 400 }).textFont({ size: 14, weight: 400 }).onSubmit((value: string) => {this.submitValue = value}).onChange((value: string) => {this.changeValue = value}).margin(20)Button('Set caretPosition 1').onClick(() => {// 设置光标位置到输入的第一个字符后this.controller.caretPosition(1)})Button('Get CaretOffset').onClick(() => {this.positionInfo = this.controller.getCaretOffset()})}.width('100%')}
}

search

示例2

// xxx.ets
@Entry
@Component
struct SearchExample {@State changeValue: string = ''@State submitValue: string = ''build() {Column() {Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)Search({ value: this.changeValue, placeholder: 'Type to search...' }).searchButton('SEARCH').searchIcon({src: $r('app.media.search')}).cancelButton({style: CancelButtonStyle.CONSTANT,icon: {src: $r('app.media.cancel')}}).width('90%').height(40).maxLength(20).backgroundColor('#F5F5F5').placeholderColor(Color.Grey).placeholderFont({ size: 14, weight: 400 }).textFont({ size: 14, weight: 400 }).onSubmit((value: string) => {this.submitValue = value}).onChange((value: string) => {this.changeValue = value}).margin(20)}.width('100%')}
}

searchButton

示例3

// xxx.ets
@Entry
@Component
struct SearchExample {controller: SearchController = new SearchController()@State inputValue: string = ""// 自定义键盘组件@Builder CustomKeyboardBuilder() {Column() {Button('x').onClick(() => {// 关闭自定义键盘this.controller.stopEditing()})Grid() {ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {GridItem() {Button(item + "").width(110).onClick(() => {this.inputValue += item})}})}.maxCount(3).columnsGap(10).rowsGap(10).padding(5)}.backgroundColor(Color.Gray)}build() {Column() {Search({ controller: this.controller, value: this.inputValue})// 绑定自定义键盘.customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })}}
}

customKeyboard

最后,有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(Harmony NEXT)资料用来跟着学习是非常有必要的。 

这份鸿蒙(Harmony NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

腾讯T10级高工技术,安卓全套VIP内容 →Android全套学习资料

腾讯T10级高工技术,安卓全套VIP课程

鸿蒙(Harmony NEXT)最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

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

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

相关文章

webpack5高级--02_提升打包构建速度

提升打包构建速度 一、HotModuleReplacement 为什么 开发时我们修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。 所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模…

混合云构建-VPN打通阿里云和Azure云

要在阿里云和Azure云之间通过VPN打通网络,您需要在两边分别设置VPN网关,并配置相应的连接和路由规则以确保两个云环境之间的网络流量可以互通。以下是一个基本的步骤指南: 为了更具体地说明如何在阿里云和Azure之间通过VPN打通网络,我们将通过一个简化的示例来演示整个过程…

ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript 不同版本4.8-4.28(最新版)离线部署

ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript 不同版本4.8-4.28(最新版)SDK离线部署 测试资源4.18 以及之前版本4.19 以及之后版本 接触一段时间 ArcGIS JSAPI 之后,整体感觉还好,后来需要解决不同版本问题&#xff0…

redis中通用命令以及key过期策略

通用命令 exists 判断某个key是否存在。 exists key时间复杂度:O(1) 返回值:key 存在的个数。 del 删除指定的 key,可以一次删除一个或者多个。 del key时间复杂度:O(1) 返回值:删除掉的 key 的个数。 expire…

数据结构·复杂度

目录 1 时间复杂度 2 大O渐进表示法 举例子(计算时间复杂度为多少) 3 空间复杂度 前言:复杂度分为时间复杂度和空间复杂度,两者是不同维度的,所以比较不会放在一起比较,但是时间复杂度和空间复杂度是用…

汉服|高校汉服租赁网站|基于Springboot的高校汉服租赁网站设计与实现(源码+数据库+文档)

高校汉服租赁网站目录 目录 基于Springboot的高校汉服租赁网站设计与实现 一、前言 二、系统设计 三、系统功能设计 1、汉服信息管理 2、汉服租赁管理 3、公告管理 4、公告类型管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选…

22.1 线程安全及性能:ThreadLocal(❤❤)

22.1 分布式_ThreadLocal 1. 简介1.1 使用场景2. ThreadLocal实现线程独享对象2.1 基于SimpleDateFormat讲解ThreadLocal优势1. 2个线程分别使用SimpleDateFormat对象2. 10个线程甚至更多使用SimpleDateFormat对象3. 基于线程池使用SimpleDateFormat对象4. 优化SimpleDateForma…

GPT实战系列-构建多参数的自定义LangChain工具

GPT实战系列-构建多参数的自定义LangChain工具 LangChain系列 GPT实战系列-LangChain如何构建基通义千问的多工具链 GPT实战系列-构建多参数的自定义LangChain工具 GPT实战系列-通过Basetool构建自定义LangChain工具方法 GPT实战系列-一种构建LangChain自定义Tool工具的简…

SQL Server错误:15404

执行维护计划失败,提示SQL Server Error 15404 无法获取有关... 异常如下图: 原因:数据库用户名与计算机名称不一致 解决办法:1.重名称数据库用户名 将前缀改成计算机名 2.重启SQL Server代理

【数据挖掘】实验1:R入门(内含详细R和RStudio安装教程)

实验1:R入门 一:实验目的与要求 1:根据上课PPT内容,掌握课堂知识并进行代码练习操作,提供练习过程和结果。 2:可COPY代码运行结果直接提交,如涉及到输出图等可截图。 二:实验内容 …

免费搭建导航网站教程带免费空间域名源码

使用免费空间和免费域名免费搭建一个导航网站 手把手视频教程 https://pan.xunlei.com/s/VNsoMehs7RCjz3IClV6h2vNMA1?pwdq596#

中国首个基于区块链的分布式算力网络上线

随着美国人工智能公司OpenAI近期发布的Sora视频模型,全球对高性能算力的需求突破了历史新高。Sora的创新在于它能够以超长生成时间、多角度镜头捕捉,理解物理世界的能力,这不仅是技术的一大突破,更是对算力需求的一大挑战。在这样…

使用npm版本管理工具解决npm 的EACCES permissions errors when installing packages globally错误

EACCES错误通常表示“权限被拒绝”,意味着您没有足够的权限来执行某个操作。在计算机领域,尤其是在文件系统和程序安装中,这个错误很常见。以下是可能导致EACCES错误的原因以及相应的解决方法: 文件系统权限:当您尝试…

【开源】SpringBoot框架开发智慧社区业务综合平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 业务类型模块2.2 基础业务模块2.3 预约业务模块2.4 反馈管理模块2.5 社区新闻模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 业务类型表3.2.2 基础业务表3.2.3 预约业务表3.2.4 反馈表3.2.5 社区新闻表 四、系统展…

【机器学习300问】34、决策树对于数值型特征如果确定阈值?

还是用之前的猫狗二分类任务举例(这个例子出现在【机器学习300问】第33问中),我们新增一个数值型特征(体重),下表是数据集的详情。如果想了解更多决策树的知识可以看看我之前的两篇文章: 【机器…

按键+串口发送实验

摸鱼记录 Day_15 ~( ̄▽ ̄~)(~ ̄▽ ̄)~ review 前边已经学习了: 串口发送Vivado 串口通信(UART)------串口发送-CSDN博客 按键基于状态机的按键消抖实现-CSDN博客 1. …

STM32外设分类--学习笔记

简介: 本文在于根据自己的理解,将stm32f103外设按照功能分个类别,便于记忆。下面的几张图一定要熟悉,后期编写代码时能够快速找到想要的功能和对应的引脚。 我使用的工具链是:使用CubeMX完成keil5工程搭建和引脚初始化功能,然后用…

Grafana

介绍 官网:https://grafana.com/ Grafana 是一个开源的指标分析和可视化工具,它被广泛用于展示和监控云基础设施和应用程序的实时数据。Grafana 提供了一个强大且易于使用的界面,允许用户创建各种图表、图形和仪表盘,以直观地展…

探索HDFS读写流程、节点机制和数据完整性

目录 写在前面一、HDFS的读写流程1.1 HDFS写数据流程1.2 机架感知1.3 HDFS读数据流程1.4 小结 二、 NameNode和SecondaryNameNode2.1 NN和2NN工作机制2.2 Fsimage和Edits解析2.2.1 oiv查看Fsimage文件2.2.2 oev查看Edits文件 2.3 CheckPoint时间设置 三、DataNode3.1 DataNode工…

案例分析篇14:信息系统安全设计考点(2024年软考高级系统架构设计师冲刺知识点总结系列文章)

专栏系列文章推荐: 2024高级系统架构设计师备考资料(高频考点&真题&经验)https://blog.csdn.net/seeker1994/category_12593400.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】(2024年软考高级系统架构设计师冲刺知识点总结-案例分析篇-…