- 博客(102)
- 收藏
- 关注
RSS订阅原创 从需求到页面：新闻阅读应用的 ArkTS 原生实现
这个新闻页面用蓝色标题栏建立主题，用四个按钮提供分类选择，用六张卡片承载标题、来源和时间，用当前阅读状态形成点击反馈。分类选择影响按钮高亮和说明文字，阅读选择影响卡片颜色、右侧状态和底部数字。两组状态互相独立，页面行为容易预测。它没有把所有新闻应用功能都塞进来，也没有通过复杂流程制造“功能很多”的错觉。固定内容、单一列表和两个状态足以展示一个内容型页面的基本结构。
2026-08-27 17:19:07
151
原创 天气查询应用实战：用声明式 UI 串起数据、操作和结果
天气类页面很容易被理解成“放几行温度文字，再放几个天气图标”。真正打开页面后，用户关心的并不是某一个数字，而是当前所在城市、现在的体感、接下来几个小时的变化，以及未来几天是否需要带伞、添衣或者调整出行安排。因此，一个看起来不复杂的天气页面，仍然需要在有限的屏幕空间中处理信息层次、时间顺序、视觉重点和刷新反馈。这个页面采用了比较直接的移动端天气布局。顶部是蓝色标题栏，标题写着“天气应用”，右侧放置“刷新”按钮；标题栏下面是当前天气卡片，卡片突出显示深圳、天气图标和当前温度，并补充体感温度与风向信息；
2026-08-27 17:16:40
156
原创 围绕待办事项清单应用构建原生体验：设计取舍、实现与排错
这个待办清单页面用很少的控件完成了一个完整的状态驱动闭环：用户在输入框输入任务，点击添加后得到一张新的任务卡片；用户勾选复选框，标题出现删除线、右侧状态变成完成、底部完成数量同步增加；用户切换全部、进行中和已完成，列表根据任务状态改变可见内容，而任务总数和完成总数仍然反映整个清单。它最值得学习的地方不是视觉装饰，而是每个可见结果都能找到清晰的状态来源。输入框负责临时内容，任务标题负责主要信息，标签负责分类，复选框负责完成状态，筛选按钮负责视图条件，统计文字负责全局数量。
2026-08-27 17:16:09
227
原创 智能计算器应用落地指南：让原生界面在模拟器里稳定运行
输入 2025 后发现最后一位应该是 6，可以点击退格，显示区从 2025 变成 202，再点击 6，得到 2026。退格只影响当前显示内容，输入修正后可以继续选择运算符。若发现整笔输入都不对，则点击清除，页面会回到 0，并清除已经选择的运算方向。这个页面的核心价值不在于提供复杂的数学能力，而在于把一条完整的交互链路做得清楚：页面打开后给出 0；用户输入数字；选择运算符；输入下一个数字；通过等号得到结果；结果可以继续参与下一步，也可以被新的数字替换；
2026-08-27 17:15:38
205
原创 用 ArkTS 做好手持弹幕应用完整开发：从核心 API 到可验证交互
这个手持弹幕页面的重点不在于提供完整直播功能，而在于用一个紧凑的界面展示状态之间如何相互配合。播放状态决定展示区和主按钮的表达；输入状态记录用户正在编辑的文字；发送动作把文字变成最新消息，同时清空输入、增加数量并开始播放；速度状态按固定档位循环，并在控制区和播放说明中保持一致。播放按钮改变播放状态，播放状态改变展示文字、按钮文字和按钮颜色。速度按钮改变速度值，速度值改变控制行和播放中的状态说明。发送按钮在输入非空时更新最新消息、清空输入、增加计数并启动播放。
2026-08-27 17:15:01
145
原创 工程化综合实战落地指南：让原生界面在模拟器里稳定运行
这个工程实践检查清单页面没有真正执行格式化、测试、扫描、构建或签名，但它把一个门禁流程最关键的视觉关系表达得很完整：有清晰的项目顺序，有明确的已完成和待处理状态，有数字和进度条，有唯一的推进按钮，也有完整状态下的终点提示。从初始的两分之五开始，用户每点击一次按钮，下一张卡片变为通过，进度向前移动，数字同步增加；到五分之五时，五张卡片全部通过，按钮和提示共同表明流程已经结束。这个变化过程直观、可复现，也足以说明状态驱动 UI 在流程页面中的价值。
2026-08-26 19:21:27
168
原创 用 ArkTS 做好组件化开发脚手架：从核心 API 到可验证交互
这个页面的功能很集中：四个固定的组件类型入口，一张展示当前类型的预览卡片，一个改变生成阶段的主按钮。它没有真实生成文件，没有代码导出，没有输入校验，没有列表数据，也没有真实弹窗，但它把这些组件概念用可点击的文字和状态反馈表达出来。页面的核心不是生成了多少内容，而是每次选择都能看见清楚结果。类型按钮负责选择，预览卡片负责解释，状态标签负责确认，底部提示负责引导，主按钮负责推进。选择类型会重置阶段，生成动作只改变当前类型的状态，整个过程稳定而容易观察。
2026-08-26 19:20:48
166
原创 模块化架构设计的 ArkUI 实践：把页面结构、状态与反馈做扎实
页面把四层内容放在一个纵向列表中，每张卡片都使用白色背景、圆角和内边距。四张卡片之间有固定的垂直间距，因此它们看起来像一条从底部能力逐渐连接到入口的路径。每张卡片内部又分成三个视觉部分：左侧是圆形编号，中间是层名称和说明，右侧是当前连接状态。这种排列方式适合表达有顺序的架构信息。编号让用户可以快速确认位置，粗体层名称负责回答“这一层是什么”，下面的小字负责回答“这一层包含哪类职责”，最右侧的状态则告诉用户当前连接进展。即使不阅读后面的依赖图，用户也可以通过四张卡片建立完整的层次印象。
2026-08-26 19:18:37
152
原创 拆解性能监控平台集成：原生鸿蒙页面的实现路径与调试方法
这个性能监控页面的重点不在于提供一套真实的设备监控平台，而在于把一组性能指标组织成容易理解、容易操作、容易验证的界面。顶部区域回答“当前是否开启监控”，指标卡片回答“当前 CPU、内存和 FPS 是多少”，趋势面板回答“这些数值如何用长度快速比较”，采样按钮回答“怎样触发下一组数据”，采样次数回答“已经操作了多少次”。页面把监控开关与手动采样拆开，把精确数值与相对进度并列，把状态文字与颜色变化放在同一交互链路中。用户每点击一次，就能在界面上看到明确结果。
2026-08-26 19:17:56
321
原创 日志收集与分析平台工程化笔记：可读代码与可复现页面并行推进
统计区域一共包含三张卡片，每张卡片内部由数值和标签两层文字组成。数值字号更大、字重更高，标签字号较小、颜色更浅。这样的排列让用户先看到“128,432”“3.2%”“1.8s”这类核心数字，再通过下方标签判断数字的含义。数字和标签没有混在同一行，因此即使屏幕较窄，也能保持清晰的上下关系。日志量卡片给出一个带千位分隔符的数量，视觉上最像规模指标。异常卡片使用百分比，并用暖色提醒用户它与风险有关。耗时卡片使用带单位的秒数，并用青绿色表示时间维度。
2026-08-26 19:16:05
174
原创 拆解网络安全与证书校验：原生鸿蒙页面的实现路径与调试方法
这个网络证书页面的价值，不在于替用户完成真正的 HTTPS 安全审计，而在于用一个紧凑的界面展示证书结果应该怎样被组织和反馈。四条记录分别覆盖可信、风险、不同协议、不同签发者等视觉情境；顶部统计提供总体概览；卡片提供单条比较；点击动作提供选择入口；详情卡片提供状态解释；底部按钮把页面从初始状态推进到扫描完成状态。从交互上看，最值得关注的是三处变化：点击卡片记录选择，扫描按钮切换完成状态，完成状态同时影响顶部统计、详情文字和按钮文案。
2026-08-25 18:37:14
226
原创 生物认证实战工程化笔记：可读代码与可复现页面并行推进
生物认证页面的重点不在于堆叠“指纹”“人脸”“解锁”等词语，而在于让用户知道当前选择了什么、操作是否开始、结果是否出现以及下一步可以做什么。这个页面用两个方式按钮、一个圆形识别区域、一条状态文字和一个状态化主按钮，完成了从等待到成功再到重置的闭环。阅读这样的页面时，应当始终把可见事实放在第一位。页面显示成功，就分析成功状态带来的颜色、图标、文字和按钮变化；页面没有失败，就不要补写失败机制；页面没有次数，就不要把重复点击说成统计；页面没有真实系统调用，就明确它是本地交互演示。
2026-08-25 18:36:35
131
原创 从需求到页面：国密算法合规开发的 ArkTS 原生实现
SM3 选项的说明是“密码杂凑 · 256 位摘要”。选择第三行后，蓝色选中态和按钮文字都会跟着变化，执行按钮显示“执行 SM3”。点击后，结果卡片显示“SM3 摘要：AF3C 90D1 6B7E 4F28 9A06 17DC”。这条反馈使用了“摘要”一词，而不是“密文”或“签名”，在概念上与前两项区分开来。用户可以从输出前缀判断当前页面想表达的算法类别，也可以通过结果字符感受摘要通常不会保留原文的直观形态。
2026-08-25 18:34:36
357
原创 数据加密与安全存储实战：用声明式 UI 串起数据、操作和结果
结果卡片把状态标签和详细文字放在同一个视觉容器内。标题“处理结果”位于第一行左侧，右侧利用空白占位把状态标签推到边缘，形成类似“名称—状态”的信息结构。第二行显示具体结果，字号不大但行高充足，长文字不会紧贴在一起。卡片内边距让内容和边界保持距离，圆角则让它看起来像一个独立的信息区域。初始状态的“等待处理…”并不等于错误，也不等于空结果。它告诉用户页面已经准备好，但还没有执行动作。把等待状态单独展示出来，可以避免用户误以为默认订单号已经自动被保护。
2026-08-25 18:33:19
184
原创 围绕应用权限管理体系构建原生体验：设计取舍、实现与排错
页面一开始显示两项已授予，并不是随机数字。相机和照片与媒体的初始值为开启，麦克风和位置的初始值为关闭，四项状态相加后正好得到二。这个结果让首屏同时包含开启和关闭两种样式，用户无需进行任何操作就能观察到页面如何区分状态。如果四个开关全部开启，页面会显示“已授予 4 项权限”；如果全部关闭，页面会显示“已授予 0 项权限”。当前初始状态选择二开二关，既能展示中间状态，也避免首屏全部绿色或全部灰色造成信息单一。对于学习状态驱动界面的开发者来说，这个初始数据还可以帮助快速验证统计逻辑是否正确。
2026-08-25 18:32:04
204
原创 围绕Canvas 2D 绘图实战构建原生体验：设计取舍、实现与排错
打开页面后，首先看到的是一个浅色背景上的绘图概念演示。顶部卡片写着“Canvas 2D 绘图”，下面的说明是“选择图形，查看路径、渐变与变换的绘制效果”。中间留出了较大的白色展示区域，展示区域下方有一条深色说明栏，再往下是两排图形选择按钮。这样的安排很直观：先告诉用户页面要做什么，再用一块足够醒目的区域呈现当前选择，随后用文字标出相关概念，最后把八种选择放在手指容易触达的位置。这个页面适合用来理解绘图 API 的概念映射，但它的重点不是让用户拿手指在画布上自由涂画，也不是制作一款完整的图形编辑器。
2026-08-24 19:21:45
176
原创 图片编解码与处理落地指南：让原生界面在模拟器里稳定运行
这页图片编解码参数对比应用，把一个容易被复杂工具掩盖的问题拆成了三组按钮、一个滑块和三张结果卡片。PNG、JPEG、WebP 负责展示格式差异，20 到 100 的质量滑块负责展示有损参数变化，1280 × 720、1920 × 1080、3840 × 2160 负责展示尺寸影响。页面通过固定公式得到体积，通过格式和质量的条件显示压缩率，通过尺寸对应的固定关系显示解码耗时。使用它时，最重要的是把数字当成演示结果，把交互当成参数实验。看到 PNG 显示“无损”，可以理解页面对格式的分类；
2026-08-24 19:20:58
156
原创 用 ArkTS 做好相机 API 与图像捕获：从核心 API 到可验证交互
这个相机页面的核心并不是“调用了多少相机接口”，而是把拍摄场景中的几个关键状态用容易观察的方式呈现出来。前后置切换会改变取景器文字、背景色和按钮目标；闪光开关会改变开关文案；照片与录像模式会同时改变顶部标签、主按钮和颜色；拍摄动作会递增数量、改变提示语并点亮缩略图占位块。这些变化之间彼此独立，又能组合成多条完整的操作路径。用户可以先调整镜头，再调整闪光，再切换模式，最后点击主按钮；每一步的结果都能在对应区域看到。
2026-08-24 19:20:20
362
原创 音频播放与音量控制的 ArkUI 实践：把页面结构、状态与反馈做扎实
这个音频播放页面并不试图伪装成一个完整音乐应用。它用三首固定曲目、四类可变状态、十二根波形柱、一个播放按钮、两条滑块和一个列表，把播放器界面中常见的关系集中展示出来。打开页面可以看到当前曲目，点击播放可以看到按钮、波形和进度的联动，拖动滑块可以看到数值变化，选择曲目可以看到标题、列表和进度一起更新。页面真正实现的是这些可见的状态反馈，而不是声音输出。它没有真实音频文件，没有音频解码，没有系统媒体控制，也没有自动计时播放。正因为边界清楚，我们才可以把注意力放在页面结构、状态关系和交互反馈本身。
2026-08-24 19:17:55
301
原创 拆解AVPlayer 视频播放开发：原生鸿蒙页面的实现路径与调试方法
打开页面，先确认顶部标题、片名和“HD”标签，预览区应显示“夜色中的城市”和固定时长，播放按钮应处于播放符号状态。速度行中 1.0 倍按钮为红色选中状态，底部按钮写着“开始播放”，全屏按钮写着“进入全屏”，播放列表显示三个固定片段名称。点击中央播放按钮，观察按钮和底部文字变成暂停状态，进度可能向前移动 4。点击暂停，观察播放文字恢复，进度保留。拖动滑块，观察红色轨道和左侧数字同步变化，同时确认播放按钮不会因为拖动而自动切换。点击 0.5 倍、1.5 倍和 2.0 倍，确认选中颜色一次只出现在一个按钮上。
2026-08-24 19:16:37
233
原创 多设备协同编辑实战的 ArkUI 实践：把页面结构、状态与反馈做扎实
协同编辑”很容易让人联想到几台设备同时改一份文档、光标实时跳动、网络断开后还能自动合并。第 105 个工程的页面没有做这些复杂能力。它是一个很小、也很适合入门拆解的 ArkUI 页面：屏幕上放着一份会议纪要，用户可以直接修改文字，点击“插入评论”，或点击“保存并同步”；页面随之用“待同步/已同步”和版本号给出本地反馈。下方的三位协作者及其设备名称也是固定展示数据。先把这个边界讲在前面很重要。阅读示例时，界面上的文案不等于底层能力已经存在。
2026-08-23 20:49:08
298
原创 拆解分布式设备认证：原生鸿蒙页面的实现路径与调试方法
第 104 个示例用一个入口页面、三个响应式状态和一个固定数组，展示了 ArkUI 声明式界面最直观的因果链：用户点击，状态赋值，所有依赖状态的文字和样式同步呈现。methods提供选项，method表示选择，trusted表示认证前后外观，notice把最近动作反馈给用户。页面仅使用基础 ArkUI 组件完成布局，没有网络或设备认证模块参与。把它看作设备认证交互原型是准确的；把它写成已经实现分布式发现、身份核验或可信设备管理的成品则不准确。只要始终以Index.ets。
2026-08-23 20:17:35
182
原创 跨设备媒体播放工程化笔记：可读代码与可复现页面并行推进
该工程的应用名带有“跨设备媒体播放”，页面里也出现了“投播”“远程播放”“进度已同步”等文字，但先把事实说在前面：当前工程是一个。它没有调用媒体播放器，没有搜索附近设备，没有建立分布式连接，也没有把任何音频实际送到音箱或平板。用户点击页面后看到的变化，来自Index.ets中几个本地@State字段。这个限定并不降低示例的价值。相反，原型很适合初学 ArkTS 时练习一件常被忽略的事：不要把界面上的文案当成系统已经完成的能力，而要从入口、状态、事件和渲染表达式逐项确认页面到底做了什么。
2026-08-23 20:16:53
197
原创 从需求到页面：分布式任务调度的 ArkTS 原生实现
分布式任务调度”很容易让人联想到设备发现、可信认证、任务迁移、断点恢复和远端回执。第 102 个工程没有实现这一整套能力。它是一个运行在手机上的 ArkUI 单页演示：页面用“视频转码任务”作为例子，用进度、状态文字和两个按钮，模拟任务开始、推进、交给智慧屏以及重新开始这几种可见状态。把范围说清楚并不是降低它的价值，反而是理解这份代码的起点。它适合拿来学习如何将一段有“迁移感”的交互过程，收束成可读、可点击、可复现的 ArkTS 页面。工程实际入口是。其中调用，所以应用启动后加载的是。也只登记了。
2026-08-23 20:16:01
202
原创 一次开发多端部署实战：用声明式 UI 串起数据、操作和结果
工程用非常少的代码完成了一个完整的声明式交互练习：固定数组生成选择项，target负责当前目标，ready负责完成态，tip负责说明；用户点击后只更新状态，多个Text、颜色和按钮标题自然读取新值并显示一致结果。顶部信息块、可换行的Flex标签、三行清单卡和提示卡共同组成一条从选择到反馈的阅读路径，外层Scroll则保证手机小屏内容可继续向下查看。更重要的收获是不要把界面文案当作实现证据。
2026-08-23 20:14:50
204
原创 状态管理综合实战落地指南：让原生界面在模拟器里稳定运行
State Practice的核心不是堆砌组件或 API，而是让业务目标、页面结构、状态来源、用户操作和结果反馈彼此对应。本文从当前源码提取事实，用初始图证明默认结构，用操作图证明状态变化，再用完整代码把结论落回工程文件。发布前请再次确认三件事：文章描述的是当前工程真实存在的能力；图片展示的是当前代码可以复现的状态；异常和恢复路径没有被“正常显示”这类空泛表述掩盖。做到这三点，长文才是在解释工程，而不是用篇幅掩盖工程。
2026-08-22 12:10:11
161
原创 用 ArkTS 做好状态与路由结合：从核心 API 到可验证交互
State Routing的核心不是堆砌组件或 API，而是让业务目标、页面结构、状态来源、用户操作和结果反馈彼此对应。本文从当前源码提取事实，用初始图证明默认结构，用操作图证明状态变化，再用完整代码把结论落回工程文件。发布前请再次确认三件事：文章描述的是当前工程真实存在的能力；图片展示的是当前代码可以复现的状态；异常和恢复路径没有被“正常显示”这类空泛表述掩盖。做到这三点，长文才是在解释工程，而不是用篇幅掩盖工程。
2026-08-22 12:09:38
164
原创 状态重置与清理的 ArkUI 实践：把页面结构、状态与反馈做扎实
State Reset的核心不是堆砌组件或 API，而是让业务目标、页面结构、状态来源、用户操作和结果反馈彼此对应。本文从当前源码提取事实，用初始图证明默认结构，用操作图证明状态变化，再用完整代码把结论落回工程文件。发布前请再次确认三件事：文章描述的是当前工程真实存在的能力；图片展示的是当前代码可以复现的状态；异常和恢复路径没有被“正常显示”这类空泛表述掩盖。做到这三点，长文才是在解释工程，而不是用篇幅掩盖工程。
2026-08-22 12:09:04
150
原创 CrossPageState 的 ArkUI 实践
Cross Page State的核心不是堆砌组件或 API，而是让业务目标、页面结构、状态来源、用户操作和结果反馈彼此对应。本文从当前源码提取事实，用初始图证明默认结构，用操作图证明状态变化，再用完整代码把结论落回工程文件。发布前请再次确认三件事：文章描述的是当前工程真实存在的能力；图片展示的是当前代码可以复现的状态；异常和恢复路径没有被“正常显示”这类空泛表述掩盖。做到这三点，长文才是在解释工程，而不是用篇幅掩盖工程。
2026-08-22 12:07:51
153
原创 StateDebugging 的 ArkUI 实践
State Debugging的核心不是堆砌组件或 API，而是让业务目标、页面结构、状态来源、用户操作和结果反馈彼此对应。本文从当前源码提取事实，用初始图证明默认结构，用操作图证明状态变化，再用完整代码把结论落回工程文件。发布前请再次确认三件事：文章描述的是当前工程真实存在的能力；图片展示的是当前代码可以复现的状态；异常和恢复路径没有被“正常显示”这类空泛表述掩盖。做到这三点，长文才是在解释工程，而不是用篇幅掩盖工程。
2026-08-22 12:07:10
157
原创 自适应布局实战（百分比/权重）的 ArkUI 实践：把页面结构、状态与反馈做扎实
技术路线：HarmonyOS 原生 ArkTS / ArkUI。
2026-08-21 13:50:48
198
原创 鸿蒙 ArkUI Checkbox 复选框组件：多选管理、全选反选与协议确认
状态单一来源选中数据（数组或行字段）是唯一真相源，全选框与统计都由它推导，任何操作路径最终都写入同一份数据。三态用统计表达ArkUI 复选框没有原生半选图形，用"已选 x/n"与 All/Part/None 徽标表达部分选中。点击与勾选分离协议文本的阅读点击不改变勾选，勾选是承诺、点击是阅读，注册按钮用 enabled 做门禁。多选即可多可少可多选、可取消的场景归 Checkbox，必选其一的场景归 Radio，二态开关归 Toggle。
2026-08-20 16:19:26
356
原创 鸿蒙 ArkUI Stepper 步骤导航器：分步表单、流程引导与状态管理
分步表单不是"把表单切几刀"，而是有一套完整的设计模式。本节把它提炼成四条规则。分步表单拆的是字段，管的是耐心。本文用 Flutter 内置 Stepper 实现了注册向导三步流程，把"步骤状态管理"与"数据传递"两条线完整打通：数据线用_FormData单一模型跨步骤共享，状态线用+ 校验函数把住前进关口，倒计时用mounted保证生命周期安全。每步只问 1~2 个问题、字段前轻后重、能即时校验别拖到关口、回退永不丢数据。回看引言的问题：分步到底分的是什么？答案已经清晰——分的是认知负担，管的是放弃率。
2026-08-20 16:16:50
336
原创 鸿蒙 ArkUI Slider 滑动条组件：音量控制、进度拖拽与自定义样式
把Slider核心能力收成一张图，便于回顾：fill:#333;important;important;fill:none;color:#333;color:#333;important;fill:none;fill:#333;height:1em;Slider 滑动条数值模型: value/min/max/step样式: OutSet/InSet + 颜色定制方向: direction/reverse提示: showTips/showSteps事件: onChange + 四阶段 mode。
2026-08-20 16:12:43
348
原创 鸿蒙 ArkUI CustomDialog 自定义弹窗：确认框、表单弹窗与 ActionSheet
CustomDialog 装饰器要求弹窗内容遵循组件化规则；Flutter 的 builder 完全没有这个限制——Dialog容器里放任意 Widget 组合。Text('新建分组', style: Theme.of(ctx).textTheme.titleLarge),Row(mainAxisAlignment: MainAxisAlignment.end, children: [取消, 确定]),],),),弹窗布局必须遵循"小而精"——弹窗不是页面，装不下长表单与复杂列表；
2026-08-20 16:09:39
339
原创 鸿蒙 ArkUI Tabs 选项卡切换：分类导航、滑动联动与懒加载
没在onChange里更新，或自定义tabBar内没读。记住"框架只切内容、不切你的状态"——必须手动桥接。后也要同步，否则控制器切了内容、标签不变色。把Tabs核心能力收成一张图，便于回顾：fill:#333;important;important;fill:none;color:#333;color:#333;important;fill:none;fill:#333;height:1em;Tabs 选项卡基础: Tabs+TabContent+tabBar样式: @Builder 自定义/图标。
2026-08-20 16:04:48
319
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人