当前位置：首页 > news >正文

鸿蒙原生开发手记：徒步迹 - 路线详情页布局实现

news 2026/7/17 0:33:20

鸿蒙原生开发手记：徒步迹 - 路线详情页布局实现

构建丰富的路线详情展示页面

一、前言

路线详情页展示路线的完整信息，包括图片、基本数据、途经点、照片墙等。本文实现多 Tab 详情页结构。

二、页面架构

顶部图片区域 ↓ 基本信息卡片（标题、距离、时间等） ↓ Tab切换（路线详情 / 沿途照片 / 路书） ↓ 内容区域（根据Tab切换）

三、核心代码

@Entry @Component struct RouteDetailPage { @State selectedTab: number = 0; @State routeId: number = 0; aboutToAppear(): void { const params = router.getParams() as Record<string, Object>; this.routeId = params['routeId'] as number; } build() { Column() { // 顶部图片 Stack() { Column() .width('100%').height(220) .backgroundColor('#4CAF50'); Row() { Image($r('app.media.app_icon')) .width(24).height(24) .onClick(() => router.back()); Text('').layoutWeight(1); } .width('100%') .padding({ left: 16, right: 16, top: 12 }); } .width('100%').height(220); // 基本信息卡片 this.InfoCard(); // Tab 切换栏 this.TabBar(); // 内容区域 this.TabContent(); } .width('100%').height('100%') .backgroundColor('#F5F5F5'); } @Builder InfoCard() { Column() { Text('徒步路线') .fontSize(22).fontWeight(FontWeight.Bold); Text('这是一条风景优美的徒步路线') .fontSize(14).fontColor('#666').margin({ top: 6 }); Row() { Text('长度: 5km').fontSize(13).fontColor('#666'); Text('耗时: 2h').fontSize(13).fontColor('#666').margin({ left: 16 }); Text('爬升: 300m').fontSize(13).fontColor('#666').margin({ left: 16 }); } .margin({ top: 10 }); } .width('100%').padding(16) .backgroundColor('#FFF') .borderRadius({ topLeft: 20, topRight: 20 }) .margin({ top: -20 }); } @Builder TabBar() { Row() { this.TabItem('路线详情', 0); this.TabItem('沿途照片', 1); this.TabItem('路书', 2); } .padding({ left: 16, right: 16 }) .backgroundColor('#FFF'); } @Builder TabItem(label: string, index: number) { Column() { Text(label) .fontSize(14) .fontColor(this.selectedTab === index ? '#4CAF50' : '#666') .fontWeight(this.selectedTab === index ? FontWeight.Medium : FontWeight.Normal); Divider() .width('50%').height(2) .color(this.selectedTab === index ? '#4CAF50' : Color.Transparent) .margin({ top: 8 }); } .layoutWeight(1) .padding({ top: 8, bottom: 4 }) .alignItems(HorizontalAlign.Center) .onClick(() => { this.selectedTab = index; }); }