转场动画forEach循环添加回调函数添加index为啥全部触发了?
/**
* 转场动画(组件)transition
* 需要配合animateTo才能生效
*
*/
@Entry
@Component
struct TransitionTest2 {
@State numbers: Object[] = []
startNumber: number = 6;
build() {
Column({ space: 10 }) {
Scroll() {
Column({ space: 10 }) {
ForEach(this.numbers, (item,index) => {
// ForEach下的直接组件需配置transition效果
Row() {
Text(item.text + item.id)
.height(40)
.backgroundColor(Color.Orange).layoutWeight(1)
// Button('删除').type(ButtonType.Normal).onClick(()=>{
// animateTo({},()=>{
// this.numbers.splice(index,1)
// })
// })
}
.transition({ type: TransitionType.All, translate: { x: 200 }, scale: { x: 0, y: 0 } })
}, item => item.id)
}
.margin(10)
// .justifyContent(FlexAlign.Start)
// .alignItems(HorizontalAlign.Center)
.width("90%").height('100%')
}.layoutWeight(1).backgroundColor(Color.Green)
Row(){
Button('头部添加')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 往数组头部插入一个元素,导致ForEach在头部增加对应的组件
this.numbers.unshift({ text: '文档', id: this.startNumber.toString() });
this.startNumber++;
})
})
Button('尾部添加')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 往数组尾部插入一个元素,导致ForEach在尾部增加对应的组件
this.numbers.push({ text: '文档', id: this.startNumber.toString() });
this.startNumber++;
})
})
Button('删除头部')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 删除数组的头部元素,导致ForEach删除头部的组件
this.numbers.shift();
})
})
Button('删除尾部')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 删除数组的尾部元素,导致ForEach删除尾部的组件
this.numbers.pop();
})
})
}
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
}
}
UI
forEach循环
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS 如何给自定义控件添加回调函数
354浏览 • 1回复 待解决
HarmonyOS forEach return退出循环
358浏览 • 1回复 待解决
HarmonyOS http请求,只触发了headersReceive,没有触发dataReceive
345浏览 • 1回复 待解决
求告知子窗口如何添加动画
562浏览 • 1回复 待解决
HarmonyOS 服务卡片添加到桌面后,是否有生命周期回调函数
434浏览 • 1回复 待解决
HarmonyOS LazyForEach中listItem添加动画效果
486浏览 • 1回复 待解决
HarmonyOS forEach如何提前终止循环
299浏览 • 1回复 待解决
HarmonyOS 如何使用Polyline组件添加动画效果
364浏览 • 1回复 待解决
HarmonyOS Text添加动画效果与预期不符
413浏览 • 1回复 待解决
HarmonyOS grid拖拽效果如何添加动画
433浏览 • 1回复 待解决
HarmonyOS flutter在ohos如何添加系统回调
479浏览 • 1回复 待解决
HarmonyOS Text如何知道触发了TextOverflow.Ellipsis
293浏览 • 1回复 待解决
#鸿蒙学习大百科#如何监听RichEditor添加完成复制前可触发的回调?
422浏览 • 1回复 待解决
#鸿蒙学习大百科#如何监听RichEditor添加完成剪切前可触发的回调?
376浏览 • 1回复 待解决
#鸿蒙学习大百科#如何监听RichEditor添加完成粘贴前可触发的回调?
365浏览 • 1回复 待解决
ForEach无法遍历全部数据,是什么原因
2268浏览 • 1回复 待解决
鸿蒙卡片添加到桌面会触发哪个方法呢?
6574浏览 • 1回复 待解决
服务中心添加卡片怎么添加?
7118浏览 • 1回复 待解决
HarmonyOS Foreach循环渲染默认的key有问题
421浏览 • 1回复 待解决
HarmonyOS ForEach循环渲染组件视图刷新问题
448浏览 • 1回复 待解决
如何添加内容的添加渐变模糊
480浏览 • 1回复 待解决
HarmonyOS SideBarContainer 转场动画
176浏览 • 1回复 待解决
HarmonyOS 关于web页面触发POST请求时添加header的问题
382浏览 • 1回复 待解决
HarmonyO foreach循环,数据变化了,界面没有刷新
846浏览 • 1回复 待解决
复杂类型foreach循环,关于复杂类型的循环渲染有哪些?
1045浏览 • 1回复 待解决
没太看明白问题是什么