• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 导航转场
2
3
4导航转场是页面的路由转场方式，也就是一个界面消失，另外一个界面出现的动画效果。导航转场的动画效果开发者也可以自定义。
5
6
7导航转场推荐使用[Navigation](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md)组件实现，可搭配[NavDestination](../reference/apis-arkui/arkui-ts/ts-basic-components-navdestination.md)组件实现导航功能。
8
9
10完整的代码示例和效果如下。
11
12
13
14```ts
15@Component
16export struct MyCommonPage {
17  @Consume('pathInfos') pathInfos: NavPathStack;
18  name: String = '';
19  @State value: String = '';
20
21  build() {
22    NavDestination() {
23      Column() {
24        Text(`${this.name}设置页面`)
25          .width('100%')
26          .fontSize(20)
27          .fontColor(0x333333)
28          .textAlign(TextAlign.Center)
29          .textShadow({ radius: 2, offsetX: 4, offsetY: 4, color: 0x909399 })
30          .padding({ top: 30 })
31        Text(`${JSON.stringify(this.value)}`)
32          .width('100%')
33          .fontSize(18)
34          .fontColor(0x666666)
35          .textAlign(TextAlign.Center)
36          .padding({ top: 45 })
37        Button('返回')
38          .width('50%')
39          .height(40)
40          .margin({ top: 50 })
41          .onClick(() => {
42            this.pathInfos.pop();
43          })
44      }
45      .size({ width: '100%', height: '100%' })
46    }.title(`${this.name}`)
47  }
48}
49
50@Component
51export struct MySharePage {
52  @Consume('pathInfos') pathInfos: NavPathStack;
53  name: String = '';
54  private listArray: Array<string> = ['投屏', '打印', 'VPN', '私人DNS', 'NFC'];
55
56  build() {
57    NavDestination() {
58      Column() {
59        List({ space: 12, initialIndex: 0 }) {
60          ForEach(this.listArray, (item: string) => {
61            ListItem() {
62              Row() {
63                Row() {
64                  Text(`${item.slice(0, 1)}`)
65                    .fontColor(Color.White)
66                    .fontSize(14)
67                    .fontWeight(FontWeight.Bold)
68                }
69                .width(30)
70                .height(30)
71                .backgroundColor('#a8a8a8')
72                .margin({ right: 20 })
73                .borderRadius(20)
74                .justifyContent(FlexAlign.Center)
75
76                Column() {
77                  Text(item)
78                    .fontSize(16)
79                    .margin({ bottom: 5 })
80                }
81                .alignItems(HorizontalAlign.Start)
82
83                Blank()
84
85                Row()
86                  .width(12)
87                  .height(12)
88                  .margin({ right: 15 })
89                  .border({
90                    width: { top: 2, right: 2 },
91                    color: 0xcccccc
92                  })
93                  .rotate({ angle: 45 })
94              }
95              .borderRadius(15)
96              .shadow({ radius: 100, color: '#ededed' })
97              .width('90%')
98              .alignItems(VerticalAlign.Center)
99              .padding({ left: 15, top: 15, bottom: 15 })
100              .backgroundColor(Color.White)
101            }
102            .width('100%')
103            .onClick(() => {
104              this.pathInfos.pushPathByName(`${item}`, '页面设置参数')
105            })
106          }, (item: string): string => item)
107        }
108        .listDirection(Axis.Vertical)
109        .edgeEffect(EdgeEffect.Spring)
110        .sticky(StickyStyle.Header)
111        .width('100%')
112      }
113      .size({ width: '100%', height: '100%' })
114    }.title(`${this.name}`)
115  }
116}
117
118@Entry
119@Component
120struct NavigationDemo {
121  @Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack();
122  private listArray: Array<string> = ['WLAN', '蓝牙', '个人热点', '连接与共享'];
123
124  // Navigation的navDestination属性方法设置的构造函数，在路由栈变化时触发该构建数创建新的路由页面
125  @Builder
126  PageMap(name: string, param: string) {
127    if (new RegExp('共享').test(name)) {
128      MySharePage({ name: name })
129    } else {
130      MyCommonPage({ name: name, value: param })
131    }
132  }
133
134  build() {
135    Column() {
136      Navigation(this.pathInfos) {
137        TextInput({ placeholder: '输入关键字搜索' })
138          .width('90%')
139          .height(40)
140          .margin({ bottom: 10 })
141
142        // 通过List定义导航的一级界面
143        List({ space: 12, initialIndex: 0 }) {
144          ForEach(this.listArray, (item: string) => {
145            ListItem() {
146              Row() {
147                Row() {
148                  Text(`${item.slice(0, 1)}`)
149                    .fontColor(Color.White)
150                    .fontSize(14)
151                    .fontWeight(FontWeight.Bold)
152                }
153                .width(30)
154                .height(30)
155                .backgroundColor('#a8a8a8')
156                .margin({ right: 20 })
157                .borderRadius(20)
158                .justifyContent(FlexAlign.Center)
159
160                Column() {
161                  Text(item)
162                    .fontSize(16)
163                    .margin({ bottom: 5 })
164                }
165                .alignItems(HorizontalAlign.Start)
166
167                Blank()
168
169                Row()
170                  .width(12)
171                  .height(12)
172                  .margin({ right: 15 })
173                  .border({
174                    width: { top: 2, right: 2 },
175                    color: 0xcccccc
176                  })
177                  .rotate({ angle: 45 })
178              }
179              .borderRadius(15)
180              .shadow({ radius: 100, color: '#ededed' })
181              .width('90%')
182              .alignItems(VerticalAlign.Center)
183              .padding({ left: 15, top: 15, bottom: 15 })
184              .backgroundColor(Color.White)
185            }
186            .width('100%')
187            .onClick(() => {
188              this.pathInfos.pushPathByName(`${item}`, '详情页面参数')
189            })
190          }, (item: string): string => item)
191        }
192        .listDirection(Axis.Vertical)
193        .edgeEffect(EdgeEffect.Spring)
194        .sticky(StickyStyle.Header)
195        .chainAnimation(false)
196        .width('100%')
197      }
198      .navDestination(this.PageMap)
199      .width('100%')
200      .mode(NavigationMode.Auto)
201      .title('设置') // 设置标题文字
202    }
203    .size({ width: '100%', height: '100%' })
204    .backgroundColor(0xf4f4f5)
205  }
206}
207```
208
209
210
211![zh-cn_image_0000001588458252](figures/zh-cn_image_0000001588458252.gif)
212
213