Harmony os next～UI开发与ArkUI框架
老铁！今儿咱来唠唠鸿蒙开发这档子事儿，手把手教你整明白鸿蒙的UI开发咋玩儿，保准比炖酸菜还带劲！
一、ArkUI框架：鸿蒙的"大铁锅"
1.1 声明式UI是啥？
- 就跟点菜似的！说你要啥（声明效果），不用管后厨咋炒（不写具体步骤）
- 传统命令式UI（Android/iOS）：
"服务员！先切葱姜蒜！倒油烧热！下肉翻炒！..." - 鸿蒙ArkUI：
"给我整盘锅包肉！糖醋汁儿多点！"
1.2 组件化开发思想
- 跟搭乐高似的！把界面拆成可复用的积木块
- 举个栗子🌰：
// 自定义一个带图标的按钮组件
@Component
struct IconButton {
iconSrc: Resource // 图片路径
btnText: string // 按钮文字
build() {
Column() {
Image(this.iconSrc) // 图标
.width(40)
Text(this.btnText) // 文字
.fontSize(16)
}.onClick(() => {
// 点击事件处理
})
}
}
// 使用的时候跟拼积木似的：
IconButton({
iconSrc: $r('app.media.home'), btnText: '首页'})
二、必学五大金刚组件（附代码）
2.1 Text组件 - 文字显示扛把子
Text('俺们东北银都是活雷锋！')
.fontSize(24) // 字号
.fontColor('#FF4500') // 橘红色
.textAlign(TextAlign.Center) // 居中
.decoration({
type: TextDecorationType.Underline}) // 加下划线
2.2 Button组件 - 点击触发必备
Button('点我整点狠活儿！')
.width('80%') // 宽度占80%
.backgroundColor('#4A90E2') // 按钮颜色
.onClick(() => {
// 点击后触发这个回调
showToast('哎呀妈呀，真点啊！');
})
2.3 List组件 - 列表展示神器
// 显示东北特色菜列表
@Entry
@Component
struct FoodList {
private foods: string[] = ['锅包肉', '地三鲜', '杀猪菜', '溜肉段']
build() {
List({
space: 10}) {
// 列表项间距10
ForEach(this.foods, (item) => {
ListItem() {
Text(item)
.fontSize(20)
.padding(15)
}
.borderRadius(10) // 圆角边框
.backgroundColor('#FFF')
})
}
.backgroundColor('#F5F5F5')
}
}
2.4 Grid组件 - 网格布局大法
// 显示九宫格图片
@Entry
@Component
struct PhotoGrid {
private images: Resource[] = [
$r('app.media.pic1'),
$r('app.media.pic2'),
//... 总共9张图
]
build() {
Grid() {
ForEach(this.images, (img) => {
GridItem() {
Image(img)
.aspectRatio(1) // 保持正方形
.objectFit(ImageFit.Cover) // 图片填充
}
})
}
.columnsTemplate('1fr 1fr 1fr') // 三列等宽
.rowsGap(10) // 行间距
.columnsGap(10) // 列间距
}
}
2.5 Flex布局 - 弹性盒子
// 横向排列的三个按钮
Flex({
direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
Button('点赞').width('30%')
Button('收藏').width('30%')
Button('转发').width('30%')
}
.width('100%')
.padding(15)
三、动态UI更新（跟变脸似的）
3.1 数据绑定
@Entry
@Component
struct Counter {
@State count: number = 0 // 带@State的变量会触发UI更新
build() {
Column() {
Text(`当前计数：${
this.count}`)
.fontSize(30)
Button('加一')
.onClick(() => {
this.count += 1 // 点一下数字自动变
})
}
}
}
3.2 条件渲染
// 根据登录状态显示不同内容
@Entry
@Component
struct UserInfo {
@State isLogin: boolean = false
build() {
Column() {
if (this.isLogin) {
Text('欢迎老铁回来！')
.fontColor('green')
} else {
Button('赶紧登录')
.onClick(() => {
this.isLogin = true
})
}
}
}
}
四、事件响应（比广场舞大妈还灵敏）
4.1 点击事件（基础款）
Button('点我看惊喜')
.onClick(() => {
// 这里写点击后的操作
prompt.showToast('surprise mother fxxker!')
})
4.2 滑动事件（高级操作）
// 实现左滑删除效果
@Entry
@Component
struct SwipeList {
@State items: string[] = ['貂皮大衣', '东北大花袄', '军大衣']
build() {
List() {
ForEach(this.items, (item, index) => {
ListItem() {
Swiper() {
Flex({
justifyContent: FlexAlign.Start }) {
Text(item).fontSize(20)
}
.width('100%')
.padding(15)
// 右侧删除按钮
Flex({
justifyContent: FlexAlign.End }) {
Button('删除')
.backgroundColor('red')
.onClick(() => {
this.items.splice(index, 1)
})
}
.width('30%')
}
.edgeEffect(EdgeEffect.Spring) // 滑动弹簧效果
}
})
}
}
}
五、实战技巧（老司机经验）
组件命名规范：
商品卡片叫GoodsCard，别整aaa这种名儿，回头自己都找不着北样式复用：
把常用样式抽成函数：// 定义红色警告文字样式 function warningText() { return { fontSize: 18, color: '#FF0000', fontWeight: 500 } } // 使用的时候 Text('库存不足！').style(warningText())调试大法：
用console.info('当前值：', this.value)输出日志，比瞎猜强！
重点总结：
- ArkUI的核心是声明式编程，告别繁琐操作
- 五大基础组件得玩得溜，就像东北人玩冰尜
- 动态更新靠
@State，数据一变UI跟着颤 - 事件处理要丝滑，用户体验顶呱呱
下回咱整点更硬核的——鸿蒙分布式开发，记得揣俩烤冷面来听课啊！
