NAVIGATION及NAVIGATOR的使用1

张开发
• 2026/4/14 9:36:06 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

NAVIGATION及NAVIGATOR的使用1
智能家居控制台场景：主页是“全屋设备概览”，点击一个“智能台灯”图标，跳转到“台灯控制详情页”（调节亮度、颜色）。对比：Navigator（老派/简单）：像传统的遥控器，按一下按钮就切台，简单直接，适合简单层级。Navigation（新一代/强大）：像现代化的中控大屏，支持路由管理、转场动画、共享元素过渡（让灯泡图标从列表“飞”进详情页），适合复杂的IoT应用架构。场景准备：台灯数据模型首先，我们定义一个简单的数据类，用于在页面间传递设备信息。// DeviceInfo.etsexportclassDeviceInfo{id:string='';name:string='';isOn:boolean=false;brightness:number=50;// 亮度 0-100constructor(id:string,name:string){this.id=id;this.name=name;}}方法一：使用Navigator(简单跳转)从API version 13开始废弃，建议使用NavPathInfo替代。适用场景：简单的层级跳转，不需要复杂的路由栈管理，类似早期的 Weba标签或 Android Intent。在Index.ets中，我们用Navigator组件包裹台灯图标。import{DeviceInfo}from'./DeviceInfo';@Entry@Componentstruct Index{@Statelamp:DeviceInfo=newDeviceInfo('001','书房台灯');build(){Column(){Text('智能家 (Navigator版)').fontSize(24).fontWeight(FontWeight.Bold)// 使用 Navigator 包裹可点击区域Navigator({target:'pages/LampDetail',type:NavigationType.Push}){// 台灯卡片 UIColumn(){Text('💡').fontSize(40)Text(this.lamp.name).fontSize(18)}.width(150).

更多文章