鸿蒙开发Day02

数据同步

页面路由

页面路由是指在应用程序中实现不同页面之间的跳转和数据传递
页面栈的最大容量上限为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
          })
        })
      }
    }
  }
}