HarmonyOS 转场动画 ForEach控制

本文 我们继续说组件的专场特效 上文 HarmonyOS 转场动画 我们通过if控制了转场效果
本文 我们通过 ForEach 控制它的加载和删除
这时候就有人会好奇 ForEach 怎么控制删除呢？
很简单 循环次数不同 例如 第一次 10个 第二次 5个 那么后面的五个就相当于删除啦

我们先编写代码如下

@Entry
@Component
struct Index {

  @State ArrString:string[] = [
    "金樽清酒斗十千",
    "飞流直下三千尺",
    "飞流直下三千尺",
    "三河之水天上来"
  ];

  build() {
    Column({space: 30}) {
      ForEach(
        this.ArrString,
        (item)=>{
          Text(item)
        }
      )

    }
    .width('100%')
    .height('100%')
  }
}

我们就是写了个数组 字符串类型的 然后循环展示所有内容

我们可以改写代码如下

@Entry
@Component
struct Index {

  @State ArrString:string[] = [
    "金樽清酒斗十千",
    "飞流直下三千尺",
    "飞流直下三千尺",
    "三河之水天上来"
  ];

  build() {
    Column({space: 30}) {
      ForEach(
        this.ArrString,
        (item)=>{
          Text(item).transition({
            type: TransitionType.All,
            translate: {x:200,y:100 }
          })
        }
      )
      Button("添加").onClick(()=>{
        animateTo({}, () => {
          this.ArrString.unshift("凤兮凤兮归故乡");
        });
      })
    }
    .width('100%')
    .height('100%')
  }
}

这里 我们渲染列表 组件上加上了 transition 动画绑定
然后 我们给点击事件加上 animateTo 意思 需要动画 unshift 往数组最前面 加一条数据

我们运行代码 然后点击 按钮 显然 它组件移除和进入都有动画了

这里 我们可以给 ForEach 加上 ,item => JSON.stringify(item)

比较像vue的for key 让他不要已经有的元素也整个换掉了
我们点击
就只有一个元素飞出来了

然后 各种操作数据集合的语法 大家都可以这样去玩啦