频道选择UI鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

该示例实现频道选择UI，通过Grid实现页面布局，实现长按拖动、删除等动画效果。

频道选择UI源码链接

效果预览

使用说明

进入应用，点击右上角的编辑按钮后，可以拖动item，并修改其顺序。可以点击图标右上角的删除按钮进行图标删除。

实现思路

1. 点击按钮进行编辑完成状态切换。

   Button() {
     Text(this.isEdit ? "完成" : "编辑")
    .fontColor(this.isEdit ? Color.Black : 0xF9CF93)
   }.width(80)
   .height(30)
   .backgroundColor(Color.White)
   .onClick(() => {
     this.isEdit = !this.isEdit
     this.jumpWithSpeed(5)
   })

2. 拖动图标修改其顺序。

   changeIndex(index1: number, index2: number) {
     this.numbers.splice(index2, 0, this.numbers.splice(index1, 1)[0])
   }

3. 在编辑状态下点击删除按钮进行图标删除。

   if (this.isEdit) {
     Image($r('app.media.close'))
    .width(20)
    .height(20)
    .onClick(() => {
      animateTo({ duration: 300 }, () => {
        this.numbers.splice(index, 1)
      })
      this.stopJump()
      this.jumpWithSpeed(5)
    })
   }