7. 一个物联网Navigation应用实例
完整代码 (Index.ets)
请直接清空您的 Index.ets 并粘贴以下代码：
//Index.ets// ==========================================// 1. 定义详情页组件 (这是一个子组件，不是 Entry)// =========================================@Componentstruct LampDetailPage{// 1.1 通过 @Consume 获取父组件注入的路由栈，用于返回操作@Consume('pageStack')pageStack:NavPathStack;// 1.2 接收传递过来的参数 (这里我们只传一个字符串标题)@PropdeviceName:string='';@StatebrightnessValue:number=50;build(){// 1.3 必须使用 NavDestination 作为根节点NavDestination(){Column(){// --- 共享元素区域 ---// 注意：这里的 id 必须和主页的 id 完全一致 ('shared_lamp_id')Text('💡').fontSize(100)// 详情页字体变大.id('shared_lamp_id')// 【核心】共享元素 ID.margin({top:50,bottom:20})Text(this.deviceName).fontSize(24).fontColor('#333333')// --- 控制区域 ---Column(){Row(){Text('亮度').fontSize(16)Blank()Text(this.brightnessValue+'%').fontSize(16).fontColor('#FF9800')}.width('100%').margin({bottom:10})Slider({value:this.brightnessValue,min:0,max:100,step:1}).blockColor('#FF9800').trackColor('#E0E0E0').selectedColor('#FFCC80').showSteps(true).onChange((value:number)=>{this.brightnessValue=Math.round(value);})}.width('85%').padding(20).backgroundColor('#F5F5F5').borderRadius(16)Blank()// --- 返回按钮 ---Button('关闭设备').width('80%').height(50).fontSize(18).backgroundColor('#333333').onClick(()=>{// 1.4 调用路由栈返回上一页this.pageStack.pop();}).margin({bottom:40})}.width('100%').height('100%').backgroundColor(
