搜索历史全量代码与效果：ArkTS 在 HarmonyOS 的极简实现

发布时间：2026/9/23 15:45:54

搜索历史全量代码与效果：ArkTS 在 HarmonyOS 的极简实现
实例搜索历史记录SearchHistory收官文章一、文件清单文件职责行数database/SearchHistoryDao.ets数据层去重插入、LIMIT 淘汰、CRUD、种子约 200 行pages/samples/SearchHistoryPage.etsUI 层标签流 时间线 清空约 150 行resources/base/profile/main_pages.json路由注册pages/samples/SearchHistoryPage追加一行pages/Index.ets首页入口按钮追加一个按钮本篇文章完整展示可编译运行的 SearchHistoryPage 代码最后描述运行效果。二、SearchHistoryPage 完整代码import{common}fromkit.AbilityKit;import{promptAction}fromkit.ArkUI;import{SearchHistoryDao,SearchHistory}from../../database/SearchHistoryDao;EntryComponentstruct SearchHistoryPage{Statehistories:SearchHistory[][];Statekeyword:string;privatecontext:common.UIAbilityContextgetContext(this)ascommon.UIAbilityContext;aboutToAppear():void{this.refresh();}asyncrefresh():Promisevoid{try{awaitSearchHistoryDao.initSeedData(this.context);this.historiesawaitSearchHistoryDao.queryAll(this.context);}catch(e){promptAction.showToast({message:加载失败:${e}});}}/** 搜索记录关键词去重 超限淘汰 */asyncdoSearch(kw:string):Promisevoid{if(!kw.trim()){return;}awaitSearchHistoryDao.addKeyword(this.context,kw);awaitthis.refresh();promptAction.showToast({message: 搜索「${kw.trim()}」});}clearAll():void{promptAction.showDialog({title:清空历史,message:确定清空全部搜索历史吗,buttons:[{text:取消,color:#808080},{text:清空,color:#EF4444},],}).then((res:promptAction.ShowDialogSuccessResponse){if(res.index1){SearchHistoryDao.clearAll(this.context).then(async(){awaitthis.refresh();promptAction.showToast({message: 已清空});});}});}deleteOne(id:number):void{SearchHistoryDao.deleteOne(this.context,id).then(async(){awaitthis.refresh();});}privatefmtTime(ts:number):string{constdnewDate(ts);constnownewDate();constsameDayd.getFullYear()now.getFullYear()d.getMonth()now.getMonth()d.getDate()now.getDate();if(sameDay){return今天${String(d.getHours()).padStart(2,0)}:${String(d.getMinutes()).padStart(2,0)};}return${d.getMonth()1}月${d.getDate()}日;}build(){Column(){// 标题栏 Row(){Column(){Text( 搜索历史).fontSize(22).fontWeight(FontWeight.Bold)Text(保留最近${this.histories.length}条).fontSize(12).fontColor(#999999).margin({top:2})}.alignItems(HorizontalAlign.Start).layoutWeight(1)Text(清空).fontSize(14).fontColor(#EF4444).onClick(()this.clearAll())}.width(100%).padding({left:16,right:16,top:12})// 搜索框 Row({space:8}){TextInput({placeholder:输入关键词搜索…,text:this.keyword}).layoutWeight(1).height(40).backgroundColor(Color.White).borderRadius(20).onChange((v:string)this.keywordv).onSubmit(()this.doSearch(this.keyword))Button(搜索).height(40).backgroundColor(#3B82F6).fontColor(Color.White).onClick(()this.doSearch(this.keyword))}.width(94%).margin({top:12})// 历史标签流 Column(){Text(最近搜索).fontSize(16).fontWeight(FontWeight.Bold)if(this.histories.length0){Column(){Text().fontSize(40)Text(暂无搜索历史).fontSize(14).fontColor(#999999).margin({top:8})}.width(100%).margin({top:40})}else{Flex({wrap:FlexWrap.Wrap}){ForEach(this.histories,(h:SearchHistory){Row({space:6}){Text(h.keyword).fontSize(14)if(h.count1){Text(${h.count}次).fontSize(10).padding({left:5,right:5,top:2,bottom:2}).borderRadius(8).backgroundColor(#DBEAFE).fontColor(#3B82F6)}}.padding({left:14,right:14,top:8,bottom:8}).borderRadius(18).backgroundColor(Color.White).margin({right:8,bottom:8}).onClick(()this.doSearch(h.keyword)).gesture(LongPressGesture().onAction(()this.deleteOne(h.id)))},(h:SearchHistory)${h.id}-${h.keyword})}.width(100%).margin({top:12})}}.width(94%).padding(16).margin({top:12}).alignItems(HorizontalAlign.Start)// 时间线 Column(){Text(搜索时间线).fontSize(16).fontWeight(FontWeight.Bold)ForEach(this.histories,(h:SearchHistory){Row({space:10}){Text(·).fontSize(20).fontColor(#3B82F6)Text(h.keyword).fontSize(14).layoutWeight(1)Text(this.fmtTime(h.searchTime)).fontSize(11).fontColor(#999999)Text(✕).fontSize(14).fontColor(#CCCCCC).onClick(()this.deleteOne(h.id))}.width(100%).padding({top:8,bottom:8})},(h:SearchHistory)t-${h.id})}.width(94%).padding(16).margin({top:12,bottom:24}).alignItems(HorizontalAlign.Start)}.width(100%).height(100%).backgroundColor(#F8FAFC)}}三、注册与运行main_pages.json追加pages/samples/SearchHistoryPageIndex.ets追加Button( 7 搜索历史记录).fontSize(15).width(70%).onClick(()this.getUIContext().getRouter().pushUrl({url:pages/samples/SearchHistoryPage}))构建验证 →BUILD SUCCESSFUL。四、运行效果描述进入「 7 搜索历史记录」第一屏标题栏「 搜索历史 · 保留最近 10 条」右上角红色「清空」圆角搜索框 蓝色「搜索」按钮下方「最近搜索」标签流——10 个白色胶囊标签铺开HarmonyOS 开发×8 蓝色徽标、ArkTS 语法×6、SQLite 实战×5…标签流下方「搜索时间线」——蓝色圆点 关键词 相对时间 ✕。交互一重搜上浮点「HarmonyOS 开发」标签 → Toast「 搜索「HarmonyOS 开发」」→ 该词时间戳刷新、次数 8→9上浮到标签流第一位。交互二新增淘汰输入新词「组件通信」搜索 → 历史变 11 条 → trim 自动淘汰最旧的「弹窗组件」→ 列表保持 10 条新词出现在最前。交互三长按删除长按任意标签 → 该词消失deleteOne列表重排。交互四一键清空点「清空」→ 确认框 → 清空后标签流显示「 暂无搜索历史」空态。五、代码质量要点回顾关注点本实例做法去重keyword UNIQUE 先查后改上限trim 淘汰MAX_KEEP 常量单一来源上浮刷新 search_time ORDER BY DESC清空确认showDialog index 1手势删除LongPressGesture 长按空态 暂无搜索历史六、文章小结实例 7「搜索历史记录」收官。五篇文章覆盖去重建表7-1→ 极简标签流 UI7-2→ UPSERT 与 LIMIT 淘汰7-3→ 热词种子7-4→ 全量代码7-5。核心技术是「唯一约束 先查后改 DELETE IN (SELECT LIMIT)」三件套——这是「有上限的最近记录」的通用数据层答案。极简的 3 字段表和极简的标签流 UI 相得益彰是「小功能也能讲出数据库门道」的典范。下一个实例8 商品分页列表将引入LIMIT/OFFSET 分页 懒加载——大数据量列表的核心能力UI 是双列瀑布流。七、核心代码片段补充讲解1. 搜索框 onChange 实时联动TextInput的onChange在每次输入变化时触发把输入值同步到状态变量keywordTextInput({placeholder:输入关键词搜索…,text:this.keyword}).onChange((v:string)this.keywordv)State keyword是响应式数据源它同时驱动 TextInput 的text属性和后续搜索逻辑。注意单向绑定——text: this.keyword只是初始值真正同步靠 onChange 回调若去掉 onChange输入框将无法输入。2. 热词标签流渲染标签流用Flex({ wrap: FlexWrap.Wrap })ForEach渲染每项是一个白底胶囊ForEach(this.histories,(h:SearchHistory){Row({space:6}){Text(h.keyword).fontSize(14)if(h.count1){Text(${h.count}次).fontSize(10).padding({left:5,right:5,top:2,bottom:2}).borderRadius(8).backgroundColor(#DBEAFE).fontColor(#3B82F6)}}.borderRadius(18).backgroundColor(Color.White).onClick(()this.doSearch(h.keyword)).gesture(LongPressGesture().onAction(()this.deleteOne(h.id)))},(h:SearchHistory)${h.id}-${h.keyword})关键点keyGenerator用id-keyword组合键保证去重后 key 稳定、diff 最小if (h.count 1)条件渲染次数徽标只有搜索多次的词才带蓝色「×N次」小角标。3. 清空历史按钮右上角「清空」走showDialog二次确认res.index 1判断点击的是第二个按钮清空Text(清空).fontSize(14).fontColor(#EF4444).onClick(()this.clearAll())删除类操作一律带确认弹窗避免误触造成不可恢复的数据丢失——这是移动端 UX 的底线。八、运行效果细节输入即同步在搜索框输入「Ark」的瞬间页面并无跳转——onChange已把输入实时写入keyword点击「搜索」或回车即触发doSearchToast 弹出「 搜索「Ark」」输入→记录→反馈一气呵成。点击标签回填点击标签「HarmonyOS 开发」时该词同时作为输入回填到搜索框text: this.keyword由状态驱动并立即发起搜索——「点一下、搜一下」的零成本回搜体验。过滤动画节奏标签增删时 ForEach 按 key 最小化 diff——被淘汰的旧词直接移除、新词插入队首视觉上呈「标签流整体前移一格」的顺滑过渡无闪烁、无整列重排。九、代码质量要点补充关注点本实例做法输入绑定onChange 单向同步 State 单一数据源列表 keyid-keyword组合键diff 稳定条件徽标count 1才渲染次数角标删除确认清空走 showDialog、单条长按不打扰淘汰边界MAX_KEEP 常量 trim 幂等可重入十、FAQQ1为什么 TextInput 要绑定text: this.keywordA让状态变量成为唯一数据源。搜索成功后如需回填或清空输入框只需改keyword一个变量UI 自动刷新避免多处分叉状态。Q2标签流为什么用 Flex 而不是 ListA历史词数量少≤10且需自动换行Flex wrap 天然支持「从左到右、放不下换行」的铺排List 更适合数量大、需滚动的场景两害相权取轻。Q3长按删除为什么不弹确认框A单条删除损失小且可再搜回来长按本身已是一道防误触门槛再加确认框反而打断连续操作清空是全量不可逆操作才需要二次确认。Q4onChange 会触发数据库写入吗A不会。onChange 只更新内存状态keyword只有点击搜索/回车doSearch才落库——输入过程零 IO性能无压力。

相关新闻

稳定性质量建设-服务链路的超时漏斗设置

稳定性质量建设-服务链路的超时漏斗设置

微服务工程中，对于核心链路，各个节点的超时如何进行设置？是否有成熟的行业经验？答案是 “有”全链路从上到下，超时预算逐层递减（上游 > 下游），下游必须先超时、先释放资源&#x…

2026/9/21 20:05:08 阅读更多 →
一天一道算法题（11）：旋转数组的思路与实现解析

一天一道算法题（11）：旋转数组的思路与实现解析

48. 旋转图像 文章目录[48. 旋转图像](https://leetcode.cn/problems/rotate-image/)- **复制数组暴力(不超时，但是题目不允许这样)**- **原地旋转**- **两次翻转**结语如果喜欢该算法系列，欢迎大家关注订阅，我会经常更新力扣算法题解&#x…

2026/9/17 4:19:45 阅读更多 →
360CDN SDK游戏盾：DDoS防护核心技术解析与实战

360CDN SDK游戏盾：DDoS防护核心技术解析与实战

1. 游戏防护领域的现状与挑战在当前的游戏行业环境中，DDoS攻击已经成为运营过程中最头疼的问题之一。我经历过多次凌晨被叫醒处理服务器被攻击的情况，深知一款可靠的防护工具对游戏团队意味着什么。根据2023年游戏行业安全报告，超过78%的中大…

2026/9/19 11:08:40 阅读更多 →

最新新闻

3步搞定正规投彩赚钱的平台实战项目

3步搞定正规投彩赚钱的平台实战项目

3步搞定正规投彩赚钱的平台实战项目 配置环境就卡半天？别急，很多转行做后端或全栈的朋友，在搭建第一个 实战项目 时，最容易在依赖安装和权限配置上掉坑。尤其是涉及到像“正规投彩赚钱的平台”这类需要高并发、强校验的业务场景，环境没调通，代码写得…

2026/9/23 15:45:22 阅读更多 →
基于YOLOv11的绝缘子缺陷检测实战：从训练到部署全解析

基于YOLOv11的绝缘子缺陷检测实战：从训练到部署全解析

简介：这份PDF教程面向电力巡检、无人机视觉检测与目标检测方向的开发者及学生，围绕绝缘子裂纹、破损、污秽、老化等典型缺陷，讲解如何用YOLOv11搭建从数据采集到模型部署的完整检测流程。资源共1个PDF文件，压缩包约1.84MB&#xf…

2026/9/23 15:45:21 阅读更多 →
2026最新百度文档面试必问 3个高频坑点一次讲透

2026最新百度文档面试必问 3个高频坑点一次讲透

2026最新百度文档面试必问 3个高频坑点一次讲透 报错一堆看不懂 StackTrace？别慌，这是后端面试最典型的“劝退”场景。很多候选人一看到红色日志就脑子空白，其实考官根本不在乎你能不能秒修 Bug，他们在意的是你…

2026/9/23 15:45:21 阅读更多 →
C语言实现棋局胜负判断：四方向扫描算法与边界处理

C语言实现棋局胜负判断：四方向扫描算法与边界处理

最近接到一个小需求：写一个 C 语言程序，输入一局已经下完的棋盘，判断这局棋到底谁赢了。听起来非常简单，但真动手写的时候，你会发现“胜负判断”这四个字背后藏着不少细节：棋盘怎么存、输入怎么读、扫描算法…

2026/9/23 15:45:21 阅读更多 →
AB PF700变频器调试：重建控制链路信任关系

AB PF700变频器调试：重建控制链路信任关系

简介：本资源是一份面向工业自动化工程师与电气调试技术人员的AB（罗克韦尔）PF700系列变频器实操调试指南，聚焦现场高频问题与核心参数配置逻辑。内容系统覆盖变频器初始化、编码器接线与设置（含XTI/XEM端子电压要求及急…

2026/9/23 15:45:21 阅读更多 →
菱形虚拟继承的原理

菱形虚拟继承的原理

目录 摘要： 一 ：菱形继承的概念及问题 1：概念 2：问题 二：虚拟菱形继承 1：语法 2：原理 ①：菱形继承的内存分布 ②：虚拟菱形继承的内存分布 ③：偏移量…

2026/9/23 15:44:20 阅读更多 →

日新闻

3招搞定手机怎么下载微信面试难题实战项目解析

3招搞定手机怎么下载微信面试难题实战项目解析

3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A…

2026/9/23 0:00:23 阅读更多 →
2k显示屏性能优化踩坑：版本升级后API全变了，这份源码解析救了我

2k显示屏性能优化踩坑：版本升级后API全变了，这份源码解析救了我

2k显示屏性能优化踩坑：版本升级后API全变了，这份源码解析救了我 刚把开发环境的显示器从1080P换到2K，跑老项目直接报错，版本升级后 API…

2026/9/23 0:01:25 阅读更多 →
3步搞定美眉图实战项目，告别官方文档抓不住重点

3步搞定美眉图实战项目，告别官方文档抓不住重点

3步搞定美眉图实战项目，告别官方文档抓不住重点 官方文档翻了三遍还是云里雾里？别急，美眉图在实战项目中常被用来做数据可视化，但它的原理比你想的简单。今天咱们直接上手，用一个完整的小项目把美眉图跑通，不再死磕那些冗长的理论说明。…

2026/9/23 0:01:25 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事：用Flutter给OpenHarmony做一款游戏集合类的App，说白了就是把若干小游戏塞进一个壳里，用统一入口分发。这个方向本身不算新鲜，真正让我花了不少心思的，是首页那堆游戏卡…

2026/9/23 4:55:02 阅读更多 →
Word表格编号全攻略：从列表编号到题注交叉引用

Word表格编号全攻略：从列表编号到题注交叉引用

写Word文档，最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事：今天在表后面多加了两个空白行，明天给客户交稿前发现整个章节的编号全部错位，光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/23 4:49:06 阅读更多 →
从第一个站到第二个站：独立开发者的静态网站选型与落地实践

从第一个站到第二个站：独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年，说实话，第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年，流量惨淡、功能臃肿、代码自己都懒得看第二遍之后，我才慢慢琢磨明白一个道理：第一个网站是练手&…

2026/9/23 9:53:41 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能分类：[AI/大模型]细分主题：AI 增强型 CI/CD 流水线自动化与 GitOps 实践：Agent 工作流、工具调用与任务拆解：从原型到生产的验收清单很多团队在尝试用大…

2026/9/23 9:53:40 阅读更多 →
容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场分类：[工程技术]细分主题：Kubernetes 生产环境运维与排障实战：可复制的项目复盘模板与决策记录大部分团队的事故复盘报告，最后都变成了躺在 Confluence 或钉…

2026/9/23 9:53:40 阅读更多 →
容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步分类：[工程技术]细分主题：Docker 容器化技术与镜像安全管理：核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用（包含 Web 接口、后台…

2026/9/23 9:53:40 阅读更多 →