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 让他不要已经有的元素也整个换掉了
我们点击
就只有一个元素飞出来了

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