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

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

一、前言

路线详情页展示路线的完整信息，包括图片、基本数据、途经点、照片墙等。本文实现多 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; });
  }

四、总结

详情页的多 Tab 设计合理组织了大量信息，使用 @Builder 拆分组件让代码结构清晰。配图区、文字区、数据区的组合是徒步路线详情页的典型布局。

下一篇文章将实现海拔折线图的绘制。

下一篇预告：鸿蒙原生开发手记：徒步迹 - 海拔折线图自定义绘制