• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# NavRouter
2
3导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。
4
5> **说明：**
6>
7> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## 子组件
10
11必须包含两个子组件，其中第二个子组件必须为[NavDestination](ts-basic-components-navdestination.md)。
12
13> **说明：**
14>
15> 子组件个数异常时：
16> 1. 有且仅有1个时，触发路由到NavDestination的能力失效。
17> 2. 有且仅有1个时，且使用NavDestination场景下，不进行路由。
18> 3. 大于2个时，后续的子组件不显示。
19> 4. 第二个子组件不为NavDestination时，触发路由功能失效。
20
21## 接口
22
23NavRouter()
24
25
26## 事件
27
28| 名称                                                    | 功能描述                                                     |
29| ------------------------------------------------------- | ------------------------------------------------------------ |
30| onStateChange(callback: (isActivated: boolean) => void) | 组件激活状态切换时触发该回调。返回值isActivated为true时表示激活，为false时表示未激活。<br/> **说明：** <br/>开发者点击激活NavRouter，加载对应的NavDestination子组件时，回调onStateChange(true)。NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。 |
31
32## 示例
33
34```ts
35// xxx.ets
36@Entry
37@Component
38struct NavRouterExample {
39  private arr: number[] = [0, 1, 2, 3]
40  @State isActive: boolean = false
41  @State dex: number = 0
42
43  build() {
44    Column() {
45      Navigation() {
46        List({ space: 12, initialIndex: 0 }) {
47          ForEach(this.arr, (item: number, index: number) => {
48            ListItem() {
49              NavRouter() {
50                Row() {
51                  Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 })
52                  Text(`NavRouter${item + 1}`)
53                    .fontSize(22)
54                    .fontWeight(500)
55                    .textAlign(TextAlign.Center)
56                }
57                .width(180)
58                .height(72)
59                .backgroundColor(this.dex === index ? '#ccc' : '#fff')
60                .borderRadius(24)
61
62                NavDestination() {
63                  Text(`我是NavDestination第${item + 1}页内容`).fontSize(50)
64                  Flex({ direction: FlexDirection.Row }) {
65                    Row() {
66                      Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 })
67                      Text('今天共有七节课').fontSize(30)
68                    }.padding({ left: 15 })
69                  }
70                }.backgroundColor('#ccc')
71                .title(`NavDestination${item + 1}`)
72              }.onStateChange((isActivated: boolean) => {
73                this.dex = index
74              })
75            }
76          }, item => item)
77        }
78        .height('100%')
79        .margin({ top: 12, left: 12 })
80      }
81      .mode(NavigationMode.Split)
82      .hideTitleBar(true)
83      .hideToolBar(true)
84    }.height('100%')
85  }
86}
87```
88
89