跳转

命名路由

1
2
3
4
5
6
7
8
1实现hap、har、hsp不同包中页面跳转
2router.pushUrl()、router.replaceUrl()只能包内跳转
3子包引入主包，默认采用相对路径
4
5第一种，主包跳转子包，推荐使用命名路由import 'common/src/main/ets/pages/Index'
6第二种，子包跳转主包，推荐使用回调函数跳转
7第三种，url跳转，只能主包跳转子包，只能跳转@Entry页面
8router.pushUrl({url:'@bundle:com.example.snailmall/common/.../Index'})

1
2
3
4
5
6
7
1import "../pages/Page03_Detail"
2
3.onClick(() => {
4  router.pushNamedRoute({
5    name: 'detail'
6  })
7})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 1@Entry({ routeName: 'detail' })
 2@Component
 3struct Page03_Detail {
 4  @State message: string = 'Detail　Page';
 5
 6  build() {
 7    RelativeContainer() {
 8      Text(this.message)
 9        .id('Page03_DetailHelloWorld')
10        .fontSize($r('app.float.page_text_font_size'))
11        .fontWeight(FontWeight.Bold)
12        .alignRules({
13          center: { anchor: '__container__', align: VerticalAlign.Center },
14          middle: { anchor: '__container__', align: HorizontalAlign.Center }
15        })
16        .onClick(() => {
17          this.message = 'Welcome';
18        })
19    }
20    .height('100%')
21    .width('100%')
22  }
23}

回调函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 1@Component
 2export struct Home {
 3  ....
 4  // 接受外部函数
 5  private onCheckItem = (value: string) => {
 6  }
 7
 8
 9// 商品列表
10productBox(this.productData, this.onCheckItem)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 1@Builder
 2function productBox(productData: Array<ProductDataModel>, onCheckItem: (value: string) => void) {
 3  if (productData.length > 0) {
 4    List({ space: 10 }) {
 5      ForEach(productData, (item: ProductDataModel, index: number) => {
 6        ListItem() {
 7          Column() {
 8            Image(item.good_big_logo != "" ? $r(item.good_big_logo) : $r('app.media.bird'))
 9              .width('100%')
10              .height(130)
11            Column() {
12              Text(item.good_name)
13                .width('100%')
14                .height(30)
15                .fontSize(14)
16              Row() {
17                Text(`￥${item.good_price}`)
18                  .width(60)
19                  .fontSize(18)
20                  .fontColor(Color.Brown)
21                Image($r('app.media.startIcon'))
22                  .width(30)
23              }
24              .width('100%')
25              .justifyContent(FlexAlign.SpaceBetween)
26            }
27            .padding({
28              left: 5,
29              right: 5
30            })
31          }
32          .width('96%')
33          .height(218)
34          .backgroundColor(Color.Pink)
35          .borderRadius(10)
36          .onClick(() => onCheckItem(item.id))
37        }
38      }, (item: ProductDataModel) => item.id)
39    }
40    .lanes(2)
41    .margin({
42      top: 10
43    })
44    .padding({
45      bottom: 38
46    })
47  } else {
48    EmptyView({ defaultHeight: '100vp' })
49  }
50}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
 1@Entry
 2@Component
 3struct Index {
 4  @State message: string = 'Hello World';
 5  @State currentIndex: number = 0
 6  private tabController = new TabsController()
 7  private breakPointSystem = new BreakPointSystem()
 8  @StorageProp(BreakPointConstants.CURRENT_BREAKPOINT) currentBreakPoint: string = 'sm'
 9  routerPushDetail = (id: string) => {
10    console.log(id)
11    router.pushUrl({
12      url: 'pages/Page03_Detail',
13      params: {
14        value: id
15      }
16    })
17  }
18
19....
20TabContent() {
21  Home({ onCheckItem: this.routerPushDetail })
22}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 1import { router } from '@kit.ArkUI';
 2import { ParamsType } from '../utils/ParamsType';
 3
 4@Entry({ routeName: 'detail' })
 5@Component
 6struct Page03_Detail {
 7  @State message: string = 'Detail　Page';
 8  @State gid: string = 'aa'
 9
10  // 挂载完成后获取数据
11  aboutToAppear(): void {
12    const params = router.getParams()
13    console.log(JSON.stringify(params))
14    // 断言告诉编辑器, 明确知道params对象数据类型
15    this.gid = (params as ParamsType<string>).value
16  }
17
18  build() {
19    Column() {
20      Text(this.message)
21      Text(this.gid)
22    }
23    .height('100%')
24    .width('100%')
25  }
26}

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12