ArkTS开发系列之导航 (2.5.2 页面组件导航）

上篇回顾: ArkTS开发系列之导航 (2.5.1 页面路由）

本篇内容：主要学习页面内组件导航

一、 知识储备

1. Navigation

• 一般作为页面的根容器，包括单页面、分栏和自适应三种显示模式。
  • 自适应模式 (NavigationMode.Auto) ，需要注意的是当设备宽度大于520vp时，Navigation组件采用分栏模式。反之采用单面模式

  @Entry
  @Component
  struct MyRouter {
    build(){
      Column(){
        Navigation(){
          ...
        }
        .mode(NavigationMode.Auto)
      }
    }
  }
  

  • 单页面模式（NavigationMode.Stack）
  • 分栏模式（NavigationMode.Split）
• NavRouter是配合Navigation使用的特殊子组件，默认提供点击响应处理。有且仅有两个子组件，其中第二个子组件必须是NavDestination。
• 常用函数

    Navigation() {
      TextInput({ placeholder: '请输入...' })
        .width('90%')
        .height(40)
        .backgroundColor('#ffffff')
  
      List({ space: 12 }) {
        ForEach(this.arr, item => {
          ListItem() {
            NavRouter() {
              Text("NavRouter" + item)
                .width('100%')
                .height(72)
                .backgroundColor(Color.White)
                .borderRadius(36)
                .fontSize(16)
                .fontWeight(500)
                .textAlign(TextAlign.Center)
              NavDestination() {
                Text(`NavDestinationContent${item}`)
              }
              .title(`NavDestinationTitle${item}`)
            }
          }
        })
      }
    }
    .title('主标题')
    .mode(NavigationMode.Stack)//导航模式
    .titleMode(NavigationTitleMode.Mini)//标题模式
    .menus([  //设置菜单
      { value: "", icon: './../../../resources/base/media/icon.png', action: () => {
      } },
      { value: "", icon: './../../../resources/base/media/icon.png', action: () => {
      } }
    ])
    .toolBar({ items: [  //设置工具栏
      { value: 'func', icon: './../../../resources/base/media/icon.png', action: () => {
      } },
      { value: 'func', icon: './../../../resources/base/media/icon.png', action: () => {
      } }
    ] })
  

2. Tabs

• 常用函数

.vertical(false) //tabs垂直与横向设置
    .scrollable(true) //禁止页面滑动
    .barMode((BarMode.Fixed)) //Fixed 固定    Scrollable  可以滑动，当tab多时用
    .onChange((index) => { //页面滑动监听

二、 效果一览

三、 源码剖析

@Entry
@Component
struct MyTabs {
  private tabsController: TabsController = new TabsController();
  @State currentIndex: number = 0;

  @Builder TabBuild(title: string, targetIndex: number, SelectedImg: Resource, normalImg: Resource) {
    Column() { //自定义tab
      Image(this.currentIndex == targetIndex ? SelectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontSize(16).fontColor(this.currentIndex == targetIndex ? 0x00c250 : 0x333333)
    }
    .width('100%')
    .height(48)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      console.error(`targetIndex is ${targetIndex}`)
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex)
    })
  }

  build() {
    Tabs({
      barPosition: BarPosition.End,
      controller: this.tabsController
    }) { //end start  首尾位置设置   controller 绑定tabs的控制器
      TabContent() { //内容页面组件
        MyNavigation().backgroundColor(0xf7f7f7)
      }
      .tabBar(this.TabBuild('首页', 0, $r('app.media.ic_hm_home_selected'), $r('app.media.ic_hm_home_normal')))

      TabContent() {
        Text('直播').fontSize(44)
      }
      .tabBar(this.TabBuild('直播', 1, $r('app.media.ic_hm_living_selected'), $r('app.media.ic_hm_living_normal')))

      TabContent() {
        Text('朋友圈').fontSize(44)
      }
      .tabBar(this.TabBuild('朋友圈', 2, $r('app.media.ic_hm_friend_selected'), $r("app.media.ic_hm_friend_normal")))

      TabContent() {
        Text('我的').fontSize(44)
      }
      .tabBar(this.TabBuild('我的', 3, $r('app.media.ic_hm_my_selected'), $r('app.media.ic_hm_my_normal')))
    }
    .vertical(false) //tabs垂直与横向设置
    .scrollable(true) //禁止页面滑动
    .barMode((BarMode.Fixed)) //Fixed 固定    Scrollable  可以滑动，当tab多时用
    .onChange((index) => { //页面滑动监听
      console.error(`this is ${index}`)
      this.currentIndex = index;
      // this.tabsController.changeIndex(this.currentIndex)
    })
  }
}

@Component
struct MyNavigation {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: '请输入...' })
          .width('90%')
          .height(40)
          .backgroundColor('#ffffff')

        List({ space: 12 }) {
          ForEach(this.arr, item => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width('100%')
                  .height(72)
                  .backgroundColor(Color.White)
                  .borderRadius(36)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text(`NavDestinationContent${item}`)
                }
                .title(`NavDestinationTitle${item}`)
              }
            }
          })
        }
      }
      .title('主标题')
      .mode(NavigationMode.Stack)
      .titleMode(NavigationTitleMode.Mini)
      .menus([
        { value: "", icon: './../../../resources/base/media/icon.png', action: () => {
        } },
        { value: "", icon: './../../../resources/base/media/icon.png', action: () => {
        } }
      ])
      .toolBar({ items: [
        { value: 'func', icon: './../../../resources/base/media/icon.png', action: () => {
        } },
        { value: 'func', icon: './../../../resources/base/media/icon.png', action: () => {
        } }
      ] })
    }
  }
}