NAVIGATION及NAVIGATOR的使用4

NAVIGATION使用实例

Navigation 组件扮演着核心导航容器的角色，主要实现以下功能：

1. 页面导航管理

• 导航栈管理：通过NavPathStack实例 (pageInfos) 管理页面的导航状态和历史记录
• 子页面切换：支持在不同子页面之间进行切换和导航
• 页面跳转：通过pushPath方法实现从首页跳转到子页面
  -

2. UI 结构组织

• 标题栏：通过.title('设置中心')设置顶部标题
• 主内容区域：包含搜索框和设置项列表
• 菜单：通过.menus()方法添加底部菜单选项
• 工具栏：通过.toolbarConfiguration()配置顶部工具栏

3. 子页面注册与构建

• 子页面注册：通过.navDestination(this.PageMap)注册子页面构建器
• 动态页面创建：根据路径名称动态创建对应的子页面
• 页面内容定义：通过pageOneTmp、pageTwoTmp、pageThreeTmp等组件定义子页面内容

4. 交互流程

1. 初始状态：显示带有搜索框和设置项列表的首页
2. 用户操作：点击列表中的设置项（如"网络设置"）
3. 导航触发：调用this.pageInfos.pushPath({ name: 'NavDestinationTitle' + item.id })
4. 页面切换：Navigation 组件根据路径名称创建并显示对应的子页面
5. 返回机制：子页面自动包含返回按钮，可返回上一页

5. 技术特点

• 声明式导航：使用构建器模式声明子页面
• 路径映射：通过路径名称映射到对应的子页面组件
• 状态管理：通过 NavPathStack 管理导航状态
• UI 定制：支持自定义标题、菜单和工具栏

代码示例分析

导航栈初始化

pageInfos:NavPathStack=newNavPathStac