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

本文主要是介绍鸿蒙开发实例：【demo-搜索历史记录】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

图片演示效果：

鸿蒙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知识←前往。下面是鸿蒙开发的学习路线图。