鸿蒙原生开发手记徒步迹 - 路线详情页布局实现构建丰富的路线详情展示页面一、前言路线详情页展示路线的完整信息包括图片、基本数据、途经点、照片墙等。本文实现多 Tab 详情页结构。二、页面架构顶部图片区域 ↓ 基本信息卡片标题、距离、时间等 ↓ Tab切换路线详情 / 沿途照片 / 路书 ↓ 内容区域根据Tab切换三、核心代码Entry Component struct RouteDetailPage { State selectedTab: number 0; State routeId: number 0; aboutToAppear(): void { const params router.getParams() as Recordstring, 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; }); }四、总结详情页的多 Tab 设计合理组织了大量信息使用 Builder 拆分组件让代码结构清晰。配图区、文字区、数据区的组合是徒步路线详情页的典型布局。下一篇文章将实现海拔折线图的绘制。下一篇预告鸿蒙原生开发手记徒步迹 - 海拔折线图自定义绘制
鸿蒙原生开发手记徒步迹 - 路线详情页布局实现构建丰富的路线详情展示页面一、前言路线详情页展示路线的完整信息包括图片、基本数据、途经点、照片墙等。本文实现多 Tab 详情页结构。二、页面架构顶部图片区域 ↓ 基本信息卡片标题、距离、时间等 ↓ Tab切换路线详情 / 沿途照片 / 路书 ↓ 内容区域根据Tab切换三、核心代码Entry Component struct RouteDetailPage { State selectedTab: number 0; State routeId: number 0; aboutToAppear(): void { const params router.getParams() as Recordstring, 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; }); }四、总结详情页的多 Tab 设计合理组织了大量信息使用 Builder 拆分组件让代码结构清晰。配图区、文字区、数据区的组合是徒步路线详情页的典型布局。下一篇文章将实现海拔折线图的绘制。下一篇预告鸿蒙原生开发手记徒步迹 - 海拔折线图自定义绘制
)
