第7章：高级UI组件与自定义绘制

页面导航

7.2.1 导航基础概念

在ArkTS应用开发中，页面导航是实现多页面交互的核心机制。本节将介绍：

  • **单页面应用（SPA）**与多页面应用的区别
  • 导航栈（Navigation Stack）的工作原理
  • 常见的导航模式：Stack、Tab、Drawer等

7.2.2 使用Navigation组件

ArkTS提供了<Navigation>组件实现声明式路由：

@Entry
@Component
struct MainPage {
  build() {
    Navigation() {
      // 首页内容
      Column() {
        Text('Main Page').fontSize(30)
        NavigationLink('Go to Detail', { target: 'detail' })
      }
    }.title('Home')
  }
}

@Component
struct DetailPage {
  build() {
    Column() {
      Text('Detail Page').fontSize(30)
      Button('Back').onClick(() => router.back())
    }
  }
}

7.2.3 路由参数传递

实现页面间数据传递的三种方式：

  1. URL参数：router.pushUrl({ url: 'detail?id=123' })
  2. 命名路由参数：
    router.pushUrl({
  url: 'detail',
  params: { productId: 123 }
})
  3. 全局状态管理（适合复杂场景）

7.2.4 导航守卫

通过路由拦截实现权限控制：

router.beforeEach((to, from, next) => {
  if (to.url === '/admin' && !isLoggedIn()) {
    next('/login')
  } else {
    next()
  }
})

7.2.5 动态路由与懒加载

优化大型应用的加载性能：

// 路由配置
const routes = [
  {
    path: '/detail/:id',
    component: () => import('./DetailPage') // 懒加载
  }
]

7.2.6 常见问题解决方案

  • 页面返回刷新：使用onPageShow生命周期
  • 转场动画定制：
    router.pushUrl({
  url: 'detail',
  transition: { type: 'slide', duration: 300 }
})
  • **深层链接（Deep Link）**处理

最佳实践

  1. 遵循"一个路由对应一个业务模块"原则
  2. 对敏感路由添加权限校验
  3. 使用路由别名提高可维护性
  4. 在Pad/折叠屏设备上适配多窗口导航

扩展阅读：HarmonyOS的Page Ability与ArkTS导航组件的对比


这个Markdown内容包含：
1. 从基础概念到高级特性的完整知识体系
2. 实用的代码示例
3. 工程实践中的解决方案
4. 性能优化建议
5. 设备适配指导
可根据需要进一步扩展具体实现细节或添加示意图。
Last Updated::