- 博客(42)
- 收藏
- 关注
RSS订阅原创 鸿蒙ArkTS树形列表实现详解：递归 Column + Padding 缩进 + GestureDetector 展开折叠
鸿蒙ArkTS树形列表实现方案详解 摘要 本文详细介绍基于鸿蒙ArkTS框架实现树形列表的技术方案。该方案采用递归Column布局、Padding缩进和GestureDetector交互的核心技术组合，主要包括以下要点： 数据模型设计：使用@Observed装饰的TreeNode类构建树形数据结构，包含名称、子节点和类型等属性 递归渲染机制：通过@Builder装饰器实现组件的递归调用，自动处理任意深度的层级嵌套 视觉层级呈现：利用Padding(left)实现逐级缩进效果，缩进量与节点深度成正比 交互功能
2026-07-17 16:20:20
201
原创 鸿蒙ArkUI横向可滚动筛选标签列表实现详解
本文详细介绍了基于鸿蒙ArkUI框架实现横向可滚动筛选标签列表的全过程。通过自定义FilterTagItem组件、响应式状态管理@State和资源集中配置，构建了一个功能完备的标签筛选系统。关键实现包括：使用Scroll+Row实现横向滚动，$r()引用资源文件统一管理样式，@Builder构建可复用标签组件，以及点击事件回调处理。该方案完全基于ArkUI原生能力，具有性能高效、维护方便的特点，适用于电商分类、内容筛选等多种场景，为鸿蒙应用开发提供了实用的UI组件实现参考。
2026-07-17 16:18:15
233
原创 鸿蒙 ArkUI 列表项圆形角标组件：设计与实现全解析
本文详细解析了如何在鸿蒙ArkUI中设计与实现带圆形角标的列表项组件。文章从角标设计原则出发，对比Flutter与ArkUI的实现差异，重点介绍了数据模型构建、动态角标布局、交互逻辑实现等核心环节。通过Stack布局、条件渲染、状态管理等技术，还原了类似iOS风格的红色圆形通知角标效果，并解决了ArkTS严格模式下的常见问题。该组件支持数字格式化、零值隐藏、点击清除等特性，可作为消息列表、待办事项等场景的通用UI解决方案。
2026-07-17 16:16:17
298
原创 HarmonyOS ArkUI 布局动画实战：从零构建文件浏览器
本文基于HarmonyOS ArkUI框架，通过开发文件浏览器案例，系统讲解了ArkUI的布局系统、组件化设计和动画实现。文章首先展示项目功能（视图切换、平滑动画、卡片UI等），随后解析工程结构和技术栈，重点剖析了声明式UI范式、组件化设计和装饰器系统。在布局系统部分，详细对比了Column/Row、Grid/List等核心容器的使用场景，并给出典型代码示例。动画机制章节深入分析animateTo显式动画和.animation()属性动画的区别与配合使用方式，完整呈现了从零构建文件浏览器的开发过程。
2026-07-17 16:14:20
196
原创 鸿蒙 ArkUI 列表底部加载更多指示器实现详解
本文详细介绍了在鸿蒙ArkUI中如何实现列表底部的加载更多指示器，并与Flutter的ListView.builder方案进行了对比。文章从分页加载的基本概念讲起，分析了底部加载指示器的设计目标，并通过具体代码示例展示了鸿蒙ArkUI的实现方法。 核心内容包括： 分页加载的基本原理和两种交互模式（显式/隐式） 鸿蒙ArkUI与Flutter在列表组件上的关键差异对比 状态变量设计（搜索关键词、数据源、分页状态等） 数据加载逻辑的实现细节 滚动监听触发加载的机制 实现要点总结： 使用@State装饰器管理响应
2026-07-17 16:07:26
375
原创 HarmonyOS API 24 状态管理与@Builder装饰器技术详解
本文深入解析了HarmonyOS API 24中的状态管理机制与@Builder装饰器技术。主要内容包括： 状态管理概述：介绍了ArkUI框架提供的@State、@Prop、@Link等核心装饰器，以及它们的适用场景和数据流向特点。 @State装饰器：详细讲解了组件内部状态管理的实现方式，包括响应式更新机制、初始值要求和性能优化策略。 @Prop装饰器：分析了父子组件间单向数据传递的实现方法，重点说明了其值传递特性和使用场景。 @Link装饰器：阐述了双向数据绑定的实现原理，强调其引用传递特性对父子组件状
2026-07-16 22:46:05
209
原创 HarmonyOS API 24 List组件与数据渲染技术详解
本文深入解析了HarmonyOS API 24中的List组件与数据渲染技术，主要内容包括： List组件架构与核心特性：支持双向滚动、虚拟滚动、分组展示等，API 24新增缓存控制、链式动画等能力 核心API详解：包括listDirection、cachedCount等关键属性，以及onScroll等事件处理机制 ListItem组件开发：涵盖高度控制、样式定制和分组展示技术 性能优化策略：通过缓存机制、虚拟滚动等技术实现高效数据渲染 该技术适用于需要展示大量数据的鸿蒙应用场景，开发者可通过灵活配置实现高
2026-07-16 22:45:27
237
原创 HarmonyOS API 24 布局组件与Flex布局技术详解
本文深入解析HarmonyOS API 24中的布局组件与Flex布局技术。主要内容包括：1) ArkUI布局体系概述，重点介绍Column(垂直布局)、Row(水平布局)和Flex(弹性布局)三大核心组件；2) Column和Row组件的详细参数配置，包括space间距、alignItems对齐方式、justifyContent内容分布等属性；3) Flex布局的核心特性，如flexGrow拉伸比例、flexShrink收缩比例、alignSelf单独对齐等；4) 各类布局组件的适用场景与最佳实践。文章通
2026-07-16 22:44:41
220
原创 HarmonyOS API 24 交互事件与动画效果技术详解
本文深入解析HarmonyOS API 24中的交互事件与动画技术，涵盖点击事件、触摸事件、手势识别以及动画效果的实现。主要内容包括：1）交互事件体系（点击、触摸、手势等）及其工作原理；2）onClick事件的高级用法（防抖、条件点击、事件委托）；3）onTouch事件的详细实现与典型应用场景（拖拽操作、手势识别）；4）ArkUI动画系统的属性动画和显式动画技术。通过代码示例展示了如何实现流畅的交互体验和视觉反馈，为开发者提供HarmonyOS应用交互设计的完整技术方案。（摘要字数：150字）
2026-07-16 22:43:41
272
原创 鸿蒙应用开发完全指南，涵盖ArkTS语法、UI组件等
《鸿蒙应用开发完全指南》摘要：本文系统介绍了华为HarmonyOS应用开发的学习路径。首先讲解HarmonyOS的分布式架构特点和开发环境搭建，通过"Hello World"示例展示基础开发流程。重点解析ArkTS语言核心语法，包括声明式UI、状态管理等特性，并详细演示常用UI组件(Text/Button/List等)和容器布局(Column/Row/Flex)的使用方法。最后涵盖数据库操作等进阶内容，帮助开发者从零开始掌握鸿蒙应用开发全流程，构建跨设备分布式应用。
2026-07-16 22:42:44
238
原创 HarmonyOS 响应式网格布局深度实践：从 Flutter LayoutBuilder 思想到 ArkUI GridRow 落地
本文介绍了在HarmonyOS中实现响应式网格布局的实践方案。通过对比Flutter的LayoutBuilder思想，重点分析了ArkUI框架下三种技术路径：手动监听容器尺寸变化、GridRow+断点系统、以及精细化span控制。文章推荐使用GridRow+Breakpoints方案，详细解析了其声明式API设计、性能优势及与鸿蒙断点系统的深度集成。配套案例展示了商品列表页在不同屏幕宽度下自动切换2/3/4列布局的实现，为跨平台开发者提供了从Flutter迁移到HarmonyOS的布局适配思路。
2026-07-06 06:53:40
362
原创 鸿蒙ArkUI学生成绩排名表实现详解 —— 从零构建教育应用的数据可视化组件
**本文基于鸿蒙ArkUI框架，详细讲解如何开发一个功能完善的学生成绩排名表组件。文章从技术选型、数据模型设计开始，逐步实现表格渲染、排序计算、前三名高亮等核心功能。主要内容包括： 采用ArkTS类型系统定义学生成绩数据结构 使用@State进行状态管理，实现数据驱动的UI更新 通过List和ForEach实现高性能滚动列表 利用条件渲染和样式绑定为前三名添加视觉特效 实现总分计算、平均分处理和成绩排序逻辑 优化布局结构和用户体验细节 该组件可作为教育类应用的基础模块，具备良好的扩展性和复用性。文中提供的完
2026-07-06 06:52:04
369
原创 鸿蒙ArkUI 库存盘点表设计与实现 — 基于DataTable+TextInput的进销存应用实践
鸿蒙ArkUI库存盘点表实现方案 摘要：本文介绍基于鸿蒙ArkUI框架的移动端库存盘点表实现方案。采用DataTable+TextInput组合设计，通过Column+Row模拟表格布局，支持仓库人员在单屏内完成批量盘点操作。方案包含三层架构： 数据层：定义InventoryItem接口，包含商品编码、名称、账面数量、盘点数量及自动计算的差异值 UI层： 表头采用固定Row布局 数据行通过ForEach循环渲染InventoryRow组件 每行集成TextInput实现数量编辑 交互层：实时计算差异并着色显
2026-07-06 06:51:13
368
原创 鸿蒙ArkTS企业级员工排班计划表应用：从设计到实现全解析
本文介绍了基于鸿蒙ArkTS开发的员工排班计划表应用，重点解析了其技术实现方案。该应用采用Table表格为核心容器，结合横向滚动TableRow技术，实现了姓名与日期班次的联动展示。通过颜色编码机制（早班蓝、中班绿、晚班橙、休息灰）直观区分不同班次，并采用固定列+横向滚动的布局方式解决宽表格展示问题。应用采用三层数据模型架构（班次枚举、单日班次信息、员工实体）和MVVM设计模式，支持斑马纹、周末标识等可视化优化，为企业提供了一套轻量高效的数字化排班解决方案。
2026-07-06 06:50:22
397
原创 「财务管家」智能记账应用：HarmonyOS NEXT 页面布局设计与实现详解
「财务管家」智能记账应用：HarmonyOS NEXT 页面布局设计摘要 本文详细解析了基于HarmonyOS NEXT的智能记账应用UI设计实现，核心内容包括： 技术架构： 采用ArkTS语言+ArkUI框架开发 使用Stage模型和声明式UI编程范式 基于组件化设计（@Component装饰器） 页面布局： 整体采用纵向Column布局 顶部标题栏采用Row+Column嵌套结构 功能卡片网格系统（2×3排列） Tab导航切换收支明细与功能导览视图 关键技术： @Builder构建可复用的UI组件 响应
2026-07-05 22:37:13
356
原创 鸿蒙 ArkUI 数据可视化图例对照表：组件化设计与实现
本文介绍了基于鸿蒙ArkUI的数据可视化图例组件化设计与实现方案。针对HarmonyOS NEXT移除了Table组件的情况，提出使用Row+Column弹性布局替代传统表格布局，构建可复用的图例组件库。文章详细讲解了核心组件实现，包括颜色标识(ColorSwatch)、表格单元格(LegendCell)、表格行(LegendTableRow)和区块标题(SectionTitle)，并提供了离散型和连续型图例的具体实现方法。方案采用ArkTS声明式UI框架，通过layoutWeight实现弹性布局，优化了性
2026-07-05 22:26:08
304
原创 鸿蒙 ArkTS 投屏设备发现列表 DataTable 布局实现详解
本文详细介绍了在鸿蒙ArkTS中实现投屏设备发现列表DataTable布局的完整方案。主要内容包括： 项目背景与技术栈：基于鸿蒙ArkTS和ArkUI框架，使用DevEco Studio开发投屏设备发现功能。 核心设计思路： 采用DataTable布局展示设备信息，提高信息密度和对比效率 定义DeviceType和DeviceStatus枚举确保类型安全 设计DeviceInfo接口规范数据结构 关键实现细节： 构建包含标题栏、搜索区、数据表格、状态栏的完整组件树 使用@State管理设备数据和UI状态 实
2026-06-29 09:53:11
383
原创 鸿蒙 ArkUI 数据采集表格组件实现详解：DataTable 行内编辑、增删行与批量提交
摘要：本文基于HarmonyOS ArkUI框架，详细解析了DataTable风格的数据采集页面的实现方案。通过ArkTS语言构建包含行内编辑、动态增删与批量提交功能的企业级表单，关键技术点包括： 数据结构设计：采用接口定义行数据模型，利用@State实现响应式状态管理 表格布局：组合Row+Column构建网格结构，支持横向滚动 交互实现： TextInput双向绑定实现行内编辑 动态行管理（增删行逻辑） 数据校验与批量提交弹窗 工程实践：包含路由配置、组件生命周期管理及样式优化技巧 完整代码约200行，
2026-06-29 09:46:32
479
原创 鸿蒙 ArkTS 响应式布局实战——基于屏幕宽度的动态 Padding 与 Margin 实现详解
文章摘要： 本文详细介绍了在鸿蒙 ArkTS 中实现响应式布局的动态 Padding 与 Margin 技术方案。通过对比 Flutter 的 MediaQuery 与鸿蒙 display API，解析了状态驱动响应式更新的核心机制。文章以 MyApplication59 项目为背景，提出采用 display API + @State 的最优方案，并重点讲解了屏幕变化事件的监听与资源管理方法。该实现能在折叠屏展开、屏幕旋转等场景下自动调整边距，确保跨设备一致体验。技术方案具有低实现成本、高组合能力的特点，适
2026-06-28 11:17:31
341
原创 HarmonyOS ArkUI 自定义 Breakpoint 断点布局系统深度解析
HarmonyOS ArkUI 自定义 Breakpoint 断点布局系统解析 本文深入探讨了HarmonyOS ArkUI框架下的响应式布局实现方案。针对企业级应用多设备适配需求，提出了一套完整的三层断点布局系统： 架构设计：采用四层架构（入口层、断点管理层、布局路由层和布局实现层），通过单文件内联方式确保预览器兼容性 核心技术： 基于onAreaChange事件实现容器级尺寸感知 采用600vp/1024vp作为断点阈值 使用@Builder方法实现条件渲染 遵循单向数据流状态管理 性能优化：O(1)复
2026-06-28 10:34:40
208
原创 HarmonyOS 响应式网格布局深度实践：从 Flutter LayoutBuilder 思想到 ArkUI GridRow 落地
本文介绍了在HarmonyOS ArkUI框架中实现响应式网格布局的三种技术方案，重点推荐采用GridRow + GridCol + Breakpoints的组合方案。文章从Flutter开发者的角度切入，对比不同方案的优缺点，详细解析了GridRow组件的核心属性和工作原理，并通过商品列表页面的实际案例，展示了如何根据屏幕宽度动态调整布局（2列/3列/4列）。方案二凭借声明式API、类型安全和性能优势成为最优选择，适合需要适配多种设备形态的HarmonyOS应用开发。
2026-06-27 18:47:12
227
原创 鸿蒙 ArkUI 自适应图片容器深度实践：从 Flutter LayoutBuilder / FittedBox / InteractiveViewer 到 ArkUI 的技术映射与工程实现
鸿蒙 ArkUI 自适应图片容器深度实践 摘要 本文详细阐述了如何在鸿蒙 ArkUI 框架中实现 Flutter 三大核心布局组件（LayoutBuilder、FittedBox、InteractiveViewer）的功能等价方案。通过构建一个完整的图片浏览器应用，展示了ArkUI的响应式布局、图片适配和手势交互能力。 核心技术点： 使用Grid+layoutWeight+百分比尺寸实现LayoutBuilder的响应式布局 通过Image.objectFit(ImageFit)实现FittedBox的Bo
2026-06-27 18:46:32
285
原创 鸿蒙 ArkUI 自适应底部面板实战：从 Flutter DraggableScrollableSheet 到 HarmonyOS bindSheet
鸿蒙 ArkUI 自适应底部面板开发指南 本文介绍了如何将 Flutter 的 DraggableScrollableSheet 实现思路迁移到 HarmonyOS 的 ArkUI 框架中，创建一个自适应的底部面板组件。主要内容包括： 核心概念映射：对比 Flutter 和 ArkUI 在布局、状态管理等方面的等效实现方案 关键技术点： 使用 bindSheet API 管理面板生命周期 通过 display.getDefaultDisplaySync 获取屏幕信息 利用 SheetOptions.dete
2026-06-26 10:09:10
499
原创 鸿蒙 ArkUI 设备像素比 (DPR) 适配深度实践 —— 利用 MediaQuery.devicePixelRatio 精确控制边线宽度与 UI 精度
本文探讨了鸿蒙ArkUI中设备像素比(DPR)适配的核心问题与实践方案。文章首先分析了逻辑像素(vp)、物理像素(px)与设备像素比的关系，指出不同DPR设备下固定vp值会导致边线宽度等UI元素显示不一致的问题。针对这一问题，作者提出了基于MediaQuery.devicePixelRatio的解决方案，通过PixelRatioUtil工具类实现物理像素与逻辑像素的精确换算。该方案特别适用于边线、分割线等需要像素级精度的场景，能有效保证UI在不同DPR设备上的视觉一致性。文章还提供了完整的工具类实现代码，可
2026-06-26 10:04:51
455
原创 鸿蒙 ArkUI 中的 Flutter 布局技术应用：SizedBox 固定尺寸占位容器深度解析
鸿蒙 ArkUI 中的 Flutter 布局技术应用：SizedBox 固定尺寸占位容器 本文介绍了如何在鸿蒙 ArkUI 框架中实现类似 Flutter SizedBox 的固定尺寸占位容器组件。通过分析移动端布局常见问题和 Flutter SizedBox 的设计理念，提出了 ArkUI 中的实现方案。 核心实现要点： 使用 @Component 创建自定义组件 通过 @Prop 接收尺寸参数 采用 @BuilderParam 实现内容插槽 内置默认占位 UI 使用 Stack 作为根容器 代码特点：
2026-06-25 17:57:05
394
原创 鸿蒙 ArkUI 混合卡片列表布局技术解析：SizedBox 固定高度 + IntrinsicHeight 内容自适应
鸿蒙 ArkUI 混合卡片列表布局技术指南 本文深入解析鸿蒙 ArkUI 框架下如何实现混合高度信息流列表布局，重点探讨两种关键组件技术的配合使用： SizedBox 固定高度容器 - 用于创建视觉规整的卡片，通过 .height() 方法设置固定尺寸约束 IntrinsicHeight 内容自适应容器 - 通过不设高度约束让卡片自然撑开，实现灵活内容展示 文章从移动端信息流设计的三种高度模式（固定/自适应/混合）出发，分析混合模式的用户体验优势，并通过具体代码示例展示在 ArkUI 中的实现方案： 使用
2026-06-25 17:51:42
399
原创 鸿蒙 ArkUI 表单布局实践：Column + SizedBox 统一间距模式在 API 24 下的完整实现
鸿蒙 ArkUI 表单布局实践：Column + SizedBox 统一间距模式 本文详细介绍了如何在鸿蒙 ArkUI 框架下实现 Flutter 风格的 Column + SizedBox(height:16) 表单布局模式，主要包含以下内容： 设计背景：解析 Flutter 中通过 Column 和 SizedBox 实现统一间距的设计原理和优势 ArkUI 布局基础：介绍 ArkUI 的 Column 组件及四种实现固定间距的替代方案： Blank 组件 空 Row 组件（推荐） Divider 组件
2026-06-24 14:37:44
229
原创 鸿蒙 ArkTS 精确对齐布局实战：Row + SizedBox(width:120) + Expanded（API 24）
鸿蒙 ArkTS 表单精确对齐布局方案 摘要（150字） 本文介绍在鸿蒙 ArkTS 中实现 Flutter 经典表单布局方案 Row + SizedBox(width:120) + Expanded 的完整迁移方法。通过 Text().width(120) 固定标签宽度，TextInput().layoutWeight(1) 实现内容区自适应，确保表单标签右边缘精确对齐。方案包含完整的表单元素实现（文本输入、单选、多行文本、图片上传），采用 Scroll + Column 的滚动布局，并添加卡片阴影、分割
2026-06-24 14:31:16
406
原创 鸿蒙ArkUI多卡片等距排列布局技术详解
本文详细介绍了鸿蒙ArkUI实现多卡片等距排列布局的技术方案。文章首先对比了Flutter与ArkUI的布局组件对应关系，重点解析了核心布局思想，包括统一边距、卡片间距控制和懒加载优化。在项目环境准备方面，明确了开发环境要求和项目结构。核心代码实现部分展示了主页面布局的完整示例，通过List+ForEach构建懒加载列表，使用Column模拟卡片样式，并详细解析了数据层、布局结构和卡片样式的实现要点。该方案适用于API Level 24版本，为开发者提供了一种高效实现美观卡片列表的ArkUI解决方案。
2026-06-23 17:00:01
260
原创 HarmonyOS ArkTS 圆形布局实战：从 Flutter CustomMultiChildLayout 到 Stack + Position 的完整迁移指南
文章摘要： 本文详细介绍了如何在HarmonyOS ArkTS API 24中实现圆形布局的完整方案。作者首先回顾了Flutter中使用CustomMultiChildLayout实现圆形布局的方法，分析了其"测量-计算-放置"三阶段核心逻辑。针对ArkTS API 24缺少专用布局容器的问题，提出基于Stack+position()+三角函数的替代方案，深入讲解了圆形布局的数学原理，包括参数方程、均匀分布计算和尺寸补偿等关键技术点。文章提供了完整的TypeScript实现代码，展示了如何通过ForEach
2026-06-23 16:30:34
221
原创 ArkUI 自定义布局实战：固定行数自动换行溢出省略组件设计与实现
本文介绍了在HarmonyOS ArkUI中实现固定行数自动换行溢出省略组件的设计思路与实现方案。通过借鉴Flutter的CustomMultiChildLayout设计思想，结合ArkUI的Flex布局、.onAreaChange()回调等特性，提出了三种实现策略： FixedLineTagLayout：适用于独立标签式布局，支持复杂子项样式 FixedLineRichText：针对富文本段落布局优化，保持文本样式一致性 FixedLineText：纯文本简版方案，性能最优 文章详细分析了各方案的适用场景
2026-06-22 17:20:51
237
原创 ArkUI（API 24）自定义百分比坐标锚点定位深度解析
本文深入解析HarmonyOS ArkUI（API 24）中实现类似Flutter CustomSingleChildLayout的自定义百分比坐标锚点定位方法。通过组合使用Stack、position()和translate()三大API，开发者可以将子元素精准定位到父容器的任意百分比坐标位置，并以子元素自身的特定点作为锚点。文章从ArkUI布局体系的设计哲学出发，详细剖析了核心API的工作原理、参数语义和百分比计算基准，并提供了从Flutter迁移到HarmonyOS的完整实现方案。全文约10000字，
2026-06-22 17:18:34
427
原创 鸿蒙 ArkUI 可伸缩侧边导航栏布局技术详解 —— 基于 AnimatedContainer 的管理后台实践
本文介绍了基于鸿蒙ArkUI框架实现可伸缩侧边导航栏的详细技术方案。文章从实际需求出发，分析了传统固定侧边栏和叠加式侧边栏的优缺点，提出了采用AnimatedContainer组件实现动态伸缩的解决方案。核心内容包括： 功能需求分析：明确了侧边栏展开/收缩状态下的宽度要求(200dp/60dp)、导航菜单项结构以及平滑动画过渡等关键指标。 技术选型对比：对比了ArkUI中多种动画实现方案，最终选择@State状态驱动结合.animation()属性绑定的方式，兼顾开发效率和动画表现。 布局结构设计：采用Ro
2026-06-18 10:33:40
325
原创 鸿蒙 ArkUI 隐式动画实战：用 Switch 切换驱动容器尺寸与颜色自动补间
本文介绍了如何在鸿蒙ArkUI框架中使用隐式动画实现类似Flutter中AnimatedContainer的补间动画效果。通过Switch开关触发容器尺寸和颜色的平滑过渡，详细讲解了ArkUI的隐式动画机制、.animation()修饰符的使用方法、状态管理与动画联动的实现方式。文章还对比了ArkUI与Flutter在动画实现上的异同，分析了ArkUI动画体系的三大类型（隐式动画、显式动画和转场动画），并提供了性能优化建议和最佳实践。最后，通过完整的代码示例演示了如何实现Switch切换时容器宽高和背景色的
2026-06-18 10:19:47
373
原创 鸿蒙 ArkTS 实现 Flutter 式 AnimatedSize：通知消息高度动画的深度实践
鸿蒙 ArkTS 实现 Flutter 式 AnimatedSize 动画组件 摘要 本文详细介绍了在鸿蒙 ArkTS 框架中实现类似 Flutter AnimatedSize 动画组件的完整过程。通过分析 Flutter 与 ArkTS 的动画系统差异，设计了一个支持高度动态动画的 AnimatedSizeWrap 组件，经历了三次关键迭代： 基础版本：使用 @State 驱动高度变化，结合 .animation() 实现简单的高度动画 优化版本：解决初始状态同步问题，引入 @Watch 和 aboutT
2026-06-17 10:54:26
205
原创 鸿蒙 ArkUI 多属性同步动画卡片深度解析：从 AnimatedContainer 思想到 ArkTS 实践
鸿蒙 ArkUI 多属性同步动画卡片深度解析 摘要 本文通过一个动画卡片项目，详细解析了如何在鸿蒙 ArkUI 中使用隐式动画实现多属性同步动画效果。文章首先介绍了 ArkUI 的动画体系设计哲学，对比了 Flutter 的 AnimatedContainer 实现思路。然后深入分析了项目架构设计，包括组件层级、状态管理机制和颜色循环算法。 核心内容聚焦 ArkUI 隐式动画的实现原理，通过 animation() API 实现宽高、圆角、阴影和背景色等属性的同步动画效果。文章详细拆解了动画卡片组件的关键代
2026-06-17 09:41:49
251
原创 鸿蒙 ArkUI 多选列表实现详解：从 Flutter CheckboxListTile 到 HarmonyOS 的完整迁移指南
本文详细介绍了如何将 Flutter 的多选列表功能迁移到鸿蒙 ArkUI 框架。主要内容包括： 背景对比：分析了 Flutter 和 ArkUI 在设计哲学上的异同，强调两者在声明式 UI 和状态管理上的相似性 核心实现： 使用 ArkTS 的 interface 定义商品数据结构 通过 @State 装饰器实现响应式状态管理 采用不可变数组模式触发 UI 更新 使用 List+ForEach+ListItem构建高效列表 技术要点： 状态管理机制对比（ArkUI vs Flutter） 组件映射关系（如
2026-06-16 15:22:14
377
原创 【共创季稿事节】鸿蒙原生ArkTS布局方式之ColumnStart垂直排列
鸿蒙ArkTS布局之Column垂直排列解析 本文深入探讨鸿蒙原生ArkTS中的Column组件垂直布局方式。文章首先对比声明式UI与传统命令式UI的区别，强调ArkUI框架通过build()方法描述界面结构的优势。随后系统介绍ArkUI四大核心布局容器(Column/Row/Stack/Flex)，重点分析Column组件的垂直排列特性。 Column作为垂直布局容器具有三大默认行为：自上而下排列、水平方向拉伸、高度由内容决定。文章详细解析了justifyContent和alignItems属性，前者控制
2026-06-16 11:54:44
481
原创 鸿蒙原生ArkTS布局方式之ColumnStart垂直排列
本文介绍了鸿蒙原生应用开发中基于ArkTS的自定义弹窗实现方案，重点解析了@CustomDialog、@State和CustomDialogController三大核心技术。通过@CustomDialog装饰器可实现完全自定义的弹窗UI，配合@State实现弹窗内部状态管理，利用CustomDialogController控制弹窗生命周期。文章详细讲解了技术原理、配置参数和适用场景，并提供了包含确认弹窗和信息弹窗的示例应用架构，适用于输入反馈、选择确认、表单填写等交互场景，帮助开发者掌握鸿蒙NEXT平台下状
2026-06-15 16:20:36
389
1
原创 # HarmonyOS NEXT 原生 ArkTS 布局实战：Clip + RoundRect 圆角裁剪深度解析
本文深入解析了HarmonyOS NEXT中ArkTS布局的圆角裁剪技术，重点介绍了三种实现方案：borderRadius+clip(true)、clipShape+Rect和Path自定义路径。通过底层渲染原理分析和技术对比，文章指出borderRadius+clip(true)是最灵活推荐的方案，支持四角独立半径和子元素溢出裁剪。实战部分包含完整项目架构、路由配置和核心代码解析，并提供了入口页面的实现示例，帮助开发者掌握鸿蒙原生UI的圆角裁剪技术要点。
2026-06-15 15:50:53
477
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人