【关键字】
模块内页面跳转 / @ohos.router(页面路由)模块 / Navigation组件
【问题描述】
根据文档(https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-page-transition-animation-0000001820879813)描述,可通过以下代码禁用页面转场动画:
pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 0 })
PageTransitionExit({ type: RouteType.None, duration: 0 })
}
实际操作:创建空Demo,进行代码测试。
Index页面代码:
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
router.pushUrl({ url: 'pages/Second' })
})
}
.width('100%')
}
.height('100%')
.backgroundColor('#FF0000')
}
}
Second页面代码:
import router from '@ohos.router'
@Entry
@Component
export struct Second {
build() {
Column() {
Text('Back')
.onClick(() => {
router.back()
})
}
.width('100%')
.height('100%')
.backgroundColor('#0000FF')
}
pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 0 })
PageTransitionExit({ type: RouteType.None, duration: 0 })
}
}
问题:Index页面push Second页面时,动画被禁用,但Second页面返回Index页面时,动画依然存在,是什么原因?
【解决方案】
@ohos.router(页面路由)模块适用于模块间与模块内页面切换,通过每个页面的url实现模块间解耦。模块内页面跳转时,为了实现更好的转场动效场景不建议使用该模块,建议您使用Navigation组件进行页面跳转。Navigation组件适用于模块内页面切换,一次开发,多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验,并提供多种标题栏样式来呈现更好的标题和内容联动效果。在一次开发,多端部署场景下,Navigation组件能够自动适配窗口显示大小,在窗口较大的场景下自动切换分栏展示效果。因此推荐使用Navigation,router后续暂不演进。
Navigation组件进行页面跳转的使用方法,可以参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation-0000001821000861#ZH-CN_TOPIC_0000001821000861__%E7%A4%BA%E4%BE%8B2
另外,按照问题描述中所说,若使用pageTransition禁用页面转场动画时,在进入页和退出页中均需要进行设置。并且如果仅Second页面不需要动画,Index页面推入Third页面仍需要动画,可通过设置进入页和退出页的duration参数来实现。示例代码如下:
// Index页面
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message1: string = 'Hello World1';
@State message2: string = 'Hello World2';
build() {
Row() {
Column() {
// Image($r("app.media.good"))
// .height(500)
Text(this.message1)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
router.pushUrl({ url: 'pages/second' })
})
Text(this.message2)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
router.pushUrl({ url: 'pages/three' })
})
}
.width('100%')
}
.height('100%')
.backgroundColor('#A0FF0000')
}
pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 1000 })
PageTransitionExit({ type: RouteType.None, duration: 1000 })
}
}
// Second页面
import router from '@ohos.router'
@Entry
@Component
export struct Second {
build() {
Column() {
// Image($r("app.media.ic_ai"))
// .height(500)
Text('Back')
.onClick(() => {
router.back()
})
}
.width('100%')
.height('100%')
.backgroundColor('#A00000FF')
}
pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 0 })
PageTransitionExit({ type: RouteType.None, duration: 0 })
}
}
// Third页面
import router from '@ohos.router'
@Entry
@Component
export struct three {
build() {
Column() {
// Image($r("app.media.ic_ai"))
// .height(500)
Text('Back3')
.onClick(() => {
router.back()
})
}
.width('100%')
.height('100%')
.backgroundColor('#A00000FF')
}
pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 1000 })
PageTransitionExit({ type: RouteType.None, duration: 1000 })
}
}