- 博客(94)
- 收藏
- 关注
RSS订阅原创 HarmonyOS多设备适配工程化笔记：可读代码与可复现页面并行推进
四个设备按钮的文字都很接近，如果没有颜色反馈，用户点击后很难快速确认当前选择。页面使用两种背景色区分状态：被选中的按钮使用较深的蓝色，未选中的按钮使用浅蓝色。默认进入页面时，手机按钮就是深蓝色；点击其他按钮后，深蓝色会移动到新的选项上。这种颜色切换并不是装饰，而是状态反馈的一部分。按钮文字告诉用户“它代表什么”，颜色告诉用户“它是不是当前选择”。两种信息配合在一起，可以减少用户反复确认的成本。尤其是四个按钮排列在一起时，颜色比单纯依靠文字变化更容易被快速识别。
2026-08-27 15:06:15
163
原创 从需求到页面：HarmonyOS桌面卡片的 ArkTS 原生实现
这张“今日专注”卡片用很少的内容展示了一个完整的状态反馈闭环：卡片有紧凑和放大两种展示形态，尺寸按钮负责切换形态，刷新按钮负责推进完成度和刷新次数，底部提示负责告诉用户当前操作记录。标题、百分比和目标说明按照清晰的优先级排列，深蓝卡片、浅色背景、蓝色按钮和青绿色刷新按钮共同建立了稳定的视觉层次。更重要的是，它把“桌面卡片预览”和“真实桌面卡片能力”区分开来。当前页面可以用于观察卡片内容、比例和交互反馈，刷新行为也只发生在页面内部。
2026-08-27 14:57:33
275
原创 HarmonyOS推送通知实战：用声明式 UI 串起数据、操作和结果
通知页面的主体不是按钮，而是用户需要阅读的内容。当前两条卡片虽然固定，但它们展示了通知信息的三个基本维度。第一是标题。标题直接说明通知主题，“版本更新提醒”让用户知道它与版本变化有关，“订阅内容上新”让用户知道它与关注内容有关。标题采用粗体，用户快速滚动时也能先看到核心信息。第二是时间。第一条显示“刚刚”，第二条显示“10:30”。时间没有采用同一种文案，体现了通知列表中常见的相对时间和具体时间两种表达。时间文字较小、颜色较浅，说明它是辅助信息，不能抢过标题。第三是摘要。
2026-08-27 14:40:40
187
原创 围绕HarmonyOS权限管理构建原生体验：设计取舍、实现与排错
如果只有三个开关，用户需要逐项查看才能知道当前总体状态。绿色摘要把三个状态汇总成一个数字，形成页面的第二个信息入口。用户可以先看摘要判断整体，再根据需要回到具体卡片检查是哪一项被打开或关闭。摘要的计算规则很直接：相机打开计一项，麦克风打开计一项，位置打开计一项，三项相加得到当前已授权能力数。初始组合是相机关闭、麦克风关闭、位置开启，所以显示一项。打开相机后变为两项，打开麦克风后变为三项；关闭任何一个已经打开的能力，数量相应减少。这个数字不是设备权限中心返回的统计结果，也不是系统设置中的授权总数。
2026-08-27 14:39:28
335
原创 HarmonyOS相机调用落地指南：让原生界面在模拟器里稳定运行
第一，主要动作要有足够的视觉重量。这个页面把拍摄按钮做成整行高按钮，并用明显的白色或红色背景，使用户可以迅速找到它。第二，模式切换要同时改变文案和颜色。只改变颜色容易让部分用户忽略，只有文案又可能缺少视觉速度。当前页面让模式按钮、主要按钮和底部单位一起响应，形成一致的提示。第三，参数调整要有就近反馈。变焦滑块位于取景区域下方，但倍率数字直接出现在取景区域中，用户拖动时不需要把视线移到很远的位置。第四，设置操作与结果操作要相互独立。闪光和变焦属于拍摄前设置，点击拍摄属于结果动作；
2026-08-27 14:27:11
381
原创 围绕性能优化综合实战构建原生体验：设计取舍、实现与排错
这个性能优化实践页面把一个范围很大的主题收敛为四张可点击的阶段卡片。启动阶段强调按需加载、首帧重点和延迟初始化；渲染阶段强调布局层级、长列表处理和动画属性；数据阶段强调查询、网络、缓存和内存回收；监控阶段强调打点、帧率内存观察和异常告警。四个阶段既有推荐顺序，又可以被随时点击回看。页面真正完成的是路线图状态展示和交互反馈：用户选择阶段，顶部显示当前阶段，编号颜色反映当前位置，底部文字在普通阶段和最后阶段之间切换。它没有完成真实性能测量，也没有连接任何数据库、网络、监控或告警服务。
2026-08-26 19:01:56
157
原创 HiLog 日志系统实战落地指南：让原生界面在模拟器里稳定运行
这个日志页面通过很少的控件组织出了一条完整的观察路径：进入页面时等待，点击实时后看到接收数量和四条固定日志，再利用级别标签确认筛选条件，最后通过暂停回到空状态。标题区、按钮、标签、状态卡、日志条目和底部说明各自承担不同职责，组合后让用户能够快速理解当前页面状态。页面最值得注意的地方不是它模拟了多少日志，而是它把“状态变化如何被看见”表达得很清楚。实时按钮的文字和颜色说明输出状态，接收提示说明当前数量，日志颜色说明级别，标签样式说明选择，底部文字保留筛选上下文，滚动区域承载实际条目。
2026-08-26 19:00:46
292
原创 用 ArkTS 做好崩溃分析线上治理：从核心 API 到可验证交互
排查应用异常时，最容易让人失去方向的并不是页面没有数据，而是数据没有被组织成可以阅读、可以比较、可以继续追踪的样子。一个异常名称、一串发生次数和一段调用信息，如果全部堆在一起，开发者很难迅速判断哪个问题影响更大，也很难确认当前正在看的详情属于哪一条记录。这个页面用一个非常克制的界面解决了这一步：顶部先给出总体概览，中间列出异常类型，底部展示当前条目的调用信息和处理建议。页面的主标题是“崩溃分析”，下面配有“聚合崩溃样本，定位影响范围与调用栈”的说明。
2026-08-26 18:59:20
221
原创 电量消耗优化的 ArkUI 实践：把页面结构、状态与反馈做扎实
页面的颜色不是装饰，而是状态的第二种表达。非充电时，电量数字使用蓝色，线性进度条也使用蓝色。蓝色与页面浅绿色背景形成较清楚的对比，告诉用户这是普通电量展示状态。进入充电后，数字和进度条一起改成绿色，与底部充电按钮的绿色保持呼应。用户即使没有仔细阅读辅助文字，也能通过颜色判断当前是否处于充电状态。策略按钮使用另一套颜色规则。选中策略的按钮使用深蓝底色和白色文字，未选中的按钮使用浅蓝底色和蓝色文字。勾号只出现在当前选中的按钮文字后面，因此颜色和符号形成双重提示。
2026-08-26 18:57:50
225
原创 拆解多线程与并发优化：原生鸿蒙页面的实现路径与调试方法
这个并行与串行对比页面用很少的控件完成了一次完整的概念演示。并行和串行按钮负责选择执行方式，Worker 数量卡片负责展示可调参数，执行按钮负责从等待状态切换到结果状态，结果卡片负责呈现八项任务和一组耗时文字。紫色选中态、绿色较短结果、红色较长结果和浅灰等待提示，共同构成清晰的视觉反馈。页面最适合帮助初学者建立三个认识。第一，并行和串行是互斥的展示模式，需要通过明确的选中态让用户知道当前选择。第二，参数调整需要有边界，数字不能无限变化。第三，执行结果应该有清晰的状态阶段，未开始和已完成不能混在一起。
2026-08-26 18:57:00
163
原创 手势驱动的交互动画的 ArkUI 实践：把页面结构、状态与反馈做扎实
捏合手势最容易出现的问题是没有边界。用户不断把两指合拢，对象可能缩小到无法辨认；不断张开手指，对象可能放大到超出容器。这个页面使用上下限把变化控制在一个适合观察的区间内。当捏合结果处于区间内部时，scaleValue直接采用这个结果。例如倍率从1.0逐渐变成1.2，手掌会逐步放大，提示文字同步显示接近1.2的值，底部卡片显示更精确的两位小数。因为状态是响应式的，所以不需要额外刷新按钮，也不需要重新创建手掌。当捏合结果小于0.6时，页面保留0.6；当结果大于1.5时，页面保留1.5。
2026-08-25 18:14:27
252
原创 拆解页面转场动画定制：原生鸿蒙页面的实现路径与调试方法
返回按钮只在详情状态出现，位于顶部标题区域的右侧。它使用普通按钮样式，但通过蓝色文字和浅蓝背景突出可操作性。初始状态不显示它，避免用户误以为自己已经进入了一个需要返回的子页面；进入详情后它才出现，与当前状态保持一致。点击返回按钮后，当前选择恢复为未选择状态。标题重新变为总标题，返回按钮消失，详情区域被四张卡片替换，辅助说明文字重新出现。页面不会保留上一次详情的完成提示，也不会自动选中刚才点击的卡片。这样的返回行为相当于“回到效果选择首页”，而不是“返回到上一条详情记录”。
2026-08-25 18:12:10
167
原创 共享元素转场动画工程化笔记：可读代码与可复现页面并行推进
如果用户在列表中连续点击不同卡片，最后一次点击对应的位置会成为当前详情内容。页面没有排队播放多个详情，也没有把多个选中项叠加到同一详情页。用户看到的是最后一次选择的结果，这符合单选浏览的直觉。
2026-08-25 18:11:08
313
原创 从需求到页面：隐式动画 animation的 ArkTS 原生实现
这个页面用一个紫色星形和四条指标，把缩放、旋转、透明度、水平位移四种视觉变化放在同一个界面中。playing负责决定控制器是否继续推进，scaleValue控制等比大小，angle控制旋转角度，控制透明程度，控制水平方向的位置。周期更新按各自的边界和步长改变这些值，属性动画则把前后状态之间的差异表现得更平滑。页面的操作入口只有一个播放/暂停按钮，但它足以展示状态驱动界面的完整反馈链：按钮文字反映运行状态，提示文字和颜色反映当前控制器状态，中心星形反映四个属性的视觉结果，指标卡片反映数值结果。
2026-08-25 18:09:31
298
原创 显式动画 animateTo实战：用声明式 UI 串起数据、操作和结果
即使 curve 暂时没有改变底层滚动，选中态仍然让用户知道点击已经被接收。一个没有视觉反馈的文字按钮会让用户不确定点击是否成功，尤其在移动设备上，点击区域和文字都比较小。浅蓝背景提供了明确的选中边界，另外两个标签退回灰色后，当前选择一眼可见。这也解释了为什么状态变量不只是“保存一个字符串”。它同时承担了界面显示条件的依据。曲线文字、背景色和字体颜色都围绕同一个状态值生成，减少了“文字显示一个选项、颜色却停留在另一个选项”的不一致情况。
2026-08-25 18:07:57
237
原创 分布式数据同步实战：用声明式 UI 串起数据、操作和结果
这个页面用一条笔记把同步过程拆成可观察的步骤：先在本机编辑产生新内容，再让设备列表显示一个新、两个旧的差异，接着通过按钮手动推进，最后让手机、平板和笔记本三行重新显示一致内容，并用明确文字说明结果。它没有试图冒充完整的分布式系统，也没有把固定文案包装成真实通信。它的学习重点是状态变化、条件显示、重复列表、按钮动作和反馈闭环。只要按照打开、编辑、等待、同步、再次编辑的顺序操作，就能看到页面提供的全部交互。如果以后把这个页面扩展为真实产品，还需要单独设计通信、身份、存储、冲突、重试和失败提示。
2026-08-24 15:05:44
284
原创 围绕数据库升级与迁移构建原生体验：设计取舍、实现与排错
打开页面后，先确认背景、标题和三张主要内容卡片。当前 schema 显示 v1，计划卡片列出两行迁移说明，进度条没有填充，日志显示等待文字。点击执行按钮，确认版本变为 v3，进度条填满，日志显示迁移完成和两段动作说明。点击回滚按钮，确认版本回到 v1，进度归零，日志显示异常回滚。然后重复执行和回滚，观察页面只保留最新一次结果。向下滚动确认日志在小屏幕上仍然可见，观察长日志可能换行但不改变内容。最后重新打开页面，确认状态重新回到 v1、0 和等待日志。
2026-08-24 15:03:52
215
原创 数据库查询优化落地指南：让原生界面在模拟器里稳定运行
这个页面用很少的元素表达了一个明确问题：当用户需要在大量记录中查找数据时，全表扫描和索引查询可以从不同思路进行比较。初始页面通过两张结果卡片和短横线建立等待状态，点击“执行评测”后固定显示 18.4 ms 与 0.3 ms，按钮改为“重新执行评测”，并出现三条优化建议。整个过程短而清晰，适合用来观察状态变化和对比信息布局。阅读时可以记住四个要点。第一，短横线表示还没有执行页面操作；第二，两个时间值是固定演示结果，不是当前设备测出的数据库耗时；第三，O(n) 和 O(log n) 是帮助理解查询思路的提示。
2026-08-24 15:03:15
196
原创 用 ArkTS 做好关系型数据库 RelationalStore：从核心 API 到可验证交互
页面没有姓名输入框、城市选择器或状态开关，因此用户不能自定义新记录。所有新增记录都采用“新用户+编号+杭州+启用”的固定格式。这是当前页面明确呈现的能力边界。它适合演示新增动作如何影响列表，不适合被描述为完整的用户管理表单。固定内容也让对照更清楚：每次插入时，只有名称中的编号发生变化，城市和状态保持不变。读者可以把注意力放到数组增长、按钮反馈和日志更新上，而不会被输入校验、表单错误等其他问题分散。删除第一行最容易看出序号重排。初始列表删除张三后，李四显示为 #1，王五显示为 #2。
2026-08-24 15:02:31
200
原创 Preferences 轻量存储的 ArkUI 实践：把页面结构、状态与反馈做扎实
很多设置页面看起来很简单：一个标题，几行开关，再放一个恢复默认按钮。真正把它做得清楚，并不只是把几个控件摆在一起，而是要让每一次操作都有明确的结果，让用户始终知道当前设置是什么、刚才改了什么、改动一共发生了多少次。这篇文章围绕一个“首选项存储”页面展开，重点观察它如何用主题色切换、消息通知开关、自动登录开关和读写日志，表现轻量设置的完整交互过程。页面的第一印象很直接。最上方是“首选项存储”，下面是“轻量键值对设置 · 修改即时生效”。
2026-08-24 15:00:48
148
原创 Stage 模型综合实战工程化笔记：可读代码与可复现页面并行推进
095 的价值不在于它已经囊括完整工程化体系，而在于它把一个状态驱动页面压缩到了容易验证的范围。启动链路只有 Ability 到；页面内容由 Scroll、Column、Row 和 Text 组成；两个@State控制选择和提示；一个 Builder 消除四张卡片的重复结构。只要沿着配置、入口、状态、事件和截图逐项核验，就能把每一条结论落到文件上。还应记住两个阅读习惯。第一，界面上的commonmodel、路由、Store、日志等词可能是在讲推荐做法，不能自动变成工程事实。第二，代码中写了。
2026-08-23 19:55:06
158
原创 从需求到页面：Ability 结果返回机制的 ArkTS 原生实现
094-AbilityResult 是一个界面表达清楚、系统能力尚未接入的 ArkUI 原型。它用三个 State 字符串、两个主操作按钮和一个清空按钮，展示图片结果、联系人结果与最后一条日志如何共同存在于一个页面。它真正可验证的知识是：点击事件更新状态，状态驱动绑定文本更新；而不是相册访问、通讯录访问或真实跨 Ability 结果返回。建议读者先按本文的操作顺序亲自点击，再打开 Index.ets 对照三个状态、三个绑定文本和三个回调。
2026-08-23 19:53:38
153
原创 跨应用 Ability 调用实战：用声明式 UI 串起数据、操作和结果
很多“跨应用调用”的示例一上来就给出一段 Want，读者很容易把页面上的按钮、包名和“已拉起”提示一起当成已经跑通的能力。本篇换一个更稳妥的读法：不先讨论想象中的流程，而是从第 093 个工程实际存在的代码出发，逐行确认它做了什么、没有做什么，以及它为什么仍然适合作为理解 ArkUI 状态页面的材料。工程的应用标题叫“跨应用 Ability 调用实战：用声明式 UI 串起数据、操作和结果”，实际页面标题是“跨应用调用中心”。
2026-08-23 19:53:02
373
原创 围绕Ability 与 UI 组件交互构建原生体验：设计取舍、实现与排错
导入UIAbility与window，它的拿到系统传入的窗口阶段对象，再加载页面内容。这属于 Ability 层的启动职责。页面内Button的onClick闭包则读写Index的字段，属于 ArkUI 组件的交互职责。一个发生在应用窗口准备内容的阶段，一个发生在用户触碰某颗按钮的时刻；把二者写到同一屏幕，是为了建立关联，不是为了让它们可互换。真实的前后台处理至少需要在 Ability 中显式实现相应生命周期方法，并根据项目需要处理保存、恢复、资源释放或日志等工作。
2026-08-23 19:40:11
334
原创 ExtensionAbility 控制台：读懂界面演示与真实扩展之间的边界
第 091 篇工程的可运行核心非常明确：一个加载一个Index页面；页面用四个@State表达可变显示；用户可以收起注册表、修改服务文字、改变绑定颜色、触发任务计数的内部更新并切换事件提示。它还用 Scroll、Column、Row、Text、Button、条件渲染和布局权重组成了一页层次清楚的 ArkUI 界面。同样明确的是它没有实现的部分：没有真正的 ExtensionAbility 注册和回调，没有真实的服务、数据或静态订阅行为，不能作为后台能力是否正常的验证工具。
2026-08-23 19:26:48
321
原创 表单状态管理实战的 ArkUI 实践：把页面结构、状态与反馈做扎实
表单状态管理实战的 ArkUI 实践：把页面结构、状态与反馈做扎实 的发布材料应始终围绕当前页面的真实行为维护：默认页面说明起点，操作图说明变化，代码图说明实现。以后修改 Form State 时，先检查状态与条件，再检查运行结果和文章描述，能够减少代码、截图与文字不同步的问题。
2026-08-22 10:23:11
138
原创 拆解状态管理性能优化：原生鸿蒙页面的实现路径与调试方法
拆解状态管理性能优化：原生鸿蒙页面的实现路径与调试方法 的发布材料应始终围绕当前页面的真实行为维护：默认页面说明起点，操作图说明变化，代码图说明实现。以后修改 State Performance 时，先检查状态与条件，再检查运行结果和文章描述，能够减少代码、截图与文字不同步的问题。
2026-08-22 10:22:36
188
原创 多状态协同管理工程化笔记：可读代码与可复现页面并行推进
多状态协同管理工程化笔记：可读代码与可复现页面并行推进 的发布材料应始终围绕当前页面的真实行为维护：默认页面说明起点，操作图说明变化，代码图说明实现。以后修改 State Coordination 时，先检查状态与条件，再检查运行结果和文章描述，能够减少代码、截图与文字不同步的问题。
2026-08-22 09:21:52
213
原创 Once 的 ArkUI 实践
Once 的 ArkUI 实践 的发布材料应始终围绕当前页面的真实行为维护：默认页面说明起点，操作图说明变化，代码图说明实现。以后修改 Once 时，先检查状态与条件，再检查运行结果和文章描述，能够减少代码、截图与文字不同步的问题。
2026-08-22 09:20:14
214
原创 StateHoisting 的 ArkUI 实践
StateHoisting 的 ArkUI 实践 的发布材料应始终围绕当前页面的真实行为维护：默认页面说明起点，操作图说明变化，代码图说明实现。以后修改 State Hoisting 时，先检查状态与条件，再检查运行结果和文章描述，能够减少代码、截图与文字不同步的问题。
2026-08-22 09:18:22
231
原创 用 ArkTS 做好Column 与 Row 线性布局：从核心 API 到可验证交互
技术路线：HarmonyOS 原生 ArkTS / ArkUI。
2026-08-21 13:42:21
323
原创 XComponent 原生渲染的 ArkUI 实践：把页面结构、状态与反馈做扎实
技术路线：HarmonyOS 原生 ArkTS / ArkUI。
2026-08-21 13:41:01
213
原创 TextArea 多行文本输入实战：用声明式 UI 串起数据、操作和结果
在移动应用里，文本输入是最常见的交互之一。单行输入用 就够了，可一旦遇到"发言稿、商品描述、反馈意见、聊天长消息"这类需要换行、需要多段的内容，就必须交给 。它和 同属输入控件家族，但核心差异在于支持多行与自动换行，并且在高度、滚动、内容裁剪上的行为都围绕"一块可生长的文本区域"来设计。理解 ，不能只停留在"放一个框让用户打字"。它背后牵连着受控与非受控、字符计数、软键盘行为、聚焦状态、表单校验、布局伸缩一整套工程问题。一个评论框看似简单，真要做扎实，得把输入的长度约束、超长提示、失焦校验、回车提交、暗
2026-08-20 14:52:13
336
原创 围绕TextInput 输入框实战构建原生体验：设计取舍、实现与排错
输入框的复杂度不在组件本身，而在它牵动的协作网络：键盘、焦点、校验、避让、提交，每一环都与其他环咬合。本文把这张网络拆成了四件事——输入能力、内容约束、状态反馈、协作行为——并给出了登录注册表单的完整实现。再强调一次分层心法：实时校验负责"边输入边纠错"，提交校验负责"最后一关兜底"，防抖是两者的分界线，时间窗是它的参数；错误文案的单一来源是校验函数的返回值，提交时现算现判，绝不读缓存。回看引言提出的"转化率闸门"视角：键盘类型配错了，数字用户流失；错误提示模糊，反复试错流失；
2026-08-20 14:25:04
364
原创 Image 组件加载与缓存落地指南：让原生界面在模拟器里稳定运行
前文一直在用Image(url)让系统自动解码，这在绝大多数场景足够。但有一种情况必须自己动手：加载一张几千万像素的本地大图（比如相册原图、扫描件），直接丢给Image会瞬间吃掉上百兆内存。此时要用做采样解码——不按原分辨率解码，而是先算一个缩放比，只解到目标尺寸。采样比的计算逻辑是：目标尺寸除以原图尺寸，取较大边的比值作为sampleSize的基准。Mermaid 渲染失败: Parse error on line 3:... B --> C[ratio = max(原宽/目标宽, 原高/目标高)]
2026-08-20 14:15:08
365
原创 用 ArkTS 做好Button 组件交互详解：从核心 API 到可验证交互
自定义按钮要回答三个问题：按压时怎么反馈？禁用时怎么表现？读屏时怎么描述？缩放到 0.94 + 阴影消失、透明度降到 0.4、Semantics= null;@override1.0 : 0.4,[] : [/* 常驻阴影 */],),),),),),按压反馈遵循"物理直觉"：按下时按钮"沉下去"（缩放 + 去阴影），抬起时"弹回来"，120ms 的时长刚好介于"无感"与"粘滞"之间，这是 Material 动效规范里按压反馈的经验区间。实践要点做法理由主次分明。
2026-08-20 13:52:33
380
原创 Text 组件完全指南的 ArkUI 实践：把页面结构、状态与反馈做扎实
回过头看，Text并不复杂，但它的能力是分层的：最底层是"显示字符串"，往上是"好看"（字号字重颜色间距），再往上是"有结构"（Span 富文本），然后是"有反应"（状态与事件），最后是"排得下"（布局约束与截断）。标题、标签 → 基础用法 + 样式；价格、热度、说明 → Span 富文本；计数、状态提示 → 交互与状态；卡片标题、列表项 → 布局与截断。把这几层吃透，你在 ArkUI 里写文字类 UI 基本不会再卡壳。可编辑富文本：研究RichEditor，它是Text。
2026-08-20 13:37:12
415
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人