HarmonyOS鸿蒙Next中ArkUI eTS实现页面跳转时传值与回传值的功能

HarmonyOS鸿蒙Next中ArkUI eTS实现页面跳转时传值与回传值的功能专题：ArkUI（eTS）常见UI效果汇总（更新中）

效果图如下：

使用Navigator包裹组件实现页面跳转，其属性.params()携带参数，在目标页面使用router.getParams()接收传入的参数，在onPageShow()生命周期中实现回传值接收。

1、在config.json配置页面indexA、indexB，代码如下：

{
  "js": [
    {
      "pages": [
        "pages/indexA",
        "pages/indexB"
      ]
    }
  ]
}

2、indexA.ets代码如下：

import router from '@system.router'
@Entry
@Componentstruct IndexA {
  @State textArray:string[]=[]
  @State idArray:number[]=[]

  build() {
    Column() {
      Column() {
        Row(){
          Text('兴趣爱好').fontSize(18).fontColor(0xffffff).layoutWeight(1)
          Navigator({ target: 'pages/indexB' }) {
            Text('选择').fontSize(16).textAlign(TextAlign.Center).fontColor(0xefefef)
          }.params({ obj: this.idArray })
        }.width('100%').padding({left:10,right:10}).height(40).backgroundColor(0x8845a136)
        if(this.textArray.length>0){
          Flex({justifyContent:FlexAlign.Start,alignItems:ItemAlign.Start,wrap:FlexWrap.Wrap}){
            ForEach(this.textArray,(item: number) => item.toString()){
              Text(item).fontSize(16).fontColor(0x008B8B).padding({left:8,top:4,right:8,bottom:4})
                .borderRadius(45).borderWidth(1).borderColor(0x008B8B)
                .margin({left:4,top:4,right:4,bottom:4})
            }
          }.padding({top:4,bottom:4})
        }
      }.width('90%').margin({top:30}).borderWidth(1).borderColor(0x8845a136)
    }.width('100%').height('100%')
  }

  onPageShow(){
    if(router.getParams()!= null){
      this.idArray=router.getParams().idArray
      this.textArray=router.getParams().textArray
    }
  }
}

3、indexB.ets代码如下：

import router from '@system.router'
@Entry
@Componentstruct IndexB {
  @State active: boolean = false
  private idArray: number[] = []
  private textArray: string[] = ['网球', '篮球', '兵乓球', '跳绳', '听音乐', '看电影', '绘画', '写小说',  '拼图', '拆装', '钢琴', '吉他', '逛街', '购物', '五子棋', '运动']
  @State private checkArray: boolean[] = [false, false, false, false, false, false, false, false,  false, false, false, false, false, false, false, false]
  private idArrays: number[] = []
  private textArrays: string[] = []

  private aboutToAppear(): void {
    this.idArray = router.getParams().obj
    this.idArray.forEach(value => {
      this.checkArray[value] = true;
    })
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.End }) {
        Text('请选择').fontSize(18).fontColor(0xffffff)
          .position({ x: '50%', y: '50%' }).markAnchor({ x: '50%', y: '50%' })
        Navigator({ target: 'pages/index', type: NavigationType.Back }) {
          Text('确定').fontSize(16).textAlign(TextAlign.Center).fontColor(0xefefef)
            .onClick(() => {
              this.checkArray.forEach((item, index) => {
                if (item) {
                  this.idArrays.push(index)
                  this.textArrays.push(this.textArray[index])
                }
              })
              this.active = true
            })
        }.active(this.active)
          .params({ idArray: this.idArrays, textArray: this.textArrays })
      }.width('100%').padding({ left: 10, right: 10 }).height(50).backgroundColor(0x8845a136)
      Grid() {
        ForEach(this.textArray.map((item1, index1) => {
          return { index: index1, data: item1 };
        }), (item) => {
          GridItem() {
            Text(`${item.data}`)
              .fontSize(18)
              .fontColor(this.checkArray[item.index] === true ? 0x008B8B : 0x828282)
              .padding({ left: 8, top: 4, right: 8, bottom: 4 })
              .borderRadius(45)
              .borderWidth(1)
              .borderColor(this.checkArray[item.index] === true ? 0x008B8B : 0x828282)
              .onClick(() => {
                this.checkArray[item.index] = !this.checkArray[item.index]
              })
          }
        }, (item) => item.data.toString())
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .height(200)
      .width('90%')
      .margin({ top: 30 })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中ArkUI eTS实现页面跳转时传值与回传值的功能的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 1楼

在HarmonyOS鸿蒙Next中，使用ArkUI eTS实现页面跳转时传值与回传值的功能可以通过router模块和@State、@Prop等装饰器来实现。

页面跳转时传值：

使用router.push方法进行页面跳转，并通过params参数传递数据。

示例代码：

import router from '@ohos.router';

@Entry
@Component
struct FirstPage {
  @State message: string = 'Hello, World!';

  build() {
    Column() {
      Text(this.message)
        .onClick(() => {
          router.push({
            url: 'pages/SecondPage',
            params: { message: this.message }
          });
        });
    }
  }
}

接收传递的值：

在目标页面中，通过router.getParams方法获取传递的值。

示例代码：

import router from '@ohos.router';

@Entry
@Component
struct SecondPage {
  @State receivedMessage: string = '';

  onPageShow() {
    this.receivedMessage = router.getParams()['message'] || '';
  }

  build() {
    Column() {
      Text(this.receivedMessage);
    }
  }
}

回传值：

使用router.back方法返回上一页，并通过params参数回传数据。

示例代码：

import router from '@ohos.router';

@Entry
@Component
struct SecondPage {
  @State receivedMessage: string = '';

  onPageShow() {
    this.receivedMessage = router.getParams()['message'] || '';
  }

  build() {
    Column() {
      Text(this.receivedMessage)
        .onClick(() => {
          router.back({
            params: { result: 'Data from SecondPage' }
          });
        });
    }
  }
}

接收回传的值：

在源页面中，通过router.getParams方法获取回传的值。

示例代码：

import router from '@ohos.router';

@Entry
@Component
struct FirstPage {
  @State message: string = 'Hello, World!';
  @State result: string = '';

  onPageShow() {
    this.result = router.getParams()['result'] || '';
  }

  build() {
    Column() {
      Text(this.message)
        .onClick(() => {
          router.push({
            url: 'pages/SecondPage',
            params: { message: this.message }
          });
        });
      Text(this.result);
    }
  }
}

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现页面跳转时的传值与回传值功能。

更多关于HarmonyOS鸿蒙Next中ArkUI eTS实现页面跳转时传值与回传值的功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 2楼作者

在HarmonyOS鸿蒙Next中，使用ArkUI eTS实现页面跳转时传值与回传值，可以通过router.push方法传递参数，并在目标页面通过router.getParams获取。回传值则通过router.back方法携带参数，源页面通过router.getResult接收。具体步骤如下：

传值：使用router.push跳转时，通过params传递参数。

router.push({
    url: 'pages/TargetPage',
    params: { key: 'value' }
});

接收值：在目标页面通过router.getParams获取传递的参数。
```
const params = router.getParams();
```
回传值：使用router.back返回时，通过params回传参数。
```
router.back({
    params: { result: 'returnValue' }
});
```
接收回传值：在源页面通过router.getResult获取回传的参数。
```
const result = router.getResult();
```

通过以上步骤，可以实现页面跳转时的传值与回传值功能。