article/002/index.md · qincji/ZeroOneApp

# 第2篇：如何使用Navigation+tab搭建路由页面？

> 本节简单实现使用一个Navigation来管理所有的页面：主要实现：启动页-》主页（多页面）-》二级页面

## 1.定义全局唯一的`@Entry`

我们新建一个项目之后，就把`Index`改成`EntryView`吧，然后需要修改的地方：

- `ets/entryability/EntryAbility`
- `ets/resources/base/profile/main_pages`
- `ets/pages/EntryView`代码如下：

```c
@Entry
@Component
struct EntryView {
    build() {
    }
}
```

## 2.定义全局唯一的`Navigation`

实现其实也很简单，总共就分三步：

### 2.1.创建路由管理对象

```c
@Provide('pageStack') pageStack: NavPathStack = new NavPathStack();
```

然后其他页面通过获取该`pageStack`对象进行页面跳转，如：

```c
@Consume('pageStack') pageStack: NavPathStack
const navPath: NavPathInfo = new NavPathInfo('AboutMePage', undefined);
this.pageStack.pushPath(navPath);
```

### 2.2.定义跳转到其他页面的`@Builder`，通过`name`判断是应该创建那个组件（`@Component`）

```c
@Builder
pageMap(name: string, param: object) {
    if (name === 'abc/123') {
    //@Component对象
    } else if (name === 'jjj') {
    //@Component对象
    }
}
```

### 2.3.在`build`实现`Navigation`创建

```c
build() {
    Stack() {
      Navigation(this.pageStack) {
        //这里是主页的 @Component对象
      }
      .height('100%')
      .hideTitleBar(true)
      .navBarWidth('50%')
      .navDestination(this.pageMap)
      .mode(NavigationMode.Stack)
    }
    .alignContent(Alignment.BottomEnd)
    .height('100%')
  }
```

### 2.4.完整的代码如下：

```c
@Entry
@Component
struct EntryView {
  //二级页面通过：@Consume('pageStack') pageStack: NavPathStack  获取到路由管理进行页面跳转
  @Provide('pageStack') pageStack: NavPathStack = new NavPathStack();

@Builder
  pageMap(name: string, param: object) {
    //页面
  }

build() {
    Stack() {
      Navigation(this.pageStack) {
        //主页
      }
      .height('100%')
      .hideTitleBar(true)
      .navBarWidth('50%')
      .navDestination(this.pageMap)
      .mode(NavigationMode.Stack)
    }
    .alignContent(Alignment.BottomEnd)
    .height('100%')
    .backgroundColor("#F5F5F5")
  }
}
```

## 3.定义tab+主页（三个tab页）

### 3.1.首先我们先创建3个组件，分别叫：'首页', '工具', '我的' 好了。比如：首页

```c
@Component
export struct HomePage {
  build() {
    Column() {
      Text('这是首页').fontSize(35)
    }
    .width('100%')
    .height('100%')
  }
}
```

### 3.2.然后我们再创建底部tabs栏

```c
  @Builder
  tabBuilder() { //自定义 tab
    Row() {
      ForEach(['首页', '工具', '我的'], (item: string, index) => {
        Column() {//这里可以自己封装图标等
          Text(item)
            .fontColor(this.selectIndex === index ? Color.Red : Color.Black)
            .fontSize(this.selectIndex === index ? 25 : 18)
        }
        .height("100%")
        .layoutWeight(1)
        .justifyContent(FlexAlign.End)
        .padding({ top: 5, bottom: 5 })
        .onClick(() => {
          this.selectIndex = index;
        })
      })
    }
    .height(50)
    .width('100%')
  }
```

### 3.3.然后我们就可以组合起来了（方式一）

```c
    Navigation(this.pageStack) {
        if (this.selectIndex === 0) {
          HomePage()
        } else if (this.selectIndex === 1) {
          ToolPage()
        } else if (this.selectIndex === 2) {
          MyPage()
        }
      }
      .height('100%')
      .hideTitleBar(true)
      .navBarWidth('50%')
      .navDestination(this.pageMap)
      .mode(NavigationMode.Stack)
      .hideNavBar(false)
      .toolbarConfiguration(this.tabBuilder)
```

### 3.4.然后我们就可以组合起来了（方式二）

```c
    Navigation(this.pageStack) {
       Column() {
              Stack() {
                if (this.selectIndex === 0) {
                  HomePage()
                } else if (this.selectIndex === 1) {
                  ToolPage()
                } else if (this.selectIndex === 2) {
                  MyPage()
                }
              }
              .width('100%')
              .layoutWeight(1)
              this.tabBuilder() //TODO- 这 与 .toolbarConfiguration(this.tabBuilder) 二选一
            }
            .height('100%')
      }
      .height('100%')
      .hideTitleBar(true)
      .navBarWidth('50%')
      .navDestination(this.pageMap)
      .mode(NavigationMode.Stack)
      // .hideNavBar(false)
      // .toolbarConfiguration(this.tabBuilder)
```

**上面的方式适用于，3个页面切换后，前一个页面会被销毁掉。要不被销毁我们采用下面的方式**

### 3.5.创建`MainPage`管理tabs+三个页面：

```c
@Component
export struct MainPage {
  @State selectIndex: number = 0;

build() {
    Column() {
      Stack() {
        Tabs({ index: this.selectIndex, barPosition: BarPosition.End }) {
          ForEach(['首页', '工具', '我的'], (item: string, index: number) => {
            TabContent() {
              if (index === 0) {
                HomePage()
              } else if (index === 1) {
                ToolPage()
              } else if (index === 2) {
                MyPage()
              }
            }
            .tabBar(this.buildTabs(item, index))
          }, (item: string, index?: number) => index + JSON.stringify(item))
        }
        .barHeight(50)
        .onTabBarClick((index: number) => {
          this.selectIndex = index
        })
      }
      .width('100%')
      .layoutWeight(1)

this.tabBuilder()//上面一样的代码
    }
    .height('100%')
  }
}
```

### 3.6.然后`EntryView`修改成：

```c
    Navigation(this.pageStack) {
        MainPage()
      }
      .height('100%')
      .hideTitleBar(true)
      .navBarWidth('50%')
      .navDestination(this.pageMap)
      .mode(NavigationMode.Stack)
```

## 4.启动页在首页之前，怎么公用一个`Navigation`实现呢？

其实答案在上面已经有了，那就是在`Navigation`内实现控制显示那个组件。我们先定义启动页为：`SplashPage`。

### 4.1.增加启动页组件加载的判断：

```c
@State @Watch('onSplashPageFinish') isSplashPage: boolean = true;

onSplashPageFinish() {
//启动页结束后进行操作，如请求网络等
}
```

> 注意：我们通过`@Watch`监听`isSplashPage`变量的变化，如果变化了会通知`onSplashPageFinish`函数。@State @Watch 顺序不能搞反了！

### 4.2.然后在`Navigation`增加启动页的判断：

```c
    Navigation(this.pageStack) {
        if (this.isSplashPage) {
          SplashPage({ isSplashPage: this.isSplashPage })
        } else {
           MainPage()
        }
      }
      .height('100%')
      .hideTitleBar(true)
      .navBarWidth('50%')
      .navDestination(this.pageMap)
      .mode(NavigationMode.Stack)
```

### 4.3.`SplashPage`页面如下：

```c
@Component
export struct SplashPage {
  @Link isSplashPage: boolean; //双向绑定
  @State num: number = 1;
  private timerId: number = 0;

aboutToAppear(): void {
    this.timerId = setInterval(() => { //定时器
      if (this.num === 4) {
        clearInterval(this.timerId);
        this.gotoHome();
      }
      this.num += 1;
    }, 500)
  }

build() {
    Stack() {
      Text(`这是启动广告页--->${this.num}`).fontSize(35)
    }
    .width('100%')
    .height('100%')
  }

private gotoHome() {
    this.isSplashPage = false
  }
}
```

## 5.跳转到其他二级页面

### 5.1.这里我们创建`关于我`的页面：

```c
@Component
export struct AboutMePage {
  build() {
    NavDestination() {
      Stack() {
        Text('这是关于我的页面').fontSize(35)
      }
      .width('100%')
      .height('100%')
    }
    .mode(NavDestinationMode.STANDARD)
    .hideTitleBar(true)
  }
}
```

### 5.2.然后去`pageMap`判断什么时候创建：

```c
 @Builder
  pageMap(name: string, param: object) {
    if (name === 'AboutMePage') {
      AboutMePage()
    } 
  }
```

### 5.3.最后我们在首页增加按钮进行跳转：

```c
@Component
export struct HomePage {
  @Consume('pageStack') pageStack: NavPathStack;

build() {
    Column() {
      Text('这是首页').fontSize(35)

Button('去关于我的页面')
        .onClick(() => {
          const navPath: NavPathInfo = new NavPathInfo('AboutMePage', undefined);
          this.pageStack.pushPath(navPath);
        })
    }
    .width('100%')
    .height('100%')
  }
}
```

> 注意：`NavDestination`节点必须得有，可以在页面中定义`pageMap`中定义，详细看demo。

**到这里，所有的内容已经结束了！本章的完整源码已经上传到gitee了：[鸿蒙应用0-1开发](https://gitee.com/qincji/ZeroOneApp)。**

qincji/ZeroOneApp

简介

发行版

贡献者

语言

近期动态

qincji/ZeroOneApp .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

语言

近期动态

搜索帮助

qincji/ZeroOneApp