HarmonyOsNEXT【ArkUI超全解析】新手必看的方舟UI框架指南!
Harmony OS Next ##Ark Ts ##教育
本文适用于教育科普行业进行学习,有错误之处请指出我会修改。
🌼 基础认知三连击 🌼
1️⃣ UI是什么?
👉 就是你手机里每个页面的颜值担当!📱
✔️ 多页面独立管理 → 文件不打架
✔️ 路由API轻松跳转 → 页面秒切换
✨ 就像搭地铁换乘一样方便~
2️⃣ 组件是什么?
👉 UI界的乐高积木!🧩
✅ 基础款:按钮/文本/进度条
✅ 高级款:列表/网格/单选
💡 组合使用就能搭出专属界面!
3️⃣ 两大开发模式:
⠀⭕ 声明式开发(ArkTS)⠀⭕ 类Web开发(HML+CSS+JS)
⠀👇 超直观对比表👇
🌈【开发模式PK赛】🌈
声明式开发
类Web开发
上手难度
🚀 简单直白
🌐 需Web基础
性能表现
⚡ 闪电速度(省内存20%+)
🐢 传统渲染
发展趋势
🏆 官方主推
🛠️ 兼容支持
适合场景
✅ 全新项目
✅ Web应用改造
💡 为什么我们都Pick声明式?💡
1️⃣ 说人话的编程
👉 直接描述你想要的效果,不用管底层怎么画出来!
(就像对Siri说"我要喝咖啡"☕,不用教它怎么煮)
2️⃣ 性能开挂三连
✔️ 精简渲染链路 🚫 砍掉DOM管理
✔️ 内存占用更少 📉 运行更流畅
✔️ 动画效果丝滑 🎬 堪比电影级
3️⃣ 未来趋势预警
🚨 官方持续加料中 → 新功能优先支持
🎁 生态工具全家桶 → 开发效率翻倍
📋【选模式速查表】📋
✅ 选声明式当:
▪️ 开发新APP(特别是Stage模型)
▪️ 要做高端动效
▪️ 重视长期维护
✅ 选类Web当:
▪️ 改造现有Web应用
▪️ 需要兼容FA模型
▪️ 团队有Web开发老司机
💡 小贴士:
1 卡片开发两头甜 → 声明式/类Web都能玩
2 FA模型要小心 → 卡片只能用类Web
3 Stage模型是亲儿子 → 功能更新第一梯队
🎉【ArkTS代码魔法课堂】5分钟get组件变形术!✨
🌟 先看炫酷效果 🌟
👉 点击前:"Hello World" 👋
👉 点击后:"Hello ArkUI" 🚀
(脑补效果图:左边🤖机器人举手提问,右边🌈彩虹文字变身)
🌈【代码解剖室】ArkTS四大核心秘籍 🌈
🔮 代码魔法三件套 🔮
1️⃣ @Component → 组件身份证 🆔
2️⃣ @Entry → 程序入口钥匙 🔑
3️⃣ @State → 状态触发器 💥
✨ 三连击就能召唤UI更新!
🏗️【UI搭建指南】🏗️
⠀⭕ 装修队(UI描述) ⭕
✔️ build()里写布局 → 像搭乐高一样简单
✔️ Column竖排 → Text文字 → Button按钮
💡 示例代码:
build() {
Column() {
Text(this.message) 📝
Button('点我变身') 💥
}
}
⠀🔀 组件关系网 🔀
✅ 自定义组件:开发者自创的VIP组件(被@Component装饰)
✅ 系统组件:官方提供的现成积木(直接调用Column/Text等)
🎨【属性化妆间】🎨
链式调用超方便!
Text('Hello')
.fontSize(20) 📏
.width('100%') 📐
.backgroundColor('#F0F0F0') 🎨
💣【事件弹药库】💣
Button('点击')
.onClick(() => {
this.message = '变身!' 💫
})
🚀【语法外挂全家桶】🚀
语法糖
超能力
使用场景
@Builder
创建可复用的UI代码块
重复出现的布局
@Styles
定义组件皮肤样式
统一按钮/文字风格
stateStyles
根据状态变装
按钮按下时变色
@BuilderParam
动态插入UI片段
构建可配置化组件
⚠️ 重要注意事项 ⚠️
1️⃣ 变量命名禁忌 → 不能和系统属性撞名!
2️⃣ @State变量 → 必须用private保护
3️⃣ 链式调用 → 顺序影响最终效果
💡 小贴士:
✔️ 先写结构再加样式
✔️ 复杂组件拆分成多个@Builder
✔️ 多用@Styles保持样式统一
试着复制示例代码,亲手体验按钮点亮的魔法吧!✨🚀
🎨【ArkTS组件全攻略】手把手教你玩转UI搭建!✨
🌟 组件诞生记 🌟
⠀🛠️ 两种创建姿势:
1️⃣ 无参组件 → 像泡面一样简单!
xxxxxxxxxx
Column() {
Text('直接开吃') // 🍜
Divider() // 不需要任何调料
Text('真香~')
}
2️⃣ 有参组件 → 像定制奶茶!
xxxxxxxxxx
// 必选参数 → 珍珠奶茶必须加珍珠
Image('https://奶茶店/波霸.jpg') 🧋
// 可选参数 → 甜度自由选择
Text() // 默认甜度
Text('全糖战士') // 🍬
Text($r('app.string.少糖')) // 多语言适配
🌈 参数玩法大全 🌈
参数类型
示例
效果
直接传值Text('Hello')
直球选手⚽
资源引用Text($r('app.string.title'))
多语言达人🌐
变量赋值Image(this.imgPath)
动态更新🔄
表达式运算Text(
计数: ${count})
实时计算🧮
🎨 属性化妆间 🎨
⠀💄 美颜三连:
xxxxxxxxxx
Text('我要变美')
.fontSize(24) // 📏 字体加量
.fontColor(Color.Red) // 🎨 番茄色号
.fontWeight(FontWeight.Bold) // 💪 加粗猛男
💡 属性赋值技巧:
类型
示例
特点
常量赋值.width(100)
简单直接👍
变量传递.fontSize(this.textSize)
动态调整🎚️
条件表达式.height(count%2 ? 100 : 200)
智能响应🤖
⚡ 事件触发器 ⚡
⠀🎮 推荐玩法 → 箭头函数:
xxxxxxxxxx
Button('点赞')
.onClick(() => {
this.likes += 1; // 👍 立即生效
this.showHeart = true; // 💖 爱心暴击
AI 代码解读
})
⚠️ 避坑指南:
xxxxxxxxxx
// ❌ 错误示范(this指向会迷路)
Button('危险操作')
.onClick(function(){
this.counter++ // 这里的this可能不是你想要的!
AI 代码解读
})
// ✅ 正确姿势(箭头函数保平安)
Button('安全操作')
.onClick(() => {
this.counter += 2 // 🛡️ this永远正确
AI 代码解读
})
👪 组件家族树 👪
⠀🏠 容器组件育儿指南:
xxxxxxxxxx
Column() { // 📦 垂直育儿袋
Text('老大').fontSize(30) // 👦
Divider() // 👾 分割线怪兽
Row() { // ➡️ 水平排列
Image('baby.jpg').width(50) // 👶
Button('喂奶').onClick(this.feed) // 🍼
AI 代码解读
}
}
🌟 终极秘籍 🌟
1️⃣ 链式调用要换行 → 代码更清爽
2️⃣ 复杂逻辑用Builder → 像搭积木一样方便
3️⃣ 容器嵌套不过3层 → 拒绝俄罗斯套娃
4️⃣ 多用枚举类型 → 代码更专业
xxxxxxxxxx
.fontColor(Color.Red) // 🚥 官方色卡更安全
💡 代码风格小贴士:
✔️ 属性方法统一缩进
✔️ 事件处理集中管理
✔️ 复杂组件拆分成多个@Builder
(👆示意图建议:🐣小鸡破壳 → 组件创建过程动画)
📚 ArkUI自定义组件超全指南 | 手把手玩转组件化开发
🔥 附代码实操+避坑指南+风格秘籍,3分钟get组件核心玩法!
🌟 为什么要用自定义组件?
系统组件不够香?看这里👇
✅ 组合大师:随意搭配系统组件,打造专属UI
✅ 一码多用:写好一次,无限次call它!
✅ 数据驱动:状态变量一变,UI自动刷新超智能
💡 举个栗子:点击文字秒变内容
xxxxxxxxxx
@Component
struct HelloComponent {
@State message: string = 'Hello, World!'; // 状态变量
build() {
Row() {
Text(this.message)
.onClick(() => {
this.message = 'Hello, ArkUI!'; // 点击触发UI更新✨
})
}
AI 代码解读
}
}
🧩 组件基础四件套
部件
作用
必选
彩蛋功能🎁struct
组件骨架声明
✅
禁止继承!@Component
赋予组件超能力💪
✅
支持冻结模式❄️build()
UI绘制核心区
✅
根节点必须唯一!@Entry
页面C位出道装饰器
➖
支持路由命名🚦
🛠️ 组件结构解剖课
// 🎯 基础模板
@Component
struct MyComponent {
@State msg: string = "Hi~" // 私有状态变量
build() {
Column() { // ✅ 必须唯一根节点
Text(this.msg).fontSize(20)
}
}
}
// 🚀 高阶玩法
@Entry({
routeName: 'home', // 命名路由
useSharedStorage: true
})
@Component
struct HomePage {
//... 你的逻辑代码
}
⚠️ build函数禁区手册
🚫 8大禁忌行为:
1 声明本地变量 → let num=1
❌
2 直接console → console.info()
❌
3 创建作用域 → {...}
❌
4 调用非@Builder方法 → this.普通方法()
❌
5 使用switch语法 → 改用if判断 ✅
6 三元表达式 → 改用if组件 ✅
7 直接改状态变量 → this.count++
❌
8 数组原地修改 → arr.sort()
危险!⚠️
💡 正确姿势:
// ✅ 安全操作示范
build() {
Column() {
if(this.aVar > 10) {
Text('...')
} else {
Image('...')
}
this.safeRender() // @Builder方法
AI 代码解读
}
}
@Builder
safeRender() {
//...安全逻辑
}
🎨 组件样式妙招
链式调用超方便!
@Entry
@Component
struct StyleMaster {
build() {
Column() {
MyComponent()
.width(200)
.height(300)
.backgroundColor("#FF00FF") // 注意这是外层容器样式哦!
}
}
}
📌 避坑锦囊
1️⃣ 命名雷区:组件/类/函数名 ≠ 系统组件名
2️⃣ 状态管理:改状态要用专门方法,别在build里搞事情!
3️⃣ 组件复用:用@Reusable
装饰器性能翻倍
4️⃣ 路由跳转:@Entry({routeName:'xxx'})
轻松命名
🎯 终极总结:
自定义组件 = UI乐高 + 智能数据驱动 + 超强复用
掌握结构四件套 + 避开build雷区 = 开发效率起飞🛫
👉 现在就去ArkUI里试试这些酷炫操作吧!