• Navigation组件一般作为页面的根容器，包括单页面、分栏和自适应三种显示模式。同时，Navigation提供了属性来设置页面的标题栏、工具栏、导航栏等。
  Navigation组件的页面包含主页和内容页。主页由标题栏、内容区和工具栏组成，可在内容区中使用NavRouter子组件实现导航栏功能。内容页主要显示NavDestination子组件中的内容。
  NavRouter是配合Navigation使用的特殊子组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。NavRouter有且仅有两个子组件，其中第二个子组件必须是NavDestination。NavDestination是配合NavRouter使用的特殊子组件，用于显示Navigation组件的内容页。当开发者点击NavRouter组件时，会跳转到对应的NavDestination内容区

页面模式设置

• 自适应模式
  Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。

• 单页面模式

  
  0000000000011111111.20231121183907.22083766261129926323372459598762.png

• 分栏模式

  
  0000000000011111111.20231121183907.80686546974892578856180834138451.png

书城 demo

import { TabBars } from './TabBars'

const TAG = "huxiubo";


@Entry
@Component
struct Index {

  menusCallBack1() {
    console.info(TAG, `call menusCallBack1`);
  }

  menusCallBack2() {
    console.info(TAG, `call menusCallBack2`);
  }

  menusCallBack3() {
    console.info(TAG, `call menusCallBack3`);
  }

  toolBarCallBack1() {
    console.info(TAG, `call toolBarCallBack1`);
  }

  toolBarCallBack2() {
    console.info(TAG, `call toolBarCallBack2`);
  }

  toolBarCallBack3() {
    console.info(TAG, `call toolBarCallBack3`);
  }

  build() {
    Row() {
      Navigation() {
        Column() {
          TabBars()
        }
      }
      .size({width:"100%", height:"100%"})
      .title("掌阅书城")
      .titleMode(NavigationTitleMode.Free)
      .menus([
        {value: "",icon: "../resources/base/media/icon.png",  action: this.menusCallBack1},
        {value: "",icon: "../resources/base/media/icon_read_setting_space_default.png", action: this.menusCallBack2},
        {value: "",icon: "../resources/base/media/icon_read_style_more.png", action: this.menusCallBack3},
      ])
      .toolBar({items: [
        {value: "func", icon: "../resources/base/media/icon.png", action: this.toolBarCallBack1},
        {value: "func", icon: "../resources/base/media/icon.png", action: this.toolBarCallBack2},
        {value: "func", icon: "../resources/base/media/icon.png", action: this.toolBarCallBack3}
      ]})
    }
    .backgroundColor('#f1f3f5')
  }
}

TabBars

@Component
export struct TabBars {
  @State tabsIndex: number = 0;
  @State initBarData : string[] = ["精选", "漫画", "频道", "频道1","得到"]

  @Builder
  tabBarBuilder (content:string, index: number) {
     Column() {
       Text(content)
         .fontSize(this.tabsIndex === index ? 20: 16)
         .fontColor(this.tabsIndex === index ? "#000" : "#666")
     }
  }

  build() {
    Tabs() {
      ForEach(this.initBarData, (item: string, index:number) => {
          TabContent() {
            Column() {
              Text(item)
                .fontSize(80)
            }
            .justifyContent(FlexAlign.Center)
            .width("100%")
            .height("100%")
          }
          .tabBar(this.tabBarBuilder(item, index !== undefined? index:0 ))
      })
    }
    .onChange((index: number) => {
      this.tabsIndex = index
    })
  }
}

微信图片_20231220190811.png