实例备忘录便签Memo技术六色便签种子、置顶与颜色覆盖一、种子数据的设计目标实例 11 的种子数据要撑起「多彩便签墙」设计目标12 张便签双列墙铺满两屏左右内容丰富六色全覆盖MEMO_COLORS 的六种颜色各 2 张——颜色筛选条每个色点都有数据3 张置顶置顶区有内容周会要点/超市采购/健身计划——置顶排序可见内容叙事每张便签是一个生活/工作场景会议要点、购物清单、读书摘抄…彩色墙有「生活剪影」感。二、12 张便签种子数据全表#标题内容摘要颜色置顶时间偏移1周会要点1. 进度汇报模板更新 2. 下周二上线灰度 3. 客户端 2.0 排期确认米黄✅1 天前2超市采购清单牛奶、鸡蛋、面包、香蕉、洗衣液、抽纸、垃圾袋粉✅1 天前3健身计划周一胸三头 周三背二头 周五腿 每次 30 分钟有氧收尾绿✅2 天前4读书摘抄「世界上只有一种真正的英雄主义…」——罗曼·罗兰蓝—3 天前5项目灵感给 App 加「每周回顾」入口自动汇总本周新增数据…紫—4 天前6回家机票国庆机票已订10 月 1 日 09:30 出发返程 10 月 6 日晚班橙—5 天前7电影清单待看流浪地球 3、沙丘 2、奥本海默、宇宙探索编辑部米黄—6 天前8生日提醒妈妈 6 月 18 日生日提前订蛋糕当天记得视频通话粉—7 天前9旅行攻略大理 5 日游洱海骑行、苍山索道、喜洲古镇、双廊看日落绿—8 天前10代码小抄ArkTS 列表懒加载onReachEnd 触发下一页注意 loading 防抖蓝—9 天前11待还账单信用卡 6 月账单 2450 元还款日 6 月 25 日紫—10 天前12愿望清单① 学会吉他 ② 跑一次半马 ③ 带爸妈去三亚 ④ 攒钱换相机橙—11 天前设计要点六色 × 2米黄工作/电影、粉购物/生日、绿健身/旅行、蓝摘抄/技术、紫灵感/账单、橙机票/愿望——每色 2 张筛选任一颜色都有结果3 张置顶周会要点工作、超市采购生活、健身计划健康——置顶区三色并排双键排序可见「置顶在前」内容有生活感会议、购物、健身、读书、旅行、账单、愿望——普通人的真实便签墙。三、代码实现constnowDate.now();constday86400000;constseed:MemoSeed[][/* 12 张见上表 */];for(constsofseed){constvalues:relationalStore.ValuesBucket{title:s.title,content:s.content,color:s.color,pinned:s.pinned,created_time:s.createdTime,updated_time:s.createdTime,};awaitstore.insert(MemoDao.TABLE,values);}hilog.info(DOMAIN,TAG,已填充 12 张彩色便签种子数据);MemoSeed 接口interfaceMemoSeed{title:string;content:string;color:string;pinned:number;createdTime:number;}无 id自增、无 updatedTime复用 createdTime——新便签没有编辑历史两个时间戳一致合理。幂等保护查 memo 表 COUNT非空即返回与其他实例同款模板。四、注入后的便签墙效果预测区块预期效果便签墙12 张彩色便签双列排列前 3 张带 周会/采购/健身后 9 张无图钉置顶排序置顶区 3 张米黄/粉/绿排在最前按更新时间倒序颜色筛选点粉色圆点 → 只剩 2 张超市采购、生日提醒标题栏「共 12 张便签」演示脚本进入页面 → 指着彩色墙说「这是今天的便利贴墙」→ 点便签说「置顶的重要事项」→ 点粉色圆点 → 只剩粉色便签采购生日→ 点「全部」恢复 → 点一张便签编辑换颜色 → 便签变色并上浮到同组顶部。五、验证方法hilog 日志搜MemoDao看到「已填充 12 张彩色便签种子数据」页面显示12 张彩签、3 张置顶、六色齐全数据库直查SELECTCOUNT(*)FROMmemo;-- 12SELECTcolor,COUNT(*)FROMmemoGROUPBYcolor;-- 每色 2SELECTCOUNT(*)FROMmemoWHEREpinned1;-- 3SELECTtitle,color,pinnedFROMmemoORDERBYpinnedDESC,updated_timeDESC;-- 前 3 行 pinned1后 9 行 pinned0交互验证点某便签 ⋯ → 「置顶」→ 便签跳到最前 再点「取消置顶」→ 回到普通区。六、FAQQ1为什么置顶便签只有 3 张A置顶区需要「有内容但不拥挤」——3 张正好展示「多张置顶共存」的形态如果只 1 张看不出置顶区的组概念。普通区 9 张保证滚动可见。置顶与普通 3:9 的比例是演示的最优解。Q2为什么每色 2 张而不是 1 张A筛选某色时「至少 2 条结果」让筛选后的墙面不至于太孤单也验证「筛选不破坏排序」2 张中置顶的排前面。每色至少 2 条是颜色筛选类种子的基本要求。Q3内容为什么有的短购物清单有的长健身计划A便签内容的天然差异——购物清单是罗列、健身计划是分段。长短混搭让便签墙的卡片高度参差双列瀑布流的「错落感」才真实。内容长度服务于布局真实感。Q4便签的 updated_time 全部等于 created_time排序会乱吗A不会——排序按 updated_time 降序种子数据的时间偏移1~11 天保证顺序最新的周会 1 天前排最前。同组内 updated_time 不同顺序确定。时间偏移的梯度让排序有明确顺序。Q5新增便签的默认颜色是什么A页面 openAdd 里this.fColor MEMO_COLORS[0]米黄数据库 DEFAULT ‘#FFE8A3’ 兜底——两层默认值一致。默认色的双保险UI 层预填 数据层兜底。七、文章小结本篇文章展示了实例 11 的种子数据12 张六色便签每色 2 张 3 张置顶 生活化内容。核心是「颜色全覆盖」与「置顶可见」两个设计——六色齐全让筛选条每点有结果置顶便签让双键排序一开屏就可见。便签墙的彩色效果和置顶排序在真实数据下得到完整验证。下一篇11-5是实例 11 的收官文章展示 MemoPage 全量代码与运行效果。八、完整 initSeedData 实现12 张便签的落库流水线initSeedData把「幂等检查 → 种子定义 → 逐条插入 → 日志确认」串成一条流水线先看全貌代码staticasyncinitSeedData(context:common.Context):Promisevoid{conststoreawaitMemoDao.getStore(context);// 幂等保护表内已有数据则跳过防止重复灌入constcountPredicatesnewrelationalStore.RdbPredicates(MemoDao.TABLE);constcountawaitstore.count(countPredicates);if(count0){hilog.info(DOMAIN,TAG,memo 表已有 %d 条数据跳过种子填充,count);return;}constday86400000;constnowDate.now();constseed:MemoSeed[][{title:周会要点,content:1. 进度汇报模板更新\n2. 下周二上线灰度\n3. 客户端 2.0 排期确认,color:#FFE8A3,pinned:1,createdTime:now-1*day},{title:超市采购清单,content:牛奶、鸡蛋、面包、香蕉、洗衣液、抽纸、垃圾袋,color:#FFC4D6,pinned:1,createdTime:now-1*day},{title:健身计划,content:周一胸三头\n周三背二头\n周五腿\n每次 30 分钟有氧收尾,color:#D5F5E3,pinned:1,createdTime:now-2*day},{title:读书摘抄,content:「世界上只有一种真正的英雄主义…」——罗曼·罗兰,color:#CDE8FF,pinned:0,createdTime:now-3*day},{title:项目灵感,content:给 App 加「每周回顾」入口自动汇总本周新增数据…,color:#E8D5F5,pinned:0,createdTime:now-4*day},{title:回家机票,content:国庆机票已订10 月 1 日 09:30 出发返程 10 月 6 日晚班,color:#FFD8B8,pinned:0,createdTime:now-5*day},{title:电影清单,content:待看流浪地球 3、沙丘 2、奥本海默、宇宙探索编辑部,color:#FFE8A3,pinned:0,createdTime:now-6*day},{title:生日提醒,content:妈妈 6 月 18 日生日提前订蛋糕当天记得视频通话,color:#FFC4D6,pinned:0,createdTime:now-7*day},{title:旅行攻略,content:大理 5 日游洱海骑行、苍山索道、喜洲古镇、双廊看日落,color:#D5F5E3,pinned:0,createdTime:now-8*day},{title:代码小抄,content:ArkTS 列表懒加载onReachEnd 触发下一页注意 loading 防抖,color:#CDE8FF,pinned:0,createdTime:now-9*day},{title:待还账单,content:信用卡 6 月账单 2450 元还款日 6 月 25 日,color:#E8D5F5,pinned:0,createdTime:now-10*day},{title:愿望清单,content:① 学会吉他 ② 跑一次半马 ③ 带爸妈去三亚 ④ 攒钱换相机,color:#FFD8B8,pinned:0,createdTime:now-11*day},];for(constsofseed){constvalues:relationalStore.ValuesBucket{title:s.title,content:s.content,color:s.color,pinned:s.pinned,created_time:s.createdTime,updated_time:s.createdTime,// 新便签无编辑历史两个时间戳一致};awaitstore.insert(MemoDao.TABLE,values);}hilog.info(DOMAIN,TAG,已填充 12 张彩色便签种子数据);}流水线四步拆解步骤代码作用1. 幂等检查store.countif (count 0) return空表才灌入防止重复2. 种子定义seed数组12 条数据源一眼看全3. 逐条插入forstore.insert落库await 保证顺序4. 日志确认hilog.info可观测验证执行两个值得注意的实现细节count 用 RdbPredicates 而非裸 SQL——与查询/更新同款 API 风格不拼字符串类型安全时间戳相对偏移now - n * day让 12 张便签的 created_time 呈 1~11 天梯度——不写死日期任何时候首启都能得到「最新在前」的排序效果。九、种子设计复盘颜色分布与置顶示例9.1 颜色分布矩阵六色各 2 张把同色两张摆在一起看语义分组颜色色值两张便签语义米黄#FFE8A3周会要点 / 电影清单工作 休闲粉#FFC4D6超市采购 / 生日提醒家庭采购绿#D5F5E3健身计划 / 旅行攻略健康 出行蓝#CDE8FF读书摘抄 / 代码小抄学习 技术紫#E8D5F5项目灵感 / 待还账单创意 财务橙#FFD8B8回家机票 / 愿望清单出行 梦想复盘结论每色内部是「务实 浪漫」的搭配——米黄的会议与电影、紫的灵感与账单。点任一色点筛选结果都呈现两种生活切面不单调。9.2 置顶示例的三种角色3 张置顶便签对应三个场景角色置顶便签角色演示价值周会要点工作置顶区展示工作重心超市采购生活置顶区展示家庭待办健身计划健康置顶区展示长期目标三张连起来是「工作—生活—健康」的叙事线一屏讲完普通人的三个重心——比 3 张同类便签更有代入感也验证置顶区支持「多张异色并存」。9.3 内容多样性盘点12 条内容覆盖 8 种文体会议纪要周会要点、清单罗列超市采购、分段计划健身计划、书摘语录读书摘抄、灵感记录项目灵感、票务信息回家机票、观影清单电影清单、提醒事项生日提醒……文体差异直接带来卡片高度差——购物清单两行、健身计划四行双列瀑布墙的错落感由此而来。十、注入后的便签墙效果预测initSeedData在aboutToAppear首启时执行注入后的第一屏可逐项预测观测点预测结果便签墙12 张彩签双列排布前 3 张带 图钉置顶区米黄周会/ 粉采购/ 绿健身三色并排时间显示从「1 天前」到「11 天前」梯度最新在前粉色筛选2 张超市采购置顶、生日提醒标题栏计数「共 12 张便签」筛选与排序的联动验证点粉色圆点 → 置顶的「超市采购」仍排在筛选结果最前——证明颜色筛选没有破坏双键排序点「全部」恢复 12 张。这个联动是「筛选收窄集合、排序保持顺序」两件事正交的正确性证明。十一、验证 SQL 与自查清单数据库直查DevEco Studio 的 RDB 工具-- 1. 总数应为 12SELECTCOUNT(*)FROMmemo;-- 2. 颜色分布应返回 6 行每行 COUNT 2SELECTcolor,COUNT(*)AScntFROMmemoGROUPBYcolor;-- 3. 置顶数应为 3SELECTCOUNT(*)FROMmemoWHEREpinned1;-- 4. 排序正确性前 3 行 pinned 1且 updated_time 递减SELECTtitle,color,pinned,updated_timeFROMmemoORDERBYpinnedDESC,updated_timeDESC;自查项预期失败排查总数12幂等误判表里已有旧数据每色 2 张GROUP BY 每行 2种子数组漏写颜色置顶 3 张pinned 1 共 3 行pinned 写成了字符串 ‘1’前 3 行置顶前 3 行 pinned 1ORDER BY 漏了 pinned常见坑pinned 传字符串1时 SQLite 隐式转换仍能命中但语义混乱更隐蔽的坑是 seed 里漏写updated_time导致全表同值排序退化为本地顺序——时间戳梯度是排序可见性的前提。十二、FAQ 补充Q6反复启动应用种子会被重复插入吗A不会——initSeedData第一步就是 COUNT 幂等检查非空直接 return。只有清空表后再进页面才会重新填充日志会分别打出「跳过」与「已填充」两种分支。Q7为什么不写死日期而用 now - n * dayA写死日期如 2025-06-01会让「1 天前」的显示几天后失真——种子越来越旧。相对时间戳保证任何时候首启墙上的时间梯度都像「刚贴上去的便利贴」。种子的时间要保鲜。Q8新增便签会排在置顶便签前面吗A不会——新增便签 pinned 0、updated_time 最新它排在普通组最前但置顶组3 张整体仍压在前面。双键排序下「置顶永远优先于时间」。Q9颜色筛选后置顶便签还在最前吗A在——筛选是 WHERE color ?排序是 ORDER BY pinned DESC, updated_time DESC筛选只收窄集合不改顺序。点粉色置顶的「超市采购」第一、「生日提醒」第二。筛选与排序正交。