登录社区云,与社区用户共同成长
邀请您加入社区
在鸿蒙复杂业务开发中需要粘性事件的场景层出不穷,这个工具类代码量不大,但很好地弥补了官方emitter无法应对后置消费和生命周期安全解绑的短板,在开发过程中提供了很大帮助。平时你在开发过程中还有哪些让人烦恼而又避不开的小痛点呢?欢迎留言交流。
App 17 首页解析完毕。沉浸式红色 HeroCard + 可点击周图 + 横向分类 + 标签+进度条项目卡是四大亮点,配合红色志愿服务调性。与 App 13 的"主题复刻"展示了一个重要方法论:同一套 UI 框架,换主题色 + 换文案 + 换数据 = 完全不同的产品。
维度App 13 歌单记录App 17 志愿记录主题色紫 #8B5CF6红 #EF4444Tab 状态全部/进行中/已完成全部/进行中/已完成统计14/3/2(彩)28/3/25(彩)记录5 条(项目一~五)5 条(项目一~五,完全同构状态操作详情+更多详情+更多进度条进行中显进行中显状态色warn/okwarn/ok(同款)App 17 与 App 13 几乎 100% 同构。
App 17 活动创建页解析完毕。与 App 13 的"模板换肤"关系一套 UI 框架 + 一套 Theme.ets 配色 = 任意主题的应用。"红色志愿"主题色让 6 个表单组件焕发公益热情——C.primary红色在按钮/选中态/进度条/链接文字上反复出现,让"志愿"主题深入骨髓。"表单校验"和"Toggle 持久化"是 demo 到产品的关键差距——读者在抄这个模板时记得补齐。
回顾系列 5 个"个人中心"(App 13/14/15/16/17),6 个 @Builder 块完全同源维度App 13App 14App 15App 16App 17主题色紫绿绿玫红红用户小明张运动李环保王积分小明等级Lv.4Lv.5Lv.6Lv.7Lv.4经验74%64%62%57%74%签到伪+10+5+20伪统计通用运动环保商城通用成就6 通用6 运动6 环保6 商城6 通用菜单5666
App 16「校园积分商城」首页(HomeTab),主题色#F43F5E玫瑰红,4 个 Tab 分别为首页(🛍️)、商品(🎁)、兑换(🔄)、我的(👤)。首页采用固定 Header + 玫瑰红渐变 HeroCard(限时抽奖 + 3 栏积分统计 + 搜索框)+ 快捷功能入口(实物/虚拟/秒杀/抽奖)+ 本周积分获取条形图 + 5 个热门商品卡片()+ 兑换排行榜。本篇基于(约 333 行)逐
App 16「校园积分商城」我的 Tab(ProfileTab),是个人中心页。整页用渐变用户卡片(王积分 + Lv.7 + 2860/5000 经验条 +本篇基于(约 312 行)逐段拆解,附 4 张实机截图。
App 16「校园积分商城」商品 Tab(Func1Tab),是——渐变兑换预览卡()+ 6 商品 3 列 Grid(单选高亮)+ 数量加减器(1-10)+ 地址单选(宿舍/教学楼/自取,含默认标识)+ 收件信息表单 + 确认兑换按钮(本篇基于(约 268 行)逐段拆解,附 4 张实机截图。
维度App 14 运动预约首页App 15 垃圾分类首页主题色绿 #16A34A绿 #22C55EHero 活动校运动会报名本月减碳种树快捷入口4 个运动(同色)4 个分类(四色)主列表场地(星级+进度+预约)指南(星级+掌握度+学习/测试)排行榜场地预约排行垃圾识别排行特色机制预约进度条四色编码 + 学习测试闭环同一套"内容流首页"模板,第三次复用(App 13 音乐/14 运动/15 环保),
维度App 14 预约App 15 分类App 16 兑换Tab待确认/已完成/已取消已分类/待处理/错误待发货/已发货/已完成特色模块无占比进度条消耗趋势图记录字段场地+时间分类+数量数量+积分+地址状态1操作取消/详情✓正确取消/改址状态2操作再次预约立即分类查看物流状态3操作无重新分类(红)再次兑换"记录列表模板"第 3 次复用(App 14/15/16),每次的差异化:App 15 加"占
SearchCard(渐变搜索 + 拍照/语音入口)+CategorySelector(四色分类 2 列 Grid)+PreviewCard(结果预览联动)+QuickTemplateRow(常见垃圾 3 列 Grid)+FormCard(备注 + 来源)+SubmitBtn(分类校验提交)核心可复用点doSearch()搜索模式(空输入拦截 → 遍历匹配 → 命中联动 → 未命中降级)名称→id
维度App 14 运动我的App 15 环保我的布局6 块同构6 块同构签到+10 积分+5 积分成就运动 6 徽章环保 6 徽章菜单6 项6 项(数字3/NEW)周图运动时长 7.5h分类次数 47 次About运动预约 v1.0.0垃圾分类 v1.0.0两页 95% 代码相同,差异只在数据一个"绿色个人中心"模板,换数据源即可生成任意主题的个人页。
App 15「智能垃圾分类」分类 Tab(Func2Tab),是分类历史记录页。整页用 Header + 4 个胶囊筛选 Tab(全部/已分类/待处理/错误分类)+ 3 栏统计概览 +(可回收 30% 蓝/厨余 48% 绿/有害 12% 红/其他 10% 灰)+ 6 条记录时间线(:待处理→立即分类、错误分类→重新分类、已分类→✓ 已正确分类)组成。本篇基于(约 248 行)逐段拆解,附 4 张实
固定 Header(品牌区:标题 + Slogan)Scroll(HeroCard(活动 Banner + 3 栏统计 + 搜索框)+QuickActionRow(4 个圆形入口)+WeeklyChart(趋势条形图 + 平均值)+SectionTitle('运动场地') + VenueList(5 个场地卡片)+SectionTitle('热门排行') + RankList(3 条排行)这套骨架
App 13「音乐歌单」首页(HomeTab),主题色#8B5CF6紫色,4 个 Tab 分别为首页(🎧)、歌曲(🎵)、歌单(📋)、我的(👤)。首页采用沉浸式渐变 HeroCard + 三栏数字统计 + 快捷功能入口 + 本周数据条形图(点击切换高亮)+ 横向分类筛选 + 推荐列表(带 HOT/NEW/精选标签和进度条)。本篇基于源码(约 194 行)逐段拆解,附 4 张实机截图。
把状态栏文字色设成深色#1C2333,而首页从上到下是"白 Header → 玫红 HeroCard → 白卡片流"的交替底色。状态栏文字位于 Header 白色区域上方(Header 的safeToppadding 把标题推到状态栏下方),深色文字在白色背景上清晰可见;HeroCard 的玫红渐变则因safeTop补偿而与状态栏文字互不重叠。这种"状态栏文字统一深色 + 顶部用白色 Header
首页数据量不小,作者把零散字段收敛成 6 个interface,这是 ArkTS 声明式开发中非常值得借鉴的做法。id: number;id: number;Express描述一条快递动态,字段覆盖了"谁发的、什么单号、什么公司、什么时间、什么状态、用户打几星、运输进度多少"——一个列表项要呈现的所有维度,一次性建模干净。StatItem用三件套概括了 HeroCard 里的三组统计,color字
/ 周数据定义{ day: '一', value: 45 },{ day: '二', value: 72 },{ day: '三', value: 38 },{ day: '四', value: 90 },{ day: '五', value: 55 },{ day: '六', value: 68 },{ day: '日', value: 42 }maxBar固定为 90(本周峰值),作为柱高归一化
HeroCard 内联分隔线+ 1vp 宽半透明 Column 实现仪表盘式统计区可交互式柱状图驱动渐变/字色/字重三重联动,默认选中周五(idx 4)CategoryBar 横向 Scroll:选中态反色 + 自动隐藏滚动条可交互式柱状图最具学习价值——@State与视觉效果的深度绑定。
StatsCard 内联 Divider分隔统计列,数值按语义着色(primary/warn/ok)TabBar 下划线指示器:选中态 24×2 主色圆角条,未选中 transparent 占位防抖动RecordCard if 条件渲染:进行中显示进度条,已完成省略状态标签内联:白字 + statusColor 实底胶囊,颜色由数据字段驱动固定头部 + 独立滚动区:Header/StatsCard
渐变用户卡 + Stack 等级角标:linearGradient 直设外层 Column,BottomEnd 对齐角标负 Margin(-28) 重叠统计卡:白色卡片浮于渐变之上,四色数值语义化Row 六等分成就墙:opacity + 背景色双重区分解锁/锁定,filter 实时计数MenuList 内联渲染 + NEW 角标:badge 字段驱动角标显隐与配色分割线 margin 左缩进 +
组件技术亮点复杂度HeroCard内联分隔线统计 + 双色渐变⭐⭐⭐Emoji 图标 + 边框卡片⭐⭐可交互式渐变柱状图⭐⭐⭐⭐⭐水平 Scroll + 反色描边⭐⭐⭐ItemListStack 进度条 + 条件标签⭐⭐⭐⭐可交互式柱状图最具学习价值。
组件技术要点复杂度HeroCard两段式渐变 + TextInput 内嵌搜索栏⭐⭐⭐WeekChart纯 ArkUI 柱状图(无第三方库)⭐⭐⭐⭐ChipRowScroll 横向滚动标签 + 浅绿选中态⭐⭐⭐ShopList9 字段信息 + 双 Progress 进度条 + 双按钮⭐⭐⭐⭐RankCard前三名奖牌配色 + 内联 Progress 进度条⭐⭐⭐纯代码柱状图和多维度商家卡片。
组件技术要点复杂度UserCard通栏渐变 + Stack头像Lv角标 + 白色经验条 + 玻璃拟态按钮⭐⭐⭐⭐⭐StatRow四维彩色统计 + 竖向Divider + 负Margin浮动⭐⭐⭐⭐纯ArkUI柱状图 + Math.max保底高度 + 周六高亮⭐⭐⭐徽章网格 + opacity锁定态 + 动态进度计算⭐⭐⭐⭐MenuList三段式菜单 + 条件Divider + badge角标⭐⭐⭐
鸿蒙的多媒体能力覆盖图片、相机、音视频全链路。Image 负责展示与处理(圆角/模糊/裁剪),photoAccessHelper 负责选图与存库,CameraKit 负责相机采集,MediaKit 的 AVPlayer/AVRecorder 负责播放与录制。权限先声明再申请、媒体对象按状态机流转、资源用完 release。掌握这些,你能做出带图、带声、带影像的富媒体应用。
传统移动操作系统围绕"单设备"设计,而鸿蒙的核心主张是分布式软总线——把手机、平板、手表、智慧屏、车机等设备虚拟成一个"超级终端",应用可以跨设备调用硬件能力、迁移状态、协同计算。对开发者而言,这意味着一次开发,多端部署(一多)。ArkTS 是鸿蒙上的应用开发语言,它在 TypeScript 的基础上做了强化与约束保持 TypeScript 的类型系统,但开启更严格的类型检查(禁用any、强制类型
本文摘要: 本文系统整理了移动开发领域(iOS、鸿蒙、Flutter、Android)的核心面试知识点,涵盖UI生命周期、内存管理、多线程、网络通信、架构设计、算法及性能优化等关键内容。 iOS面经:重点解析ARC/MRC机制、GCD线程管理、SwiftUI状态管理及HTTPS通信流程。 鸿蒙面经:深入探讨ArkUI状态管理、组件生命周期、跨组件通信及分布式能力。 Flutter面经:剖析Widg
通过定制化的Embedder层,Flutter成功地在OpenHarmony上“安家落户”。这套方案本质上是在两个优秀的系统之间搭建了一座高效的数据桥梁,让Flutter的自绘引擎能驱动鸿蒙的屏幕,也让Dart代码能调用鸿蒙的分布式能力。回顾一下核心技术点桥梁是Embedder:它负责处理原生窗口、输入事件和平台通信,是适配工作的核心。渲染两条路:追求极致性能用直接渲染,保证广泛兼容用纹理混合。通
这篇文章详细介绍了把插件适配到鸿蒙平台的整个过程,从原理分析、环境配置、ArkTS 原生代码实现、Dart 层封装,到性能安全和测试验证,算是走通了一个全链路。适配的核心在于理解 Flutter 插件架构的抽象层,然后在新的原生平台上实现它约定好的接口和行为。这套方法其实可以推广到大多数基于的 Flutter 插件的鸿蒙适配工作上。随着 OpenHarmony 生态的壮大和 Flutter 官方支
通过上面这些步骤,我们基本上把share_plus的核心功能搬到了 OpenHarmony 上。整个过程不仅涉及代码适配,更需要理解两边平台的设计思路——Flutter 的通道机制和鸿蒙的 Want 模型。简单回顾一下关键点:结构要清晰:独立插件方案,不和原插件耦合,以后好维护。原理得吃透:明白 Flutter 怎么和原生通信,鸿蒙分享怎么工作,适配起来才不盲目。代码要健壮:参数校验、异常处理、资
本文详细介绍了HarmonyOS中Swiper轮播图组件的实现方法。Swiper组件支持水平/垂直滑动、自动播放、循环播放等功能,并可通过属性配置自定义切换动画、指示器样式等。教程展示了基于网络图片的基础轮播图实现代码,强调需添加网络权限,并提供了常用属性配置示例。文章还总结了ArkUI框架在轮播图开发中的优势,帮助开发者快速掌握这一常见UI组件的实现技巧。最后作者分享了多个Android开发实战
通过上述对比可以看出,虽然Java与ArkTS在方法重载和数值类型的处理上有所不同,但都可以通过合理的编程实践达到类似的效果。而对于数值类型,尽管Java提供了BigInteger来处理非常大的数字,而ArkTS则使用BigInt类型来保证大整数的精度。此外,对于字节数组的处理,Java使用byte[],而ArkTS使用Uint8Array和Int8Array来区分有符号和无符号的数据。本篇技术文
本文介绍了如何使用Swiper组件实现App启动页的左右滑动效果。Swiper作为容器组件,支持轮播显示多个子组件,可通过loop属性控制是否循环播放(autoPlay属性可设置自动轮播)。文章提供了华为官方文档链接,详细说明了Swiper的布局约束、循环播放和自动轮播功能,并给出三种示例代码(循环/非循环/自动轮播)。最后通过一个完整案例SwiperPage.ets,演示了包含图片和"
OpenHarmony有Gitee源码仓库:https://gitee.com/openharmony ,但是和其它简单的Git仓库不一样,它不是通过 git clone xxx 一个命令就能下载全量代码的,而是和安卓类似,需要用到manifest这个顶层仓库,并且通过repo工具把很多个Git仓库的特定版本拉到本地同一个目录。bash build/prebuilts_download.sh 安装