✅ Navigation 页面导航容器（包含标题栏）

@Entry
@Component
struct MainPage {
  build() {
    Navigation({
      title: '导航标题',        // 页面顶部标题
      hideBackButton: false,   // 是否隐藏返回按钮
      hideTitleBar: false,     // 是否隐藏整个标题栏
      mode: NavigationMode.Auto, // 标题栏模式（Auto, Mini, Stack）
      type: NavigationType.Stack // 页面堆栈类型
    }) {
      Column() {
        Text('这里是主内容')
          .fontSize(20)
          .margin(20)

        Button('跳转页面')
          .onClick(() => {
            router.pushUrl('pages/DetailPage') // 跳转到指定页面
          })
      }
    }
  }
}

✅ Navigator 页面路由容器（用于页面跳转）

@Entry
@Component
struct AppNav {
  build() {
    Navigator({
      initialRoute: 'pages/MainPage', // 初始路由页面
      type: NavigationType.Stack // 导航类型：Stack | Tab | Dialog 等
    })
  }
}

✅ Tabs 标签页容器

@State currentIndex: number = 0

Tabs({
  barPosition: BarPosition.Top,   // 标签栏位置（Top、Bottom、Start、End）
  index: this.currentIndex,       // 当前选中的标签索引
  scrollable: false,              // 是否可横向滚动标签
  animationDuration: 300,         // 标签页切换动画时间
  onChange: (index: number) => {  // 标签切换事件
    this.currentIndex = index
    console.log('当前选中索引:', index)
  }
}) {
  TabContent({ tabBar: { text: '首页', icon: $r('app.media.home') } }) {
    Column() {
      Text('首页内容')
        .fontSize(18)
    }
  }

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

  TabContent({ tabBar: { text: '我的', icon: $r('app.media.user') } }) {
    Column() {
      Text('个人中心内容')
        .fontSize(18)
    }
  }
}

✅ TabContent 单个标签页内容（配合 Tabs 使用）

// Tabs 容器中使用 TabContent 定义各个页签内容
TabContent({
  tabBar: {
    text: '设置',             // 标签文字
    icon: $r('app.media.setting') // 标签图标资源
  }
}) {
  Column() {
    Text('设置页面内容')
      .fontSize(18)
  }
}

✅ Navigation + Tabs 组合示例（含完整备注）

@Entry
@Component
struct MainPage {
  @State currentIndex: number = 0 // 当前选中标签页索引

  build() {
    // 外部导航容器：用于展示标题栏、返回按钮等
    Navigation({
      title: '首页导航',              // 页面顶部标题
      hideBackButton: true,          // 隐藏返回按钮（首页可隐藏）
      hideTitleBar: false,           // 显示标题栏
      mode: NavigationMode.Auto,     // 自动适配标题栏样式
      type: NavigationType.Stack     // 页面堆栈管理方式
    }) {
      // 内部标签页容器
      Tabs({
        barPosition: BarPosition.Bottom,   // 标签栏位置（底部）
        index: this.currentIndex,          // 当前标签页索引绑定
        scrollable: false,                 // 标签不可滚动
        animationDuration: 300,            // 标签页切换动画时间（ms）
        onChange: (index: number) => {
          this.currentIndex = index
          console.log('切换到标签页:', index)
        }
      }) {
        // 第一个标签页内容
        TabContent({
          tabBar: {
            text: '首页',                     // 标签文字
            icon: $r('app.media.home')       // 图标资源
          }
        }) {
          Column() {
            Text('欢迎来到首页')
              .fontSize(20)
              .padding(20)
          }
        }

        // 第二个标签页内容
        TabContent({
          tabBar: {
            text: '发现',
            icon: $r('app.media.explore')
          }
        }) {
          Column() {
            Text('这里是发现页内容')
              .fontSize(20)
              .padding(20)
          }
        }

        // 第三个标签页内容
        TabContent({
          tabBar: {
            text: '我的',
            icon: $r('app.media.user')
          }
        }) {
          Column() {
            Text('个人中心页面')
              .fontSize(20)
              .padding(20)

            Button('跳转设置页')
              .margin({ top: 20 })
              .onClick(() => {
                router.pushUrl('pages/SettingPage') // 跳转页面（需在 pages 下创建 SettingPage）
              })
          }
        }
      }
    }
  }
}

✅ 页面跳转目标示例（SettingPage.ets）

@Component
struct SettingPage {
  build() {
    Navigation({
      title: '设置',             // 设置页标题
      hideBackButton: false,    // 显示返回按钮
      type: NavigationType.Stack
    }) {
      Column() {
        Text('这里是设置页')
          .fontSize(20)
          .padding(20)
      }
    }
  }
}

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

@Entry
@Component
struct AppNav {
  build() {
    Navigator({
      initialRoute: 'pages/MainPage', // 初始启动页
      type: NavigationType.Stack
    })
  }
}