HarmonyOS应用基础阶段- 09、综合案例-仿携程旅行口碑榜

海的诗篇_

已于 2025-06-05 20:49:19 修改

阅读量1.1k

点赞数 22

分类专栏：鸿蒙应用开发从入门到精通文章标签： harmonyos 鸿蒙学习笔记华为 android

于 2025-06-05 17:15:11 首次发布

本文链接：https://blog.csdn.net/weixin_60536169/article/details/148454183

版权

鸿蒙应用开发从入门到精通专栏收录该内容

8 篇文章

订阅专栏

携程-口碑榜

在这里插入图片描述

口碑榜页面共计六个区域：banner区域、选择城市和目的地、商业选项菜单、热门项目选项、热门榜标题文字、热门景点列表

1、banner 区域

在这里插入图片描述
banner区域内容共计四部分：口碑榜 Logo、推荐榜单、评分规则、底部线条
注意：底部线条压在榜单图片上面，需要定位实现（position）

1.1 区域部分

实现思路：设置尺寸，添加背景图
banner - 区域布局

Column(){}
	.width('100%').height(264).backgroundImage('/images/banner.png')

1.2 口碑榜 Logo

实现思路：添加 Image 图片组件，并调整位置：margin、定位均可
banner - 口碑榜 Logo

// logo
Image('/images/log.png')
  .width(200)
  .offset({y: 70})

1.3 推荐榜单

水平滑动的榜单图片列表： List > ListItem > Column > Image
banner - 推荐榜单

// 推荐榜单
List() {
  ListItem() {
    Column() {
      Image('/images/rank.png')
        .width('34%')
    }
  }
  ListItem() {
    Column() {
      Image('/images/hot.png')
        .width('34%')
    }
  }
  ListItem() {
    Column() {
      Image('/images/scenery.png')
        .width('34%')
    }
  }
  ListItem() {
    Column() {
      Image('/images/ski.png')
        .width('34%')
    }
  }
}
  .listDirection(Axis.Horizontal)
  .position({y: 160})
  .height(82)
  .scrollBar(BarState.Off)

1.4 评分规则

实现思路：Text 组件，添加宽、高、半透明背景色、圆角边框等效果，并定位到区域最后侧

定位 X 轴偏移为 100%，translate 向左移动自身宽度尺寸的 100%
banner - 评分规则

// 评选规则
Text('评选规则')
  .position({x: '100%', y: '42%'})
  .translate({x: '-100%'})
  .fontColor('#F6DFC8')
  .fontSize(10)
  .width(54)
  .height(20)
  .backgroundColor('rgba(255, 224, 208, 0.3)')
  .borderRadius({ topLeft: 10, bottomLeft: 10})
  .textAlign(TextAlign.Center)

1.5 底部 Line

实现思路：添加 Image 组件，并定位到 banner 区域最底部

定位Y轴偏移 100%，translate 向上移动自身高度尺寸的 100%
banner - 底部Line

// 底部 line
Image($r('app.media.banner_line'))
  .width('100%')
  .position({x: 0, y: 226})

2、选择城市和目的地

共计 2 部分内容：城市选项和目的地选项
在这里插入图片描述

2.1 区域布局

实现思路：宽度 100%，主轴对齐方式 SpaceBetween
城市和目的地 - 区域布局

Row(){}
	.width('100%')
  .justifyContent(FlexAlign.SpaceBetween)
  .margin({top: 24, bottom: 24})
  .padding({left: 12, right: 12})

2.2 选择城市

实现思路：渐变颜色的 Row 组件包含文本组件 Text 和图片组件 Image
选择城市

Row({ space: 5}) {
  Text('北京')
    .fontColor('#5F2B0E').fontSize(16).fontWeight(600)

  Image($r('app.media.ic_public_arrow_down_0'))
    .width(16).height(16).backgroundColor('#5F2B0E').borderRadius(8).fillColor('#fff')
}
  .width(163)
  .height(36)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [['rgba(255, 226, 200, 1)', 0.0],['rgba(230, 175, 138, 1)', 0.5] ]
  })
  .borderRadius(18)
  .justifyContent(FlexAlign.Center)

2.3 口碑目的地

实现思路：Row 组件包含文本组件 Text

Row() {
  Text('口碑目的地').fontColor('#99532E').fontSize(16).fontWeight(500)
}
  .width(163)
  .height(36)
  .backgroundColor('rgba(248, 213, 184, 0.2)')
  .borderRadius(18)
  .justifyContent(FlexAlign.Center)

3、商业选项菜单

在这里插入图片描述
实现思路：Row 组件里面包含四个文本组件

三个白色背景组件外观相同：尺寸、背景色、圆角、阴影、居中对齐、文字大小
“景点”文本组件为渐变背景色，其他效果与白色组件相同
商业选项菜单

// 区域三：商业选项菜单
Row() {
  Text('酒店')
    .width(78).height(36).backgroundColor('#fff').borderRadius(4)
    .shadow({ radius: 8, color: 'rgba(47, 27, 14, 0.07)', offsetX:1, offsetY: 1, fill: true})
    .textAlign(TextAlign.Center).fontSize(16).fontWeight(400)
  Text('景点')
    .width(78).height(36).borderRadius(4).linearGradient({direction: GradientDirection.Right,colors: [['#CC9466', 0.0], ['#B36D3E', 1.0]]})
    .shadow({ radius: 8, color: 'rgba(47, 27, 14, 0.07)', offsetX:1, offsetY: 1, fill: true})
    .textAlign(TextAlign.Center).fontSize(16).fontWeight(400).fontColor('#fff')
  Text('夜游')
    .width(78).height(36).backgroundColor('#fff').borderRadius(4)
    .shadow({ radius: 8, color: 'rgba(47, 27, 14, 0.07)', offsetX:1, offsetY: 1, fill: true})
    .textAlign(TextAlign.Center).fontSize(16).fontWeight(400)
  Text('美食')
    .width(78).height(36).backgroundColor('#fff').borderRadius(4)
    .shadow({ radius: 8, color: 'rgba(47, 27, 14, 0.07)', offsetX:1, offsetY: 1, fill: true})
    .textAlign(TextAlign.Center).fontSize(16).fontWeight(400)
}
  .width('100%')
  .justifyContent(FlexAlign.SpaceBetween)
  .padding({left: 12, right: 12})

4、热门项目选项

实现思路：一行排列标题和选项
在这里插入图片描述

4.1 区域布局

实现思路：宽度 100%，标题和选项之间间距为35

Row({ space: 35}) {}
	.width('100%').padding({left: 12, right: 12})

4.2 热门标题

实现思路：Row > Image + Text

Row 组件设置背景图，背景图位置为底部
热门标题

// 标题
Row({ space: 3 }) {
  Image($r('app.media.ic_hot'))
    .width(16)
    .fillColor('#CC9466')
  Text('近期热门')
    .fontColor('#673915').fontSize(14).fontWeight(600)
}
  .margin({top: 15, bottom: 15})
  .backgroundImage('/images/select.png')
  .backgroundImagePosition(Alignment.Bottom)

4.3 选项

实现思路：选项区域宽度为父组件剩余尺寸的所有（layoutWeight），内容对齐方式为 SpaceBetween
选项

// 选项
Row() {
  Text('必打卡').fontSize(14).fontColor('#6666')
  Text('滑雪').fontSize(14).fontColor('#6666')
  Text('亲子').fontSize(14).fontColor('#6666')
  Text('自然风光').fontSize(14).fontColor('#6666')
}
  .layoutWeight(1).justifyContent(FlexAlign.SpaceBetween)

5、热门榜标题

在这里插入图片描述
代码实现

Text('北京近期热门景点榜')
  .fontSize(24).fontWeight(600).fontColor('#3D1A07').lineHeight(34)

6、热门景点列表

在这里插入图片描述
实现思路：List > ListItem

6.1 区域布局

实现思路：可垂直方向滚动的列表 List

List() {
  ListItem() {}
    .padding({ left:12,right:12,top:6,bottom:6 })
}
	.scrollBar(BarState.Off)

6.2 景点内容

6.2.1 景点内容布局

实现思路：Row组件包裹图片区域和文字区域

Row 组件：宽度100%、内边距 padding、白色背景色、圆角、阴影、交叉轴对齐方式为顶对齐

Row({ space: 8}){}
	.width('100%').padding(12).backgroundColor('#fff').borderRadius(5)
  .shadow({ radius: 8, color: 'rgba(0, 0, 0, 0.1)', offsetX: 0, offsetY: 2, fill: true})
  .alignItems(VerticalAlign.Top)

6.2.2 景点图片区域

在这里插入图片描述

实现思路：Row组件 > Image + Text

图片：尺寸、圆角
Text：背景图、定位到父组件左上角
代码实现

// 图片区域
Row() {
  Image('/images/universal.png')
    .width(88).height(175).borderRadius(5)
  Text('No.1')
    .width(50).height(28).backgroundImage('/images/no_icon.png').position({x: -4})
    .textAlign(TextAlign.Center).fontSize(11).fontWeight(700)
}

6.2.3 景点文字 - 布局

在这里插入图片描述
实现思路：使用 Column 组件实现垂直排列多行内容

宽度：占用所有父组件剩余宽度
每行间距为 6

Column({ space: 6}){}
	.layoutWeight(1)

6.2.4 景点文字 - 标题

实现思路：Row > 标题文字 Text + 收藏图标 Image

// 标题
Row() {
  Text('北京环球度假区')
    .fontSize(16).fontWeight(600).lineHeight(20).fontColor('#000')
  Image($r('app.media.ic_xihuan'))
    .width(18).fillColor('#444')
}
.width('100%').justifyContent(FlexAlign.SpaceBetween)

6.2.5 景点文字 - 评分

在这里插入图片描述
景点文字 - 评分

// 评分
Row({space: 8}) {
  Row() {
    Image($r('app.media.ic_huo'))
      .width(10).fillColor('#fff')
    Text('10')
      .fontSize(12).fontColor('#fff')
  }
  .padding(4).borderRadius(4)
  .linearGradient({direction: GradientDirection.Left, colors: [['#FF856E', 0.1], ['#FF902A', 1.0]]})
  Row({space: 3}) {
    Text('4.5分')
      .fontSize(12).fontColor('#666')
    Text('1.8w条点评')
      .fontSize(12).fontColor('#666')
  }
  Text('￥308起')
    .fontSize(12).fontColor('#666')
}
.width('100%')
.justifyContent(FlexAlign.Start)

6.2.6 景点文字 - 上榜理由

在这里插入图片描述
实现思路：文本 Text 缩进；图片和“上榜理由”定位

// 上榜理由
Row() {
  Text() {
    ImageSpan($r('app.media.dianzan'))
      .width(16)
    Span('上榜理由:')
      .fontSize(13)
      .fontWeight(600)
      .fontColor('#5f2b0e')
    Span('这个冬天来环球影城，一起沉浸在冬日独有的浪漫，漫步在雪花飞舞的雪天，创造专属于')
      .fontColor('#5f2b0e')
      .fontSize(13)
  }
    .maxLines(3)
    .textOverflow({overflow: TextOverflow.Ellipsis})
}
  .width('100%')
  .height(72)
  .backgroundColor('#fff7f1')
  .padding(8)
  .alignItems(VerticalAlign.Top)
  .borderRadius(4)

6.2.7 景点文字 - 标签

在这里插入图片描述

// 标签
Row({ space: 5}) {
  Text('嗨玩乐园')
    .padding(4).border({width: 1, color: '#99AECA'}).borderRadius(4).fontSize(10).fontColor('#99AECA')
  Text('游乐园')
    .padding(4).border({width: 1, color: '#99AECA'}).borderRadius(4).fontSize(10).fontColor('#99AECA')
}
.width('100%')

6.2.8 景点文字 - 地址

在这里插入图片描述

// 地址
Row({space: 5}) {
  Image($r('app.media.ic_daohangdizhi'))
    .width(11).fillColor('#999')
  Text('北京 · 果园环岛/通州区 距您36.7km')
    .fontSize(12).fontColor('#999')
}
.width('100%')