Harmony os next～UI开发与ArkUI框架

Bruce_Liuxiaowei

623人浏览 · 2025-03-03 12:16:00

Bruce_Liuxiaowei · 2025-03-03 12:16:00 发布

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())