##Harmony OS Next ##Ark Ts ##教育
本文适用于教育科普行业进行学习，有错误之处请指出我会修改。
✨ 核心价值提炼：
三合一布局模式：单栏/分栏/自适应自由切换
跨包跳转黑科技：组件级路由丝滑转场
多端适配神器：自动响应屏幕尺寸变化
导航栏 DIY：标题/菜单/工具栏随心配
🎮 一、Navigation 初体验
组件定位：路由导航的宇宙中心🌌 👉 作为页面根容器（@Entry） 👉 三大显示模式任君选择：
版本进化史： ⚠️ API9+必须搭配 NavRouter → API10+推荐 NavPathStack
🎨 二、显示模式深度解析
1️⃣ 自适应模式（Smart Mode）
Navigation() { // 内容区代码...}.mode(NavigationMode.Auto)
复制代码
📌 小贴士：
2️⃣ 分栏模式实战代码
@Entry@Componentstruct SplitModeExample { // 状态管理部分... build() { Column() { Navigation(this.pageInfos) { // 搜索框+列表布局 TextInput().searchStyle() List().dynamicItems() } .title("主标题") .mode(NavigationMode.Split) // 关键设置！ .menus([...]) // 菜单栏配置 .toolbarConfiguration([...]) // 工具栏配置 } }}
复制代码
💡 代码亮点：
动态列表渲染 ForEach
多页面路由管理 NavPathStack
工具栏组件复用技巧
🎯 三、导航栏定制秘籍
标题栏双模式对比
菜单栏黄金法则
let menuItem = {'value': "", 'icon': "路径.svg", action: () => {}}
.menus([ menuItem, menuItem, menuItem // 竖屏最多3个！])
复制代码
⚠️ 避坑指南：
🛠️ 四、工具类组件最佳实践
工具栏配置样例
let toolItem = {'value': "功能", 'icon': "./tools.svg"}
.toolbarConfiguration([ toolItem, toolItem, toolItem // 底部工具栏三件套])
复制代码
🌟 效果预览： imagelink
🚀 五、路由管理进阶技巧
页面跳转核心代码
// 页面跳转触发this.pageInfos.pushPath({name: "目标页面"})
// 返回逻辑处理onBackPressed(() => { this.pageInfos.pop() // 优雅退场 return true})
复制代码
💡 调试技巧： console.log('pop结果:' + JSON.stringify(pop结果))
🌈 六、多端适配终极方案
🎁 开发福利： 一次编码自动适配所有设备，真正实现"Write Once, Run Anywhere"！
🤔 常见问题 QA： Q：如何隐藏导航栏？ A：使用.hideNavBar(true)轻松隐身
Q：不同 API 版本怎么选？ A：API10+优先 NavPathStack，旧项目用 NavRouter 过渡
📡 路由操作超能力手册 | 跳转栈管理+动态路由+生命周期全掌握！🚀
✨ 核心亮点速览：
🚀 一、路由操作全家桶
路由栈三大金刚：
返回操作宝典：
// 基础返回this.pageStack.pop()
// 花式返回.popToName("Home") // 回主页.popToIndex(2) // 回指定楼层.clear() // 一键清空栈
复制代码
高阶玩法：
// 页面替换术.replacePathByName("NewPage")
// 栈内大扫除.removeByName("OldPage")
// 栈元素位移.moveToTop("VIP页面")
复制代码
🛡️ 二、路由拦截系统
拦截回调三剑客：
this.pageStack.setInterception({ willShow: (from, to) => { // 路由重定向示例 if(to.name == 'VIP页面') { to.pathStack.replacePathByName("登录页") } }, didShow: () => {/* 跳转后操作 */}, modeChange: () => {/* 布局变化响应 */}})
复制代码
📌 避坑指南：
拦截时栈已发生变化
建议在 willShow 做主要逻辑
可用 type 判断跳转来源
⏳ 三、生命周期全图解
生命周期时序表：
页面状态监听术：
// 全局监听uiObserver.on('navDestinationUpdate', (info) => { console.log('页面状态变化:', JSON.stringify(info))})
// 组件内查询@Component struct MyComp { aboutToAppear() { const pageInfo = this.queryNavDestinationInfo() console.log("当前页面:", pageInfo?.name) }}
复制代码
🎭 四、转场动画黑科技
基础操作：
// 关闭全局动画pageStack.disableAnimation(true)
// 单次关闭动画pushPath({name:"Page"}, false)
复制代码
共享元素转场：
// 页面AImage($r('app.media.logo')) .geometryTransition('sharedLogo')
// 页面B Image($r('app.media.logo')) .geometryTransition('sharedLogo')
// 跳转时animateTo({duration:1000}, () => { pageStack.pushPath({name:'PageB'}, false)})
复制代码
🌐 五、跨包动态路由
系统路由表三步走：
配置 route_map.json
{ "routerMap": [{ "name": "PaymentPage", "pageSourceFile": "src/payment/PayPage.ets", "buildFunction": "PayPageBuilder" }]}
复制代码
创建 Builder 函数
// PayPage.ets@Builderexport function PayPageBuilder() { PayPage() // 业务组件}
复制代码
动态跳转
pageStack.pushPathByName("PaymentPage")
复制代码
路由表优势对比：
🚨 重要提醒
页面栈禁忌：
❌ 不要用生命周期管理路由栈
✅ 优先使用 NavPathStack API
弹窗页面秘籍：
.mode(NavDestinationMode.DIALOG).backgroundColor('rgba(0,0,0,0.5)') // 透明背景+独立生命周期
复制代码
1.
动态加载技巧
：
使用import()实现按需加载
HAR/HSP 模块化开发
路由配置与业务解耦
掌握这些神操作，Navigation 开发直接起飞！🛫 遇到问题随时回来查手册哦~ 😉
评论