晚霞的不甘-CSDN博客

原创 Flutter for OpenHarmony 实战：[开发环境搭建与项目编译指南]

React Native for OpenHarmony 实战：[开发环境搭建与项目编译指南]

2026-01-19 00:48:48 2615

原创 HarmonyOS ArkUI 状态管理全解：从 @State 到 @Observed 的选型与实战

ArkUI状态管理工具选型指南：6种装饰器详解本文系统介绍了鸿蒙ArkUI框架中的6种状态管理装饰器及其适用场景： @State - 组件内部私有状态，仅当前组件有效 @Prop - 父传子单向数据流，子组件接收副本 @Link - 父子组件双向绑定，需用$传递引用 @Provide/@Consume - 跨层级状态共享，避免逐层传递 @Observed/@ObjectLink - 深度观察对象属性变化 @Watch - 监听状态变化执行回调文章通过具体代码示例展示了各装饰器的使用方式，并对比了相似装饰

2026-07-21 10:10:04 362 1

原创 HarmonyOS ArkTS 多页面应用的设计一致性与架构思维

本文通过分析一个多工具应用中的五个功能页面（二维码、单位换算、随机决策、颜色提取、倒计时），探讨了设计系统与架构思维。五个页面采用统一的视觉语言：深色渐变背景（#1A1A2E到#0F3460）、20px边距、圆角卡片（16px）、固定导航栏结构（返回按钮+标题），同时每个工具拥有独特的主色调（如二维码#4F6EF7、倒计时#FF2D55）。文章详细拆解了字号系统（标题18px/正文14-16px）、色彩应用、阴影参数等设计要素，并指出了当前存在的不一致性（如背景色、emoji使用等）。最后提出可提取统一的设

2026-07-21 09:43:17 318

原创 HarmonyOS ArkTS 倒计时器的时间计算与列表渲染

本文介绍了倒计时器的设计与实现，重点解析了时间差计算、进度环百分比和事件列表的动态管理。通过两个核心类CDEvent（存储事件信息）和RemainInfo（计算剩余时间）实现数据与逻辑解耦。时间差计算采用毫秒时间戳运算，逐级拆解为天/时/分/秒，并设计了30天最大跨度的进度环算法。文章还讨论了性能优化策略（如避免实时刷新），以及事件添加功能（包含日期选择器和颜色选择），最后通过条件渲染实现已完成事件的特殊展示。

2026-07-21 09:19:28 364

原创 HarmonyOS ArkTS 随机决策器的动画编排与 LCG 随机数

这篇文章介绍了一个不使用 Math.random() 的随机决策器实现，采用线性同余生成器（LCG）算法自主生成随机数。主要内容包括：状态管理：使用枚举类型管理三个选项卡（硬币、骰子、数字），通过条件渲染实现界面切换。随机数生成：自主实现LCG算法，通过时间戳作为种子，提供可控且均匀的随机数分布，支持结果复现。动画效果：硬币翻转采用10阶段链式动画，模拟物理运动规律。骰子摇晃通过6阶段随机位移动画，逐渐减速至停止。使用定时器和递增长时间控制动画节奏，实现流畅的视觉效果。该方案通过自定义算法和精

2026-07-21 09:11:19 339

原创 HarmonyOS ArkTS 颜色提取器的色彩算法与 Builder 复用

这篇文章介绍了如何通过代码实现颜色提取和配色方案生成功能。主要内容包括：使用RGB和HSL两种色彩模型，并介绍它们之间的转换算法详细解析了RGB转HSL和HSL转RGB的数学原理和实现方法讲解了五种配色方案的生成逻辑（互补色、类似色、三等分色等），基于色轮的数学计算展示了如何通过随机色相生成协调的随机色盘强调了保持饱和度和亮度不变，只改变色相来保证配色协调性文章通过代码示例和图示，展示了如何从底层算法实现一个完整的颜色提取和配色工具，涵盖了色彩理论、数学计算和前端实现等多个方面。

2026-07-20 20:30:56 181

原创 HarmonyOS ArkTS 二维码生成器的编码原理与 Canvas 渲染

本文详细解析了二维码生成的完整流程，代码不到300行却涉及多项关键技术。主要步骤包括：字节编码（将输入字符转为ASCII码）、构造比特流（添加模式指示器和终止符）、选择版本（根据数据量确定二维码尺寸）、计算里德-所罗门纠错码（使用GF(256)有限域运算），最后铺设模块矩阵（包括定位图案、时序图案和数据掩码）。整个过程展示了如何将文本信息转换为可识别的黑白方块图案，通过Canvas渲染输出最终二维码。文章特别强调了纠错码的重要性，它能确保二维码在部分受损时仍可被正确读取。

2026-07-20 20:10:04 370

原创 HarmonyOS ArkTS 单位换算器的计算逻辑与交互设计

本文介绍了一个多功能单位换算器的实现，重点剖析了其数据模型、核心算法和交互设计。通过TypeScript的Record和interface定义了灵活的单位数据结构，其中温度单位因需要偏移量而特殊处理。换算算法分为两种模式：普通单位使用基于基本单位的factor公式，温度单位则通过中间转换（摄氏度）处理。文章详细解释了数字格式化策略，包括处理极值、精度控制和末尾零去除。状态管理采用6个@State变量跟踪用户选择，实现了分类切换、单位交换和循环选择等交互功能。UI划分为导航栏、分类标签、输入区、单位选择区和结

2026-07-20 19:09:28 375

原创 HarmonyOS ArkTS 工具网格与路由导航：从小工具百宝箱看卡片式布局与页面跳转的实战技巧

本文介绍了如何开发一个集成了五个实用小工具的鸿蒙应用，重点解析了首页的设计与实现。文章首先说明了多页面架构的选择理由，对比了路由跳转与Swiper的适用场景。随后详细讲解了工具数据建模、路由跳转封装、页面布局设计等核心实现细节，包括：使用interface定义工具数据结构，实现数据与UI分离采用五种协调的配色方案区分不同工具封装路由跳转方法提升代码可维护性设计包含渐变背景和网格布局的精美首页界面实现自适应两列卡片布局，优化用户体验文章通过具体代码示例，展示了如何利用ArkUI框架构建一个功能实用

2026-07-20 19:02:51 179

原创 HarmonyOS：ArkTS数据模型的设计与演进实战

本文介绍了星空运势应用的数据模型重构过程。最初数据分散在四个文件中，后合并为单一DataModel.ets文件，包含六个核心类和四个常量数组。重构动机是数据关联紧密且修改频繁，合并后提高了开发效率。核心类包括： Pos2D/StarPt处理坐标和星点数据 SignData存储星座完整信息（9个字段） TarotInfo/FortuneDetail/LuckyItem分别管理塔罗牌、运势维度和幸运物数据。常量数组则集中管理12星座、21张塔罗牌等静态数据。合并原则适用于数据量小且关联紧密的场景，通过合理设计默

2026-07-19 13:20:35 75

原创 HarmonyOS ArkTS 星级评分与卡片式布局：从转盘运势详解看结构化数据的可视化表达

文章摘要：本文介绍了运势转盘页面的交互优化与实现细节。通过丰富转盘结果内容（运势详解、幸运物品等），用户停留时间显著提升。技术实现上采用数据和UI分离的设计模式，运势数据通过轻量的interface定义，星级评分用emoji字符组合实现视觉表达。布局采用卡片式设计，利用Blank()组件优化对齐，幸运物区域通过百分比宽度和间距控制实现自适应排列。整体设计注重模块化和代码复用，兼顾视觉效果与性能优化。

2026-07-19 13:06:02 327

原创 HarmonyOS ArkTS 导航栏的精细化打磨：动画曲线、视觉层次与交互细节的调优

本文详细剖析了一个导航栏组件的精细化设计过程，从布局结构到微交互细节。导航栏采用三层纵向布局（标题区、图标区、下划线区），通过精心调整的视觉参数（图标缩放1.2倍、未选中项透明度0.3、动画时长350/250ms错落）和独立的下划线动画设计（淡入淡出+EaseOut曲线），实现了既突出焦点又不失整体性的效果。文章特别强调了"微调累积效应"——padding增减2px、动画时长差50ms等小调整叠加后显著提升用户体验，并通过对比实验验证了各参数的最佳取值。最终方案在视觉层次、交互反馈和性能表现之间取得了平衡，

2026-07-19 13:01:33 317

原创 HarmonyOS ArkTS 数据驱动的富文本展示：从星图详情页看结构化数据的可视化呈现

本文介绍了如何优化星座运势应用中数据的可视化展示。面对新增的优势、弱点和最佳配对三类信息，作者采用分层设计策略：星点可视化（视觉焦点）、基础标签（元素/日期）、详细描述（优势/弱点）和标签列表（最佳配对）。通过扁平化数据结构（避免嵌套对象）和条件渲染技术，实现了三种UI状态的流畅切换。具体实现中，优势/弱点采用深色卡片展示纯文本，最佳配对则用金色标签呈现数组内容，结合emoji图标和精细的边框设计，打造出层次分明的视觉体验。这种设计让用户能快速获取关键信息，同时保留深入探索的灵活性。

2026-07-19 12:43:45 159

原创 HarmonyOS ArkTS 实战重构：从单文件到模块化拆分的完整过程

摘要文章介绍了一个星空运势应用从单一文件（500+行）到模块化重构的过程。原代码将所有功能（数据、状态、UI）混在Index.ets中，导致维护困难。重构后：数据层（星座/塔罗数据、常量）独立到model目录 UI层拆分为三个Component组件（转盘、星图、塔罗）主入口文件精简至100行左右新增星座详细信息字段重构使代码结构清晰，各模块职责单一，便于维护和扩展。关键步骤：先拆分独立数据，再解耦UI组件，最后整合主入口。

2026-07-19 12:38:54 385

原创 HarmonyOS ArkTS 代码架构与模块化：从星空运势应用看单文件的边界与组件拆分策略

本文分析了将500多行代码集中在一个文件中的问题，并提出了模块化拆分的解决方案。单文件架构虽然开发初期便捷，但随着代码量增长，会导致状态耦合、维护困难、复用性差和测试不便等问题。文章对比了ArkUI中@Builder和@Component两种代码复用方式的特性与适用场景，建议根据功能独立性、状态管理和复用需求进行组件拆分。最后提供了具体的拆分策略：先提取数据与工具函数，再按功能模块拆分为独立组件，最终形成主页面+组件+数据+工具的分层结构，从而提升代码的可维护性和复用性。

2026-07-19 12:12:49 196

原创 HarmonyOS ArkTS 自定义导航与视觉设计：从星空运势应用看顶部导航栏的动画编排与暗色主题实现

本文介绍了星空运势应用如何优化导航栏设计，通过将底部Tab移至顶部，采用图标+文字+下划线的三重视觉反馈方案，实现了更优雅的导航体验。技术实现上，通过状态驱动同步导航栏与Swiper页面切换，并设计了紫色与金色的主题配色系统。文章详细解析了动画效果参数（如15%缩放比例、300ms动画时长）、颜色梯度设计原理（6种紫色与金色搭配），以及三重反馈机制如何提升用户体验和专业感，最终呈现出一个协调的暗色主题界面。

2026-07-19 12:07:21 382

原创 HarmonyOS ArkTS 圆形布局与旋转动画：从命运转盘页面看极坐标计算与属性动画的实战技巧

本文详细解析了星空运势应用中"命运转盘"功能的实现原理。转盘由12个星座图标均匀分布在圆形布局中，通过极坐标转换公式计算每个图标的位置坐标（x = rcosθ, y = rsinθ）。技术实现采用三层Stack结构：底层圆形背景、中层定位的星座图标和顶层中心装饰。旋转动画通过.rotate()属性动画实现，设置1800度以上的旋转角度配合EaseOut缓动曲线，使转盘呈现自然减速停止效果。关键点包括极坐标转换、声明式动画控制以及视觉层次构建，仅200行代码就实现了既美观又具有数学美感的交互效果。

2026-07-18 11:36:55 415 3

原创 HarmonyOS ArkTS 状态机与动画编排：从塔罗牌阵页面看条件渲染与数组状态管理

本文探讨了一个塔罗牌运势应用的开发要点，重点分析了三张牌交互的实现细节。文章首先指出看似简单的三张牌布局实际涉及复杂状态管理，包括牌堆立体感、翻牌动画、独立状态和洗牌算法等。随后详细介绍了页面结构的三个阶段切换逻辑，以及如何利用三个@State数组管理牌面状态。在视觉实现上，通过Stack层叠和渐变效果营造牌堆立体感。最后解释了Fisher-Yates洗牌算法的实现原理，确保每天结果固定。整个设计体现了小型状态机的思想，通过清晰的状态转换逻辑简化UI开发。

2026-07-18 11:31:15 416 2

原创 HarmonyOS ArkTS 坐标系统与数据驱动布局：从星座星图页面看 Stack 定位与 Grid 网格的实战应用

本文介绍了一个星座运势应用中星图页面的实现过程，重点探讨了如何精确绘制星座星图。作者通过三层嵌套布局（标题、星图详情、星座网格）构建页面，其中星图详情部分使用Stack组件实现层叠效果，并通过.position()方法精确定位每个星点坐标。文章对比了Grid与Flex布局的适用场景，展示了选中状态的视觉反馈设计，以及点击切换的交互逻辑。最终实现了一个包含12星座、每个星座6-8颗精确定位星点的可视化星图效果。

2026-07-18 11:13:19 257 1

原创 HarmonyOS ArkTS 复合动画与多页导航：从星空运势应用看 Swiper、Stack 与旋转动画的协同

摘要：HarmonyOS星空运势应用的技术实现该项目基于HarmonyOS ArkUI框架开发了一个包含命运转盘、星座星图和塔罗牌功能的复合应用。技术亮点包括：数据建模：采用class定义数据结构，支持实例化与默认值，增强了类型安全性和可扩展性。页面导航：通过Swiper组件实现手势滑动切换，配合自定义顶部导航栏，优化了用户体验。转盘动画：使用Stack组件实现多层叠加效果通过三角函数计算星座坐标位置应用rotate属性和animation动画实现平滑旋转结合状态管理控制旋转过程状态管理：

2026-07-18 11:05:38 367 6

原创 HarmonyOS ArkTS 主题系统与架构设计：从骰子应用看设计 Token 与模块化实践

本文介绍了如何为应用实现主题系统，以支持深色/浅色模式切换。核心内容包括：设计Token体系：通过定义颜色、间距、圆角、字号等设计常量，构建统一的设计语言系统主题配置实现：创建Theme.ts文件管理主题相关配置，使用枚举类型确保类型安全颜色系统设计：采用Material Design风格的7色分类法，区分背景色、主色调、强调色等主题切换机制：通过getThemeColors函数实现动态主题切换，支持后续扩展浅色模式工程化实践：采用模块化架构组织代码，将主题系统独立为utils/Theme.ts文

2026-07-18 10:20:46 350

原创 HarmonyOS ArkTS 列表渲染与数据持久化：从历史记录页面看 List 组件与存储方案选型

本文介绍了骰子应用历史记录页面的实现细节。重点分析了三个核心设计模式：空状态设计：通过图文提示和操作引导优化用户体验列表渲染：采用List+ForEach实现高性能滚动，建议添加key参数数据格式化：手动处理时间戳以保证格式一致性文章还提供了代码优化建议，如为ForEach添加key、改进空状态交互设计等。这些细节处理对提升应用性能和用户体验具有重要价值。

2026-07-18 10:12:08 312

原创 HarmonyOS ArkTS 组件交互与输入处理：从硬币和随机数页面看 ArkUI 事件响应机制

本文分析了基于ArkUI框架开发的硬币翻转和随机数生成功能，揭示了简单交互背后的技术细节。硬币页面展示了条件渲染、事件绑定与旋转动画的实现，通过if-else控制状态显示，利用rotate()实现翻转效果，并采用字符串而非布尔值增强可读性。随机数页面则演示了输入组件处理，通过TextInput获取用户输入范围并生成随机数，同时处理最小值可能大于最大值的边界情况。文章特别指出事件绑定中箭头函数保持this指向的重要性，并建议对频繁变化的渲染内容优化性能。两个案例共同体现了ArkUI在交互设计中的关键机制，包括

2026-07-17 19:49:37 146

原创 HarmonyOS ArkTS 类型系统与数据建模：从骰子应用看工程化编程实践

本文以HarmonyOS骰子应用为例，探讨了ArkTS类型系统与数据建模的工程化实践。文章重点分析了Dice.ts中的类型定义艺术，如DiceType接口设计、RollResult中加入rolledAt字段的考量，以及工厂函数和纯函数的设计价值。同时讨论了Database.ts中数据持久化的封装策略，包括同步/异步API设计、错误处理和数据校验的重要性。最后提及Theme.ts展示的配置驱动UI理念。全文强调：良好的类型设计能在编译阶段发现错误，合理的数据分层可降低系统耦合，而面向未来的数据建模能为功能扩展

2026-07-17 19:43:20 127

原创 HarmonyOS ArkTS 状态管理与自定义构建器实战：从随机数应用看 ArkUI 组件化设计

本文介绍了基于HarmonyOS ArkTS开发的随机工具应用，包含掷骰子、抛硬币、随机数生成和历史记录功能。重点探讨了ArkUI的核心机制：通过@State实现响应式状态管理，使用递归setTimeout实现骰子滚动动画效果，以及底部Tab导航的架构设计。文章分析了ArkTS与React在状态管理和渲染机制上的区别，并分享了实现过程中的性能优化经验，如状态提升策略和动画帧率控制。这个小应用虽然功能简单，但完整呈现了ArkUI开发的核心技术要点。

2026-07-17 19:33:07 288

原创 HarmonyOS今天吃什么——历史记录的时间轴与标签筛选

本文介绍了转盘抽签历史记录页面的设计与实现。页面采用倒序排列展示抽签结果，包含食物名称、emoji、分类和时间信息，顶部提供分类筛选标签，底部设有清空按钮。关键设计点在于直接存储食物名称和emoji而非ID引用，确保记录在食物删除后仍有效。页面结构分为标题、筛选标签、记录列表和操作按钮四部分，筛选逻辑通过分类标签实现。列表采用左右布局展示核心信息和元数据，并包含空状态提示。清空功能采用红色警告按钮和二次确认机制，确保操作安全性。整体设计保持了与其他功能模块的样式一致性，同时针对历史记录特性进行了优化。

2026-07-17 12:13:36 173

原创 HarmonyOS今天吃什么——数据库层的持久化设计与CRUD实现

本文介绍了美食转盘应用的数据持久化设计，采用文件存储食物数据和Preferences存储主题设置的双方案。文件存储适用于需全量读取和筛选的大数组数据（如50-100条食物记录），而Preferences适合频繁读取的小配置（如主题字符串）。文章详细解析了数据库类的初始化流程、文件读写底层实现、CRUD操作方法，以及转盘抽签的核心逻辑，展示了针对不同数据特性选择最优存储方案的设计思路。

2026-07-17 12:02:26 328

原创 HarmonyOS今天吃什么——管理页面的增删改查与收藏设计

美食转盘管理页功能解析该管理页分为三个核心区域：顶部输入区 - 含菜名输入框、emoji选择及添加按钮，支持必填校验和自动清空中间分类区 - 横向滚动标签栏（中餐/日料等），用于指定新增食物分类底部列表区 - 展示所有食物卡片，每项包含emoji图标、名称、收藏状态（⭐标记）及操作按钮（❤️收藏切换/🗑️删除）交互亮点：添加按钮随输入内容动态变色分类标签采用选中态视觉反馈收藏状态通过⭐标记和❤️按钮颜色双重提示列表项左右分区布局（左信息右操作）整个页面通过清晰的区域划分和状态反馈，实现

2026-07-17 11:16:43 227

原创 HarmonyOS今天吃什么——数据库层的双表架构与持久化策略

文章摘要：美食转盘App采用简洁的双表数据架构，通过Preferences存储JSON格式的食物列表(FoodItem[])和选择历史(PickRecord[])。食物表含6个字段，历史表采用冗余设计避免关联查询。数据层提供9个核心方法，包括带分类筛选的查询、随机选择等操作。关键特性包括：使用36进制时间戳+随机数生成唯一ID、工厂函数创建食物项、异常处理覆盖双表初始化、以及专门的数据恢复方法resetFoods。整体设计平衡了简单性与功能性，适合小规模美食管理场景。（149字）

2026-07-17 11:03:14 406

原创 HarmonyOS今天吃什么——转盘的随机算法与动画实现

这篇文章介绍了一个解决"今天吃什么"难题的App，核心功能是通过转盘随机选择美食。App采用单页四Tab架构（转盘、管理、历史、设置），数据模型包括美食项和选择记录。转盘动画使用setTimeout实现，通过逐渐增加间隔时间模拟减速效果，最终随机停止。文章详细解析了动画参数、三种视觉状态以及随机性保证机制，强调视觉随机与实际选择分离的设计优势。按钮状态根据条件变化，确保良好用户体验。整体方案简洁高效，适合简单随机选择场景。

2026-07-17 10:52:00 220

原创 HarmonyOS时光胶囊——数据库层的持久化设计与数据操作

本文介绍了CapsuleDatabase在App中的核心作用与实现机制。作为数据存储中心，它采用"内存数组+Preferences持久化"的双层架构，兼顾性能与数据安全。内存层存储Capsule对象数组，持久化层通过Preferences存储JSON字符串，写入时先更新内存再同步磁盘。文章详细解析了Capsule接口的8个字段定义及其应用场景，阐述了CapsuleDatabase类的三个关键属性设计，并深入分析了数据加载流程、查询机制等核心功能实现。这种轻量级方案避免了SQLite的复杂度，适合小型应用的持

2026-07-16 18:57:56 83

原创 HarmonyOS时光胶囊——记忆洗牌的随机展示与交互设计

《记忆洗牌：时光胶囊的随机重逢体验》摘要：记忆洗牌是时光胶囊应用中极具仪式感的功能，通过随机算法为用户抽取历史胶囊，打造"拆盲盒式"的回顾体验。该功能采用Fisher-Yates洗牌算法确保公平随机性，并设计了三种卡片展示状态（封印中/待开启/已开启）以适应不同场景。大卡片视觉设计强化沉浸感，配合无限刷新的交互逻辑和进度提示，让用户获得持续探索的乐趣。入口设置兼顾冲动操作与系统探索需求，空状态处理则通过友好提示引导用户创建内容。全文从算法设计到交互细节，展现了如何将简单的随机功能转化为有温度的回忆唤醒工具

2026-07-16 18:52:16 101

原创 HarmonyOS时光胶囊——主题系统的四套配色与切换机制

时光胶囊 App 主题系统设计摘要时光胶囊 App 提供暖金、亮色、暗色、护眼四套主题，采用"一个变量驱动全局颜色"机制，通过 ThemeColors 接口和 getThemeColors() 工厂函数实现动态切换。系统采用四层架构（枚举→工厂函数→快捷方法→组件消费），确保职责清晰。暖金主题以棕金色调传递温暖感，亮色/暗色主题分别适配昼夜场景，护眼主题采用低蓝光绿色调。主题数据通过 Preferences 持久化存储，保障用户体验一致性。该设计支持灵活扩展，新增主题仅需在工厂函数中添加分支即可。（字数

2026-07-16 18:43:41 136

空空如也

空空如也