中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
如何实现共享元素转场?
微信扫码分享
添加geometryTransition属性,id参数必须在两个NavDestination之间保持一致。
@Component export struct A { @Consume pageStack: NavPathStack build() { NavDestination() { Column() { Text("A") Button("jump to B") .geometryTransition('sharedId') .onClick(()=>{ this.getUIContext()?.animateTo({ duration: 1000 }, () => { this.pageStack.pushPath({ name: 'B' }, false) }) }) }.width("100%") .height("100%") .justifyContent(FlexAlign.Center) } .hideTitleBar(true) } }
@Component export struct B { @Consume pageStack: NavPathStack build() { NavDestination() { Column() { Text("B") Button("jump to A") .geometryTransition('sharedId') .onClick(()=>{ }) }.width("100%") .height("100%") .justifyContent(FlexAlign.Center) } .hideTitleBar(true) } }
添加geometryTransition属性,id参数必须在两个NavDestination之间保持一致。