转场动画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
待解决
相关问题
使用转场动画时,如何在消失转场动画完成时执行其他操作
392浏览 • 1回复 待解决
TransitionEffect动画循环播放如何关闭
231浏览 • 1回复 待解决
鸿蒙卡片添加到桌面会触发哪个方法呢?
4548浏览 • 1回复 待解决
ForEach无法遍历全部数据,是什么原因
216浏览 • 1回复 待解决
服务中心添加卡片怎么添加?
4507浏览 • 1回复 待解决
ArkUI转场动画可以改颜色吗?
213浏览 • 1回复 待解决
请问如何去掉ability的转场动画?
9385浏览 • 2回复 待解决
鸿蒙工程可以添加.so 文件吗?怎么添加?
1024浏览 • 1回复 待解决
buttom样式怎么添加?
4844浏览 • 2回复 待解决
LazyForEach如何添加数据?
307浏览 • 1回复 待解决
Image 上怎么添加文字?
1126浏览 • 1回复 待解决
组件被隐藏后 onVisibleAreaChange 事件触发了两次
290浏览 • 1回复 待解决
如何为 C++ 提供回调函数?
564浏览 • 1回复 待解决
DirectionalLayout 动态添加组件问题
2603浏览 • 1回复 待解决
JS如何添加日历日程提醒?
6176浏览 • 1回复 待解决
图片如何添加渐变模糊
159浏览 • 1回复 待解决
TabList可以添加图片么?
6150浏览 • 3回复 待解决
焦点事件onBlur/onFocus回调无法触发
265浏览 • 1回复 待解决
ets怎么实现动态添加组件?
1585浏览 • 1回复 待解决
在华为开发管理页面appgallery connect中添加项目添加应用时没有app(鸿蒙)这个选项
9777浏览 • 2回复 待解决
onUnhandledException与onException回调分别什么时候触发
243浏览 • 1回复 待解决
fraction 添加fraction 页面报错了
3040浏览 • 3回复 待解决
鸿蒙-富文本如何添加图片
4793浏览 • 1回复 待解决
PA开发,如何添加日历提醒?
2152浏览 • 1回复 待解决
自定义组件中如何添加图片?
764浏览 • 1回复 待解决
没太看明白问题是什么