鸿蒙开发实例:【demo-搜索历史记录】

 图片演示效果:

cke_1568.png

鸿蒙OS开发更多内容↓点击HarmonyOS与OpenHarmony技术
鸿蒙技术文档开发知识更新库gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md在这。或+mau123789学习,是v喔

代码演示:

// 注:当前代码基于宽度为720的设计稿进行适配,使用lpx单位。
// 整段代码描述的功能:
// 该代码实现了一个简单的搜索功能组件,其中包括:
// 1. 输入框:用户可以在此输入要搜索的内容;
// 2. 搜索按钮:点击后,将当前输入内容添加到搜索历史记录的首位,若有重复则移除重复项,并保持历史记录不超过10条;
// 3. 搜索历史标题和清空记录按钮:展示搜索历史记录列表,并提供清空全部历史记录的功能;
// 4. 搜索历史记录列表:按照时间最近的顺序显示搜索历史记录,最多显示10条。
@Entry
@Component
struct test {// 定义状态变量,用于存储输入框的当前值@State inputValue: string = ''// 定义状态变量,用于存储搜索历史记录的数组@State historyValueArr: Array<string> = ['张三', '李四', '举头望明月', '低头思故乡', 'HarmonyOs', '不可能,绝对不可能']// 构建UI组件build() {// 主体内容使用Column布局,垂直堆叠组件Column() {// 输入框和搜索按钮组合,使用Row布局,水平排列Row() {// 创建一个TextInput输入框TextInput({placeholder: '请输入内容',text: this.inputValue}).width('524.31lpx') // 设置宽度.height('70lpx') // 设置高度.fontSize('27lpx') // 设置字体大小.backgroundColor("#ffffff") // 设置背景颜色// 输入框内容改变时,同步更新状态变量inputValue.onChange((value) => {this.inputValue = value})// 创建一个搜索按钮Button('搜索')// 按钮点击事件,处理搜索逻辑.onClick(() => {// 遍历历史记录数组,若找到与输入框内容相同的记录,从数组中移除for (let i = 0; i < this.historyValueArr.length; i++) {if (this.historyValueArr[i] === this.inputValue) {this.historyValueArr.splice(i, 1);break;}}// 将输入框内容添加到历史记录数组的首位this.historyValueArr.unshift(this.inputValue);// 若历史记录超过10条,则移除最后一项if (this.historyValueArr.length > 10) {this.historyValueArr.splice(this.historyValueArr.length - 1);}})}// 设置Row组件的宽度、对齐方式和内外边距.width('100%').justifyContent(FlexAlign.SpaceBetween).padding({left: '37lpx',top: '11lpx',bottom: '11lpx',right: '15lpx'})// 搜索历史标题和清除记录按钮组合,同样使用Row布局Row() {// 搜索历史标题Text('搜索历史').fontSize('31lpx').fontColor("#000000")// 清空记录按钮Text('清空记录').fontSize('27lpx').fontColor("#828385")// 清空记录按钮点击事件,清空历史记录数组.onClick(() => {this.historyValueArr.length = 0;})}// 设置Row组件的宽度、对齐方式和内外边距.width('100%').justifyContent(FlexAlign.SpaceBetween).padding({left: '37lpx',top: '11lpx',bottom: '11lpx',right: '37lpx'})// 使用Flex布局,按行(FlexDirection.Row)包裹搜索历史记录Flex({direction: FlexDirection.Row,wrap: FlexWrap.Wrap,}) {// 遍历历史记录数组,创建Text组件展示每一条历史记录ForEach(this.historyValueArr, (item: string, value: number) => {Text(item).padding({left: '15lpx',right: '15lpx',top: '7lpx',bottom: '7lpx'})// 设置背景颜色、圆角和间距.backgroundColor("#EFEFEF").borderRadius(10).margin('11lpx')})}// 设置Flex容器的宽度和内外边距.width('100%').padding({left: '26lpx',top: '11lpx',bottom: '11lpx',right: '26lpx'})}// 设置Column容器的宽度、高度和背景颜色.width('100%').height('100%').backgroundColor("#F8F8F8")}
}

鸿蒙开发岗位需要掌握那些核心要领?

目前还有很多小伙伴不知道要学习哪些鸿蒙技术?不知道重点掌握哪些?为了避免学习时频繁踩坑,最终浪费大量时间的。

自己学习时必须要有一份实用的鸿蒙(Harmony NEXT)资料非常有必要。 这里我推荐,根据鸿蒙开发官网梳理与华为内部人员的分享总结出的开发文档。内容包含了:【ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

废话就不多说了,接下来好好看下这份资料。

如果你是一名Android、Java、前端等等开发人员,想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。鸿蒙OpenHarmony知识←前往。下面是鸿蒙开发的学习路线图。

针对鸿蒙成长路线打造的鸿蒙学习文档。鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,帮助大家在技术的道路上更进一步。

其中内容包含:

《鸿蒙开发基础》鸿蒙OpenHarmony知识←前往

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

《鸿蒙开发进阶》鸿蒙OpenHarmony知识←前往

  1. Stage模型入门
  2. 网络管理
  3. 数据管理
  4. 电话服务
  5. 分布式应用开发
  6. 通知与窗口管理
  7. 多媒体技术
  8. 安全技能
  9. 任务管理
  10. WebGL
  11. 国际化开发
  12. 应用测试
  13. DFX面向未来设计
  14. 鸿蒙系统移植和裁剪定制
  15. ……

《鸿蒙开发实战》鸿蒙OpenHarmony知识←前往

  1. ArkTS实践
  2. UIAbility应用
  3. 网络案例
  4. ……

最后

鸿蒙是完全具备无与伦比的机遇和潜力的;预计到年底将有 5,000 款的应用完成原生鸿蒙开发,这么多的应用需要开发,也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长,学习鸿蒙势在必行!

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

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

相关文章

Java代码基础算法练习-报数问题-2024.03.26

任务描述&#xff1a; 有n个人围成一个圆圈分别编号1~n,从第1个到m循环报数&#xff0c;凡是报到m者离开&#xff0c;求n个 人离开圆圈的次序。 任务要求&#xff1a; 代码示例&#xff1a; package M0317_0331;import java.util.ArrayList; import java.util.List; import j…

时序预测 | Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测

时序预测 | Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测 目录 时序预测 | Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测&#xff08;完整源码和数据…

类的成员方法和构造方法

1.类的成员方法: class student_information:nameNoneageNonedef say(self):print(f"hello classmates,Im {self.name},{self.age}years old") # self 表示类对象自身&#xff0c;必须出现selfdef say1(self,msg): # msg 外部传入的参数print(f"hello classmate…

【王道训练营】第6题 输入一个整型数,判断是否是对称数,如果是,输出yes,否则输出no

文章目录 我的代码改正代码其他代码 我的代码 没有完成 #include<stdio.h> int main(){int a;int b;int c0;//位数int d0;//比较几次scanf("%d",&a);while(b!0){bb/10;c;}dc/2;//比较几次int ffor(int i0 ;i<d;i){int ec;//位数fa - a / (((e-i-1)*10…

移动无线电传播与衰弱

文章目录 一、 一般路径损耗模型1. 1 自由环境下路径损耗1. 2 实际情况1.3 考虑阴影衰落 二、代码仿真2.1 仿真代码2.2 数值结果分析 参考 一、 一般路径损耗模型 1. 1 自由环境下路径损耗 根据著名的 Friis 公式&#xff0c;基站发射一个功率&#xff0c;用户得到的功率为&a…

zabbix安装及使用(错误及解决方案)

安装zabbix 常见错误&#xff1a; Zabbix下载错误 6.0与5.0版本冲突 解决方法 yum -y install zabbix-server-mysql zabbix-web-mysql zabbix-get --skip-broken zabbix6.0-web 自己有数据库&#xff0c;使用以下命令 pid找不到 /var/log/zabbix/zabbix_server.log 错误&a…

解决Veeam备份服务器上磁带库状态显示offline断联

问题现象&#xff1a;周末服务器有断电后供电操作&#xff0c;再之后启动服务器发现veeam里磁带库连不上了。 检查磁带库&#xff0c;确认已开机了&#xff0c;带外也可登录 解决方法&#xff1a; 检查veeam服务器上的设备管理器&#xff0c;查看驱动是否正常 显示异常 右键选…

hadoop伪分布式环境启动时web端访问不到

在搭建hadoop伪分布式环境时&#xff0c;开启hdfs-site.sh后&#xff0c;web端访问不到&#xff0c;但是节点已经正常开启&#xff1a; 在尝试关闭防火墙后也没有效果&#xff0c;后来在/etc/hosts文件中加入本机的ip和主机名映射后&#xff0c;重新初始化namenode&#xff0c;…

C语言(结构体,联合体,枚举的讲解)

这期我们来讲解结构体&#xff0c;联合体&#xff0c;以及枚举的讲解&#xff0c;首先我们从概念开始一步一步的了解。 1&#xff0c;结构体 1.1概念 C 语言中的结构体是一种用户自定义的数据类型&#xff0c;它允许你将不同类型的变量组合在一起&#xff0c;从而形成一个新…

HBase常用的Filter过滤器操作

HBase过滤器种类很多&#xff0c;我们选择8种常用的过滤器进行介绍。为了获得更好的示例效果&#xff0c;先利用HBase Shell新建students表格&#xff0c;并往表格中进行写入多行数据。 一、数据准备工作 &#xff08;1&#xff09;在默认命名空间中新建表格students&#xf…

flask_restful规范返回值

使用方法 导入 flask_restful.marshal_with 装饰器 定义一个字典变量来指定需要返回的标准化字段&#xff0c;以及该字段的数据类型 在请求方法中&#xff0c;返回自定义对象的时候&#xff0c; flask_restful 会自动的读 取对象模型上的所有属性。 组装成一个符合标准化参…

AAPT: error: resource android:attr/dialogCornerRadius not found.

ERROR:D:\android.gradle\caches\transforms-3\b3b98118f65da38d0ad9da84cfc70a72\transformed\appcompat-1.0.0\res\values-v28\values-v28.xml:5:5-8:13: AAPT: error: resource android:attr/dialogCornerRadius not found. 请帮我看看这个错误是什么意思。我改如何做。 这个…

Linux环境基础开发工具使用——yum and vim

本篇将会介绍平时在Linux中开发常用到的一些工具&#xff0c;其中包括&#xff1a;软件包管理器 — yum&#xff0c;Liunx中的开发工具。具体的介绍了 yum 的相关操作以及 yum 源&#xff0c;同时还介绍了 windows与虚拟机如何进行的关联。然后对Liunx中的开发工具进行了详细的…

前端学习-CSS基础-Day1

一、CSS简介 1.1HTML局限性 只关注内容的语义&#xff0c;可以做简单的样式但是很臃肿且繁琐 1.2CSS优势 CSS层叠样式表&#xff0c;标记语言 设置HTML页面中的文本内容&#xff0c;图片外形&#xff0c;可以美化HTML&#xff0c;让页面布局更美观 HTML做框架&#xff0c;CSS做…

2020-Structure Aware Negative Sampling in Knowledge Graphs

摘要 使用对比估计学习知识图中实体和关系的低维表示是一种可扩展且有效的推断连接模式的方法。对比学习方法的一个关键方面是选择产生硬负样本的腐败分布&#xff0c;这迫使嵌入模型学习判别表示并找到观察数据的关键特征。虽然早期的方法要么采用过于简单的腐败分布&#xf…

基于java+springboot+vue实现的超市管理系统(文末源码+Lw+ppt)23-354

摘 要 系统根据现有的管理模块进行开发和扩展&#xff0c;采用面向对象的开发的思想和结构化的开发方法对超市管理的现状进行系统调查。采用结构化的分析设计&#xff0c;该方法要求结合一定的图表&#xff0c;在模块化的基础上进行系统的开发工作。在设计中采用“自下而上”…

坑爹的eslint配置

标题eslint 版本不一致 导致很多问题 比如无法保存的时候校验&#xff0c;首行缩进无效等 babel-eslint这个依赖的版本不一致非常坑 vscode我这里保存下两个版本下的配置 插件eslint 自己下载 1.webpack创建的项目 eslint版本 “eslint”: “^4.19.1”, “eslint-friendly-fo…

蓝桥杯刷题8

1. 世纪末的星期 import java.util.Calendar; public class Main {public static void main(String[] args) {Calendar calendar Calendar.getInstance();for(int year 1999;year<100000;year100){calendar.set(Calendar.YEAR,year);calendar.set(Calendar.MONTH,11);cale…

小苯的回文询问(

题目 离散化存储 #include<bits/stdc.h> using namespace std; #define int long long const int N2e59; int n,q,ans[N],a[N]; map<int,int> mp; vector<pair<int,int>>qr[N]; signed main(){ios::sync_with_stdio(false),cin.tie(0),cout.tie(0);c…

前端面试拼图-数据结构与算法(二)

摘要&#xff1a;最近&#xff0c;看了下慕课2周刷完n道面试题&#xff0c;记录下... 1. 求一个二叉搜索树的第k小值 二叉树(Binary Tree) 是一棵树 每个节点最多两个子节点 树节点的数据结构{value, left?, right?} 二叉树的遍历 前序遍历&#xff1a;root→left→right 中…