HarmonyOS鸿蒙Next中用ForEach渲染Image，进行共享元素转场的时候会出现bug，这个怎么解决？
HarmonyOS鸿蒙Next中用ForEach渲染Image，进行共享元素转场的时候会出现bug，这个怎么解决？ 用ForEach渲染Image，进行共享元素转场的时候会出现bug，这个怎么解决？
效果如上面gif所示，
import router from ‘@ohos.router’;
@Entry
@Component
struct Index {
@State imgArr: string[] = [‘img.png’, ‘img1.png’, ‘img_1.png’, ‘img_2.png’, ‘img_3.png’, ‘img_4.png’, ‘img_5.png’]
scroller: Scroller = new Scroller()
@State scale1: number = 1
@State opacity1: number = 1
onJumpClick(imgUrl:string): void {
let paramsInfo: DataModel = {
img:imgUrl,
};
router.pushUrl({
url: ‘pages/ImageViewrPage’, // 目标url
params: paramsInfo // 添加params属性，传递自定义参数
}, (err) => {
if (err) {
console.error(Invoke pushUrl failed, code is ${err.code}, message is ${err.message});
return;
}
console.info(‘Invoke pushUrl succeeded.’);
})
}
build() {
Column() {
Grid(this.scroller) {
ForEach(this.imgArr, (item) => {
GridItem() {
Navigator({ target: ‘pages/ImageViewrPage’, type: NavigationType.Push }) {
Image($rawfile(item))
.aspectRatio(1)
.sharedTransition(‘sharedImage’, { duration: 500, curve: Curve.Smooth, delay: 100 })
}.params({ img: item })
}
}, item => item)
}
.columnsTemplate(‘1fr 1fr 1fr 1fr’)
.columnsGap(3)
.rowsGap(3)
.onScrollIndex((first: number) => {
console.info(first.toString())
})
.width(‘100%’)
.height(‘100%’)
}
.width(‘100%’)
.layoutWeight(1)
.padding({ top: 20 })
.backgroundColor(’#163344’)
.scale({ x: this.scale1, y:this.scale1 }).opacity(this.opacity1)
}
pageTransition() {
PageTransitionEnter({ duration: 400, curve: Curve.Friction })
.onEnter((type: RouteType, progress: number) => {
this.scale1 = 1
this.opacity1 = progress
})
PageTransitionExit({ duration: 400, curve: Curve.Friction })
.onExit((type: RouteType, progress: number) => {
this.opacity1 = 1-progress
})
}
}
import router from '[@ohos](/user/ohos).router';
const params = router.getParams(); // 获取传递过来的参数对象
const imgUrl = params['img']; // 获取id属性的值
[@Entry](/user/Entry)
[@Component](/user/Component)
struct ImageViewrPage {
[@State](/user/State) scale1: number = 1
[@State](/user/State) opacity1: number = 1
build() {
Column() {
Image($rawfile(imgUrl))
.width('100%')
.sharedTransition('sharedImage', { duration: 500, curve: Curve.Smooth, delay: 100 })
Button('返回').onClick(() => {
router.back()
})
}
.width('100%')
.height('100%')
.backgroundColor(0x000000)
.justifyContent(FlexAlign.Center)
.scale({ x: this.scale1 ,y:this.scale1 }).opacity(this.opacity1)
}
pageTransition() {
PageTransitionEnter({ duration: 400, curve: Curve.Friction })
.onEnter((type: RouteType, progress: number) => {
this.opacity1 = progress
})
PageTransitionExit({ duration: 400, curve: Curve.Friction })
.onExit((type: RouteType, progress: number) => {
this.opacity1 = 1-progress
})
}
}
更多关于HarmonyOS鸿蒙Next中用ForEach渲染Image，进行共享元素转场的时候会出现bug，这个怎么解决？的实战教程也可以访问 https://www.itying.com/category-93-b0.html
你试下把sharedTransition的id值按不同图片生成唯一id来做
更多关于HarmonyOS鸿蒙Next中用ForEach渲染Image，进行共享元素转场的时候会出现bug，这个怎么解决？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
