鸿蒙开发案例：进京赶考（2）

系列文章目录

鸿蒙开发案例：进京赶考（1）

鸿蒙开发案例：进京赶考（2）

---

案例介绍

“进京赶考”是一款抽卡游戏，玩家在游戏界面中通过随机抽取到不同颜色的卡片，可获得不 同积分；抽卡结束后，根据积分的高低对游戏成绩进行判定（状元、榜眼、探花、进士）。本篇接上篇实现页面跳转。

一个 Ability 中往往存在多个页面，且页面之间需要相互跳转，有时还需在页面跳转时进行数 据传递。在本案例中Index.ets 为玩家输入姓名进入游戏的入口 页，Second.ets 为进入游戏界面前的加载页，如图1所示

图1

---

一、整体思路

当两个页面间发生跳转时，如何进行数据的传递？ 

在跳转页中使用 router.pushUrl()方法，将目标页的页面路径添加到 url 中，params 即为自定义 参数；在目标页中通过 router.getParams()方法获取跳转页面传递过来的自定义参数。

二、实现步骤

1.实现页面跳转并传递姓名

首先在工程 pages 目录中，点击鼠标右键 > New > Page，新建命名为 Second 的 page 页

修改Index.ets，首先监听用户在文本框中输入姓名的动作，对Text Input组件增加事件处理，当监听到文本框中数据变化时，将输入的数据传递给value，需要定义状态变量保存实时的变化：@State name:string=''

给按钮增加点击事件处理，通过router的相关方法完成跳转和参数传递

2.获取传递过来的参数

在 Second.ets 文件中获取 Index.ets 文件执行页面跳转时传递的参数，如下：

//获取首页传递过来的玩家姓名

@State name: string = router.getParams()['name']

Text(this.name+'正在进入游戏……')
  .fontSize(20)
  .fontWeight(FontWeight.Bold)

3.完成进度条加载

在 Second.ets 文件中使用 Progress 组件显示正在加载的效果。

 Progress({
          value:this.currentvalue,//当前值
          total:100,
          type:ProgressType.ScaleRing
        })
          .color(0x1E90FF)
          .value(this.colorValue)
          .width(150)
          .style({strokeWidth:20,scaleCount:40,scaleWidth:4})
          .margin({top:'10%'})

在 Second.ets 文件中定义生命周期方法aboutToAppear()，代码如下：

 aboutToAppear(){
    if(this.currentvalue<=100&&this.colorValue<=100){
      this.timer=setInterval(()=>{
        this.colorValue=this.colorValue+20
        this.currentvalue=this.currentvalue+20
      },1000)
    }
    setTimeout(()=>{
      clearInterval(this.timer)
    },5000)

aboutToAppear?(): void

aboutToAppear函数在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。

总结

本文实现了页面跳转传值及进度条显示，Index.ets完整代码如下：

import router from '@ohos.router'
import CommonConstants from '../common/constants/CommonConstants'
@Entry
@Component
struct Index {
  @State name:string=''
  build() {
    Column({space:10}) {
      Text('进京赶考')
      .fontSize(40)
      .fontWeight(700)
      .margin({top:10,bottom:10})
      Row({space:20}) {
        Button('状')
          .buttonStyle(0xC7000B)
        Button('元')
          .buttonStyle(Color.Yellow)
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)

      Row({space:20}) {
        Button('及')
          .buttonStyle(Color.Blue)
        Button('第')
          .buttonStyle(Color.Green)

      }
      .width('100%')
      .justifyContent(FlexAlign.Center)

      Row({space:10}){
        TextInput({placeholder:'输入考生姓名'})
          .width('80%')
          .fontSize(20)
          .onChange((value:string)=>{
              this.name=value
          })
        Image($r('app.media.about'))
          .width(30)
          .onClick(()=>{
              this.aboutGame()
          })
      }.margin({top:20})

      Button('进入游戏')
        .width('50%')
        .borderRadius(8)
        .fontSize(20)
        .fontWeight(600)
        .shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})
        .onClick(()=>{
           router.pushUrl({
             url:'pages/Second',//跳转的页面
             params:{
               name:this.name //传递的参数
             }
           });
        })
    }
    .height('100%')
  }
  //定义到struct内部
  aboutGame(){
    AlertDialog.show({
      title:'游戏规则',
      message:CommonConstants.RULES_OF_THE_GAME,
      autoCancel:true,
      alignment:DialogAlignment.Bottom,
      gridCount:3,
      offset:{dx:0,dy:-300},
      primaryButton:{
        value:'cancel',
        action:()=>{
          console.info('Callback when the first button is clicked')
        }
      },
      secondaryButton:{
        value:'ok',
        action:()=>{
          console.info('Callback when the second button is clicked')
        }
      },
      cancel:()=>{
        console.info('Closed callbacks')
      }
    })
  }
}
@Extend(Button)
function buttonStyle(color:Color){
  .backgroundColor(color)
  .type(ButtonType.Normal)
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
  .width('40%')
  .height('20%')
  .borderRadius(8)
  .fontWeight(600)
  .shadow({radius:10,color:0xD3D3D3,offsetX:20,offsetY:20})
}

Second.ets完整代码如下：

import router from '@ohos.router'
@Entry
@Component
struct Second {
  //获取首页传递过来的玩家姓名
  @State
  name: string = router.getParams()['name']
  @State
  currentvalue:number=20
  @State
  colorValue:number=20

  private timer:number
  build() {
      Column() {
        Text(this.name+'正在进入游戏……')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Progress({
          value:this.currentvalue,//当前值
          total:100,
          type:ProgressType.ScaleRing
        })
          .color(0x1E90FF)
          .value(this.colorValue)
          .width(150)
          .style({strokeWidth:20,scaleCount:40,scaleWidth:4})
          .margin({top:'10%'})

      }
      .width('100%')
    .margin({top:20})

  }
  aboutToAppear(){
    if(this.currentvalue<=100&&this.colorValue<=100){
      this.timer=setInterval(()=>{
        this.colorValue=this.colorValue+20
        this.currentvalue=this.currentvalue+20
      },1000)
    }
    setTimeout(()=>{
      clearInterval(this.timer)
    },5000)
  }
}