基于HarmonyOS ArkUI 3.0 框架，成功开发了相册

HarmonyOS ArkUI 3.0 正式到来，今天就带大家感受一下HarmonyOS ArkUI 3.0 框架开发的相册功能，功能很简单，主要是图片放大和图片左右滑动事件。

实现效果

项目开发

创建新的应用

• 选择一个空的模板  

  

• 主要是选择开发语言为ets  

  

代码实现

• hml结构:渲染函数

build() {
      // 超出屏幕，可滚动
    Scroll() {
      //      图片列表
      Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center, alignContent: FlexAlign.Center }) {
        ForEach(this.imageList, (item, index) => {
          // 循环图片
          Image(item.url)
            .width(item.width)
            .height(item.height)
            .opacity(item.opacity)
            .onClick(() => {
              // 保存点击的id
              if (this.currentId === 0) {
                this.currentId = item.id
                this.currentIndex = this.currentId - 1
                this.isBig = true
              } else {
                this.currentId = 0
                this.currentIndex = -2
                this.isBig = false
              }
              this.changeList()
            })
            // 滑动事件
            .gesture(PanGesture({ direction: PanDirection.Horizontal })
              .onActionStart((e: GestureEvent) => { // 左右滑动开始
                // 保存开始的坐标
                if (!this.isBig) return false
                this.startX = e.offsetX
              })
              .onActionEnd((e: GestureEvent) => { // 左右滑动结束
                // 计算左滑还是右滑，初始化开始坐标
                if (!this.isBig) return false
                this.isSlideL = e.offsetX - this.startX > 0 ? false : true
                this.startX = 0
                this.showAnimate()
              })
            )
            .border({ width: 2, radius: 2, color: '#fff' })
        })
      }.width('100%')
    }

  }

数据处理

// 点击图片，将点击的图片放大，其他缩小
  changeList() {
    this.imageList = this.imageList.map((item) => {
      const newI = item
      if (item.id === this.currentId && this.isBig) {
        newI.width = '100%'
        newI.height = '100%'
        newI.opacity = 1
      } else if (item.id !== this.currentId && this.isBig) {
        newI.width = '0%'
        newI.height = 0
        newI.opacity = 0
      } else {
        newI.width = '50%'
        newI.height = 200
        newI.opacity = 1
      }
      return newI
    })
  }
// 左右滑动，改变图片的透明度
  showAnimate() {
    //    计算下一个图片的index序列
    let nextIndex = this.currentIndex
    if (!this.isSlideL) {
      nextIndex -= 1
    } else {
      nextIndex += 1
    }
    nextIndex = nextIndex === this.imageList.length ? 0 : (nextIndex === -1 ? (this.imageList.length - 1) : nextIndex)
    //    将下一个图片序列赋值给当前的序列
    this.currentIndex = nextIndex
    this.imageList = this.imageList.map((item, index) => {
      const newI = item
      if (nextIndex === index) {
        newI.opacity = 1
        newI.width = '100%'
        newI.height = '100%'
      } else {
        newI.opacity = 0
        newI.width = '0%'
        newI.height = '0%'
      }
      return newI
    })
  }

方舟开发框架声明式编程很符合接下来前端的趋势，希望框架能越来越完善。

——————

原创：老王丨【公众号：鸿蒙开发者老王】华为认证讲师 / 腾讯认证讲师 / 鸿蒙开发先行者