- 博客(28)
- 收藏
- 关注
RSS订阅原创 鸿蒙 ArkTS 月历签到网格组件设计与实现详解
本文详细介绍了基于鸿蒙ArkTS的月历签到网格组件设计与实现。该组件采用Grid网格布局实现7列月历展示，通过三色方案区分签到状态（已签/补签/未签），并支持月份切换、今日高亮、点击交互等功能。文章从需求分析、技术选型（选择Grid而非Flex布局）、核心代码实现（包括空白日期处理、状态管理）到无障碍设计等方面进行了全面解析，重点阐述了ArkTS声明式UI开发的优势，如状态驱动渲染、强类型约束等特性。该方案具有代码简洁、性能高效的特点，为鸿蒙应用开发提供了实用的签到功能实现参考。
2026-07-05 22:24:23
295
原创 鸿蒙ArkUI体检报告指标对照表 —— 从数据建模到布局实现的全链路实践
六、关键实现代码解析 6.1 主页面架构（Index.ets） @Component struct Index { private checkItems: CheckupData[] = SAMPLE_ITEMS; build() { Column() { this.buildHeader() this.buildReportSummary() this.buildDataTable() this.buildLegend() } .width('100%') .height('100%') .backgro
2026-07-05 22:22:20
418
原创 鸿蒙 ArkUI 分页账单明细表：从零到一构建企业级财务数据展示组件
本文介绍了基于鸿蒙ArkUI框架开发的企业级分页账单明细表组件。该组件采用ArkTS语言编写，运行于HarmonyOS 6.1.1平台，主要面向财务管理和订单管理场景，实现了87条数据的分页展示（每页10条）。 项目采用分层架构设计，包含数据模型层、UI组件层和页面入口层。核心组件PaginatedBillTable具备分页展示、智能页码生成、表格渲染等功能，支持金额状态着色、统计摘要等功能。组件内部通过计算属性和状态管理实现数据驱动视图，分页逻辑包含智能省略算法优化用户体验。 该方案完全基于原生ArkUI
2026-06-29 09:32:35
218
原创 鸿蒙 ArkUI 日历预约时间表：基于 Table 布局的时段预约系统设计与实现
鸿蒙 ArkUI 日历预约时间表摘要 本文介绍了一个基于鸿蒙 ArkUI 框架开发的日历预约时间表组件实现方案。该组件采用 Table 布局方式，通过 Column + Row 嵌套实现二维网格视图，展示一周七天不同时段的状态。主要特点包括： 三种状态可视化：使用绿色（可预约）、红色（已约满）、灰色（维护中）直观区分时段状态 周视图导航：支持上一周/下一周切换，自动计算日期范围 交互功能：点击可预约时段即时更新状态，底部信息栏实时反馈 动态数据：基于日期种子生成随机状态分布 响应式布局：适配不同屏幕尺寸，内
2026-06-29 09:30:49
417
原创 响应式字体在鸿蒙 ArkUI 中的实现方案
响应式字体在鸿蒙ArkUI中的实现方案 摘要：本文针对鸿蒙ArkUI开发中不同屏幕尺寸设备的字体适配问题，提出三种响应式字体实现方案。方案一采用连续缩放算法，基于屏幕宽度动态计算字号；方案二通过分档位查表法，为不同设备宽度匹配预设字号；方案三利用资源限定符实现零代码适配。文章详细分析了各方案的适用场景、实现细节及性能考量，提供了工具模块设计和实战排错经验，帮助开发者构建完整的响应式字体系统，确保文字内容在不同设备上均能呈现最佳阅读体验。（149字）
2026-06-28 11:12:57
348
原创 鸿蒙ArkTS响应式三栏布局实战：基于 `onAreaChange` 实现宽屏/中屏/窄屏自适应新闻阅读应用
本文介绍了基于鸿蒙ArkTS的响应式新闻阅读应用开发实践。项目采用onAreaChange监听容器宽度变化，实现三种布局自动切换：宽屏三栏（≥1200vp）、中屏两栏（840~1199vp）和窄屏一栏（<840vp）。文章详细解析了项目架构设计、数据模型定义、响应式布局核心机制，以及三种布局模式的实现方案。重点阐述了onAreaChange的工作原理、类型安全处理及性能优化策略，并与Flutter的LayoutBuilder进行了对比分析。该方案为鸿蒙应用的全场景适配提供了可复用的技术实现。
2026-06-28 11:07:36
184
原创 鸿蒙 ArkTS 响应式间距布局实战：MediaQuery 动态赋值 SizedBox/EdgeInsets 完整指南
鸿蒙 ArkTS 响应式间距布局指南 摘要 本文介绍鸿蒙 ArkTS 中实现响应式间距布局的完整方案。通过构建响应式断点系统（XS/SM/MD/LG/XL）和间距等级映射（gapXxs-gapXxl），配合 display.on('change') 监听屏幕变化，实现了类似 Flutter MediaQuery + SizedBox/EdgeInsets 的响应式布局能力。 核心内容包括： 设计响应式断点系统（360/600/840/1200vp 分界点） 创建间距等级映射表，不同断点对应不同间距值 使用
2026-06-27 18:46:37
244
原创 鸿蒙 ArkUI 响应式布局深度实践：从 Flutter LayoutBuilder 到 GridRow 断点系统的跨界实现
本文深入探讨了鸿蒙 ArkUI 中的响应式布局实现，重点对比了 Flutter 的 LayoutBuilder 与 ArkUI 的 GridRow 断点系统。通过一个图标+文字自适应导航栏的案例，详细解析了 GridRow 的构造参数、断点配置和事件回调机制。文章提供了完整的 ArkTS 代码实现，帮助开发者掌握鸿蒙响应式布局的核心技术，实现跨设备尺寸的自适应 UI 设计。
2026-06-27 18:45:47
234
原创 鸿蒙 ArkTS 容器尺寸监听与自适应布局实战：从 LayoutBuilder 到 onAreaChange
鸿蒙 ArkTS 容器自适应布局实战摘要（150字） 本文介绍鸿蒙 ArkTS 中实现容器尺寸监听与自适应布局的完整方案。通过 onAreaChange 回调替代 Flutter 的 LayoutBuilder，结合 @State 响应式状态管理，构建动态适应不同屏幕尺寸的 UI。核心内容包括： 容器监听：利用 onAreaChange 实时获取组件宽高变化 状态驱动：通过 @State 变量触发布局重绘 动态布局：基于尺寸阈值自动切换横竖排版 实战演示：可拖拽测试容器验证响应效果 性能优化：get 访问器
2026-06-26 09:39:21
408
原创 HarmonyOS ArkUI 屏幕适配实战：ScaleContainer 等比例缩放组件设计与实现（API 24）
HarmonyOS ArkUI 屏幕适配实战：ScaleContainer 等比例缩放组件设计与实现（API 24） 摘要 本文针对鸿蒙生态多设备屏幕适配需求，设计实现了一个ArkTS等比例缩放容器组件ScaleContainer。该组件支持三种缩放模式（Contain/Cover/Fill），开发者只需按照设计稿尺寸编写一套UI布局，组件即可自动计算缩放比例适配不同屏幕。文章详细解析了核心算法、组件架构设计以及API 24关键实现技术，包括@Prop数据绑定、onAreaChange尺寸监听、scale变
2026-06-26 09:34:51
440
原创 鸿蒙 ArkUI 层级缩进布局：Row + 定宽占位符实现树形/评论嵌套列表
本文介绍了在鸿蒙ArkUI中实现层级缩进布局的方案，通过Row组件结合定宽占位符Column模拟Flutter的SizedBox效果。文章详细解析了核心实现思路：使用Column().width(level × step)实现阶梯式缩进，将其封装为可复用的IndentSpacer组件，并应用于树形列表、评论嵌套等场景。方案包含数据模型设计、组件化实现、视觉增强和性能优化等内容，提供可直接投入生产的完整代码，适用于API 24+的ArkUI开发。相比传统padding方案，这种定宽占位方式具有更好的精确性、可
2026-06-25 18:09:33
397
原创 鸿蒙 ArkUI 弹性填充布局实战：Row + Text + Spacer + IconButton 模式详解
鸿蒙ArkUI弹性填充布局实战摘要 本文针对鸿蒙ArkUI中实现"标题靠左、操作按钮靠右"的常见布局场景，通过Row+Text+Blank+IconButton组合模式进行了深度解析。主要内容包括： 跨框架对比：建立Flutter与ArkUI的组件对应关系，如Spacer对应Blank()，帮助开发者快速迁移布局思维 核心布局模式： 使用Row容器作为基础布局 Text组件显示标题 Blank()实现弹性填充 Image/Toggle作为右侧操作按钮 Blank()特性： 自动占用剩余空间 支持多Blank
2026-06-25 18:06:36
357
原创 HarmonyOS 响应式间距组件设计与实践 —— 基于 ArkTS 的媒体查询驱动布局方案
本文介绍了一种基于鸿蒙ArkTS的响应式间距组件设计方案，通过媒体查询实现跨设备布局适配。文章首先分析了传统固定值和百分比间距方案的局限性，提出了基于屏幕断点的响应式间距理念。随后详细解析了HarmonyOS API24的断点系统设计依据及相关核心模块，比较了display与window模块的差异。最后重点阐述了ResponsiveSpacing组件的架构设计和关键实现逻辑，包括断点解析器、步进值查找器和刷新方法等核心功能模块。该方案借鉴了Flutter的MediaQuery思想，在鸿蒙平台上实现了根据屏幕
2026-06-24 14:51:19
237
原创 鸿蒙 ArkUI 三点式导航栏布局详解
本文介绍了如何在鸿蒙 ArkUI 框架中实现经典的三点式导航栏布局。通过使用 Row 容器结合 Blank() 弹性占位组件，可以精确控制左右两侧的间距，确保中间标题严格居中。这种布局模式适用于各种场景，如主页面导航、详情页标题栏等。文中详细解析了 Blank() 组件的工作原理，对比了 Flutter 的 Spacer 方案，并提供了完整的代码实现和布局计算说明。该方案遵循鸿蒙设计规范，采用 56vp 的标准导航栏高度，支持响应式交互，是构建生产级导航栏的推荐方案。
2026-06-24 14:49:26
239
原创 HarmonyOS ArkUI 自定义 3×3 行列不等高布局实战 —— 从 Flutter 到 ArkUI 的范式迁移
本文介绍了在HarmonyOS ArkUI框架下实现3×3不等高网格布局的两种技术方案：基于Grid组件的模板字符串方案和基于Stack的自定义布局算法方案。文章从Flutter的CustomMultiChildLayout方案切入，对比分析了ArkUI中的等效实现方式，重点阐述了两种方案的核心原理、代码实现、优缺点及适用场景。方案一利用Grid的rowsTemplate/columnsTemplate属性快速实现比例布局，代码简洁但灵活性有限；方案二通过自定义recalc算法和Stack定位实现更精细的控
2026-06-23 16:19:17
188
原创 HarmonyOS ArkUI 自定义跑道布局：CustomMultiChildLayout 模式深度实践
本文介绍了如何在HarmonyOS ArkUI中实现一个自定义跑道布局（Race Track Layout），通过Stack+@BuilderParam+数学计算的方式对标Flutter的CustomMultiChildLayout。文章详细阐述了跑道的几何数学原理（Stadium Shape参数化表示）、ArkUI的等效实现模式（将布局逻辑与渲染分离），以及架构设计思路（LayoutDelegate与组件的职责分工）。作者特别强调了API 24下ArkTS的语法限制及解决方案，最终实现了一个可复用、可测试
2026-06-23 16:12:41
233
原创 AI 修仙大法：当鸿蒙遇上修仙 —— 古风 AI 对话应用开发实战
本文介绍了一个名为"AI修仙大法"的古风AI对话应用开发项目，主要摘要如下： 项目创意：将AI助手包装成修仙老祖形象，用修仙术语回答日常问题，增加趣味性和文化内涵。 技术实现： 基于OpenHarmony 6.1.1和ArkTS开发 采用DeepSeek-V3作为AI模型 使用SSE流式响应实现逐字输出效果 兼容API 24版本 核心特点： 双层架构：外层是修仙术语，内层是实用建议 精心设计的古风UI界面，采用黑金配色 系统提示词确保AI维持修仙老祖人设 应用场景： 将现实问题映射为修仙概念（如把工作压力称
2026-06-22 11:10:52
373
原创 AI 万能手册：从零构建 HarmonyOS 智能对话应用
本文介绍了基于HarmonyOS SDK 24开发的"AI万能手册"智能对话应用。该应用采用ArkTS+DeepSeek API实现流式AI对话，具备八大领域智能问答能力。文章详细阐述了项目架构设计、UI组件实现、SSE流式响应处理等关键技术点，特别针对API 24的兼容性问题提供了解决方案。应用采用分层架构设计，包含UI表现层、业务逻辑层和网络服务层，实现了消息气泡、历史对话管理等核心功能，并支持优雅降级机制确保稳定性。技术亮点包括ArkUI声明式开发、网络请求处理以及针对API 24的适配方案。
2026-06-22 10:50:00
361
原创 从 Flutter 到鸿蒙 ArkUI：向心·离心发散布局动画的跨平台实现与设计哲学
本文探讨了跨平台实现向心·离心发散布局动画的技术方案，比较了Flutter和鸿蒙ArkUI框架的实现差异。文章首先分析了传统布局的局限性，建立了数学模型描述子组件从圆心到圆周的平滑过渡。Flutter采用CustomMultiChildLayout+AnimationController方案，将布局逻辑与动画分离；而ArkUI则通过Stack+@Builder+animateTo实现类似效果。文章详细解析了两者的架构映射关系，包括Flutter的LayoutDelegate与ArkUI的@Builder对应
2026-06-20 18:25:15
262
原创 鸿蒙ArkUI实现可拖拽浮动按钮：Stack布局 + PanGesture手势 + 自动吸附边缘技术详解
本文详细介绍了基于鸿蒙ArkUI框架实现可拖拽浮动按钮的技术方案。通过Stack布局叠加主内容与浮动按钮，结合PanGesture手势处理拖拽操作，并利用animateTo动画实现自动吸附边缘效果。文章重点分析了布局选型、数据流设计、状态管理以及核心功能实现，包括拖拽手势处理、边界约束算法和吸附动画效果。该方案采用声明式UI开发范式，具有代码简洁、性能高效的特点，适用于需要悬浮快捷操作的移动应用场景，为鸿蒙开发者提供了可复用的交互组件实现思路。
2026-06-18 11:05:05
405
原创 鸿蒙ArkTS列表滑动入场动画实现详解
鸿蒙ArkTS列表滑动入场动画实现详解 本文详细介绍了在鸿蒙ArkTS框架中实现列表项从右侧滑入的优雅入场动画。通过分析三种动画实现方案，最终采用onAppear+animateTo组合方案，确保动画稳定可靠。文章包含完整的代码实现，展示了如何构建带有渐变标题区和滑动动画列表的鸿蒙应用界面，每个列表项会按顺序延迟150毫秒从右侧滑入，同时伴随透明度变化，形成流畅的视觉效果。这种动画设计能显著提升用户体验，降低感知等待时间，增强应用品质感。
2026-06-18 10:53:42
210
原创 鸿蒙 ArkTS 多阶段交叉渐变动画布局：从 Flutter AnimatedCrossFade 到鸿蒙原生实现
本文探讨如何在鸿蒙ArkTS中实现类似Flutter AnimatedCrossFade的多阶段交叉渐变动画效果。文章首先分析Flutter AnimatedCrossFade的原理和特性，包括其自动管理子组件切换、可配置动画参数等核心功能。随后详细讲解ArkUI动画系统的三层架构（显式动画、隐式动画和过渡动画），并重点介绍如何使用Stack布局结合条件渲染和transition实现多阶段动画过渡。通过一个四阶段引导页的完整案例，展示了从产品设计到技术实现的全过程，包括核心代码剖析和性能优化建议。文章特别强
2026-06-17 13:51:30
423
原创 鸿蒙 ArkUI 弹性搜索栏：用属性动画实现 AnimatedContainer 风格的展开/收缩动画
本文介绍了在鸿蒙 ArkUI 中实现弹性搜索栏动画的方法，通过属性动画系统模拟 Flutter 的 AnimatedContainer 效果。主要内容包括： 实现效果：圆形搜索图标弹性展开为胶囊形输入框，带动画宽度变化和渐显效果 技术方案：利用 @State 状态变量驱动组件属性变化，配合 .animation() 修饰符实现平滑过渡 动画配置：设置不同属性的动画时长（550ms/400ms）和曲线（FastOutSlowIn） 代码结构：通过 toggleSearch() 函数集中管理状态切换，保持业务逻
2026-06-17 11:32:44
381
原创 异形列表（混合布局）在鸿蒙与Flutter中的技术实现与对比分析
本文对比分析了Flutter和HarmonyOS ArkTS在实现异形列表（混合布局）方面的技术方案。异形列表允许在同一列表中混合展示文字、图片、视频等多种卡片类型，是主流内容平台的核心技术。文章首先介绍了数据模型定义，比较了Flutter（Dart）和ArkTS在类型处理上的差异。随后详细阐述了Flutter基于ListView.builder的实现，包括类型分发机制、三种卡片的具体实现以及图片加载状态处理等关键技术。ArkTS部分则展示了如何使用List+ForEach构建混合列表。两种框架都采用数据驱
2026-06-16 11:50:01
223
原创 从ArkTS到Flutter：数字拼图游戏的跨平台融合开发实践
本文介绍了数字拼图游戏在ArkTS和Flutter双平台的开发实践，通过对比两种技术栈的实现差异，探索跨平台融合开发策略。文章首先回顾ArkTS版本的核心架构，包括基于Stack的棋盘布局、Fisher-Yates洗牌算法和逆序数校验逻辑。随后详细展示Flutter版本的完整实现，重点比较两者在状态管理（ArkTS装饰器 vs Flutter State类）、布局系统（Stack/Positioned）和事件处理等方面的异同。案例表明，尽管语法细节不同，两种框架在核心设计理念上高度一致，为技术融合提供了可行
2026-06-16 11:07:55
231
原创 鸿蒙原生ArkTS布局方式之ColumnStart垂直排列
本文以鸿蒙原生"心灵倾听师AI"应用为例，深入解析ArkTS中Column布局的核心原理与应用技巧。文章首先展示Column的基础语法与justifyContent、alignItems等核心属性，通过垂直排列实现三段式页面结构（顶部Header、中部聊天区、底部输入栏）。重点剖析layoutWeight实现弹性空间分配、垂直嵌套设计（如Header内部的装饰元素与标题排列），以及消息气泡的垂直结构。同时介绍Column与Scroll组件的配合使用，实现可滚动聊天列表，并对比分析Column与Stack、R
2026-06-15 17:49:38
560
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人