赞
踩
页面路由是指在应用程序中实现不同页面之间的跳转和数据传递
页面栈的最大容量上限为32个页面,使用router.clear()方法可以清空页面栈,释放内存
Router有两种页面跳转模式,分别是:
router.pushUrl(): 目标页不会替换当前页,而是压入页面栈,因此可以用router.back()返回当前页
router.replaceUrl(): 目标页替换当前页,当前页会被销毁并释放资源,无法返回当前页
Router有两种页面实例模式,分别是:
Standard: 标准实例模式,每次跳转都会新建一个目标页并压入栈顶。默认就是这种模式
Single: 单实例模式,如果目标页已经在栈中,则离栈顶最近的Url页面会被移动到栈顶并重新加载
router.showAlertBeforeBackPage() //返回前的警告
练习:
import router from '@ohos.router' @Entry @Component struct game{ build(){ Column(){ Stack(){ Image($r("app.media.img")) .height('100%') .width('100%') Button(){ Text('开始游戏') .fontSize(20) .fontColor('#ff0') .width(80) .height(40) }.position({x: 130,y: 550}) .width(100) .onClick(()=>{ router.replaceUrl({ url: 'pages/game_1' }, router.RouterMode.Single) }) } } } }
@Entry @Component struct game_1{ @State imgX:number = 100 @State imgY:number = 100 build(){ Column(){ Stack(){ Image($r("app.media.img_2")) Image($r("app.media.img_3")) .width(50) .position({x:this.imgX, y:this.imgY}) Button(){ Text("^") .fontSize(20) }.type(ButtonType.Circle) .width(30) .position({x:100, y:200}) .onClick(()=>{ animateTo({duration:1000},()=>{ this.imgY -= 100 }) }) Button(){ Text("<") .fontSize(20) } .type(ButtonType.Circle) .width(30) .position({x:60, y:240}) .onClick(()=>{ animateTo({duration:1000},()=>{ this.imgX -= 100 }) }) Button(){ Text(">") .fontSize(20) } .type(ButtonType.Circle) .width(30) .position({x:140, y:240}) .onClick(()=>{ animateTo({duration:1000},()=>{ this.imgX += 100 }) }) Button(){ Text("-") } .width(30) .position({x:100, y:280}) .onClick(()=>{ animateTo({duration:1000},()=>{ this.imgY += 100 }) }) } } } } animateTo({duration:1000},()=>{ this.imgY += 100 }) }) } } } }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。