? Navigation 頁面導(dǎo)航容器（包含標(biāo)題欄）

@Entry
@Component
struct MainPage {
  build() {
    Navigation({
      title: '導(dǎo)航標(biāo)題',        // 頁面頂部標(biāo)題
      hideBackButton: false,   // 是否隱藏返回按鈕
      hideTitleBar: false,     // 是否隱藏整個(gè)標(biāo)題欄
      mode: NavigationMode.Auto, // 標(biāo)題欄模式（Auto, Mini, Stack）
      type: NavigationType.Stack // 頁面堆棧類型
    }) {
      Column() {
        Text('這里是主內(nèi)容')
          .fontSize(20)
          .margin(20)

        Button('跳轉(zhuǎn)頁面')
          .onClick(() => {
            router.pushUrl('pages/DetailPage') // 跳轉(zhuǎn)到指定頁面
          })
      }
    }
  }
}

? Navigator 頁面路由容器（用于頁面跳轉(zhuǎn)）

@Entry
@Component
struct AppNav {
  build() {
    Navigator({
      initialRoute: 'pages/MainPage', // 初始路由頁面
      type: NavigationType.Stack // 導(dǎo)航類型：Stack | Tab | Dialog 等
    })
  }
}

? Tabs 標(biāo)簽頁容器

@State currentIndex: number = 0

Tabs({
  barPosition: BarPosition.Top,   // 標(biāo)簽欄位置（Top、Bottom、Start、End）
  index: this.currentIndex,       // 當(dāng)前選中的標(biāo)簽索引
  scrollable: false,              // 是否可橫向滾動(dòng)標(biāo)簽
  animationDuration: 300,         // 標(biāo)簽頁切換動(dòng)畫時(shí)間
  onChange: (index: number) => {  // 標(biāo)簽切換事件
    this.currentIndex = index
    console.log('當(dāng)前選中索引:', index)
  }
}) {
  TabContent({ tabBar: { text: '首頁', icon: $r('app.media.home') } }) {
    Column() {
      Text('首頁內(nèi)容')
        .fontSize(18)
    }
  }

  TabContent({ tabBar: { text: '消息', icon: $r('app.media.message') } }) {
    Column() {
      Text('消息內(nèi)容')
        .fontSize(18)
    }
  }

  TabContent({ tabBar: { text: '我的', icon: $r('app.media.user') } }) {
    Column() {
      Text('個(gè)人中心內(nèi)容')
        .fontSize(18)
    }
  }
}

? TabContent 單個(gè)標(biāo)簽頁內(nèi)容（配合 Tabs 使用）

// Tabs 容器中使用 TabContent 定義各個(gè)頁簽內(nèi)容
TabContent({
  tabBar: {
    text: '設(shè)置',             // 標(biāo)簽文字
    icon: $r('app.media.setting') // 標(biāo)簽圖標(biāo)資源
  }
}) {
  Column() {
    Text('設(shè)置頁面內(nèi)容')
      .fontSize(18)
  }
}

? Navigation + Tabs 組合示例（含完整備注）

@Entry
@Component
struct MainPage {
  @State currentIndex: number = 0 // 當(dāng)前選中標(biāo)簽頁索引

  build() {
    // 外部導(dǎo)航容器：用于展示標(biāo)題欄、返回按鈕等
    Navigation({
      title: '首頁導(dǎo)航',              // 頁面頂部標(biāo)題
      hideBackButton: true,          // 隱藏返回按鈕（首頁可隱藏）
      hideTitleBar: false,           // 顯示標(biāo)題欄
      mode: NavigationMode.Auto,     // 自動(dòng)適配標(biāo)題欄樣式
      type: NavigationType.Stack     // 頁面堆棧管理方式
    }) {
      // 內(nèi)部標(biāo)簽頁容器
      Tabs({
        barPosition: BarPosition.Bottom,   // 標(biāo)簽欄位置（底部）
        index: this.currentIndex,          // 當(dāng)前標(biāo)簽頁索引綁定
        scrollable: false,                 // 標(biāo)簽不可滾動(dòng)
        animationDuration: 300,            // 標(biāo)簽頁切換動(dòng)畫時(shí)間（ms）
        onChange: (index: number) => {
          this.currentIndex = index
          console.log('切換到標(biāo)簽頁:', index)
        }
      }) {
        // 第一個(gè)標(biāo)簽頁內(nèi)容
        TabContent({
          tabBar: {
            text: '首頁',                     // 標(biāo)簽文字
            icon: $r('app.media.home')       // 圖標(biāo)資源
          }
        }) {
          Column() {
            Text('歡迎來到首頁')
              .fontSize(20)
              .padding(20)
          }
        }

        // 第二個(gè)標(biāo)簽頁內(nèi)容
        TabContent({
          tabBar: {
            text: '發(fā)現(xiàn)',
            icon: $r('app.media.explore')
          }
        }) {
          Column() {
            Text('這里是發(fā)現(xiàn)頁內(nèi)容')
              .fontSize(20)
              .padding(20)
          }
        }

        // 第三個(gè)標(biāo)簽頁內(nèi)容
        TabContent({
          tabBar: {
            text: '我的',
            icon: $r('app.media.user')
          }
        }) {
          Column() {
            Text('個(gè)人中心頁面')
              .fontSize(20)
              .padding(20)

            Button('跳轉(zhuǎn)設(shè)置頁')
              .margin({ top: 20 })
              .onClick(() => {
                router.pushUrl('pages/SettingPage') // 跳轉(zhuǎn)頁面（需在 pages 下創(chuàng)建 SettingPage）
              })
          }
        }
      }
    }
  }
}

? 頁面跳轉(zhuǎn)目標(biāo)示例（SettingPage.ets）

@Component
struct SettingPage {
  build() {
    Navigation({
      title: '設(shè)置',             // 設(shè)置頁標(biāo)題
      hideBackButton: false,    // 顯示返回按鈕
      type: NavigationType.Stack
    }) {
      Column() {
        Text('這里是設(shè)置頁')
          .fontSize(20)
          .padding(20)
      }
    }
  }
}

? 路由配置入口（AppNav.ets）

@Entry
@Component
struct AppNav {
  build() {
    Navigator({
      initialRoute: 'pages/MainPage', // 初始啟動(dòng)頁
      type: NavigationType.Stack
    })
  }
}