登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›HarmonyOS NEXT仓颉开发语言实战案例：小而美的旅行App ...

HarmonyOS NEXT仓颉开发语言实战案例：小而美的旅行App

痨砖 2025-6-29 11:13:25
大家周末好，本文分享一个小而美的旅行app首页，效果图如下：
1.png

很显然这个页面还是使用List容器，页面两侧有统一的边距，我们可以在List容器统一设置：
  1. List(space:20){
  2. }
  3. .padding(left:14,right:14,top:62)
  4. .width(100.percent)
  5. .height(100.percent)
  6. .backgroundColor(0xF6F9FF)
复制代码
列表第一行个人信息部分比较简单，横向布局，对齐方式为两端对齐，具体代码如下：
  1. Row{
  2.     Column(4){
  3.         Text('llona')
  4.         .fontSize(17)
  5.         .fontColor(0x42436A)
  6.         Text('Summer time, let’s book a flight for vacation')
  7.         .fontColor(0x8D91A2)
  8.         .fontSize(14)
  9.     }
  10.     .constraintSize( maxWidth: 60.percent)
  11.     .alignItems(HorizontalAlign.Start)
  12.     Image(@r(app.media.lx_icon))
  13.     .width(55)
  14.     .height(55)
  15. }
  16. .width(100.percent)
  17. .justifyContent(FlexAlign.SpaceBetween)
复制代码
第二行相同的两端对齐，内容更加简单：
  1. Row{
  2.     Row{
  3.         Image(@r(app.media.lx_cup))
  4.         .height(21)
  5.         .width(21)
  6.         .margin(left:14)
  7.         Text('1130 pts')
  8.         .fontColor(0X42436A)
  9.         .fontSize(15)
  10.         .margin(left:14)
  11.     }
  12.     .width(168)
  13.     .height(49)
  14.     .backgroundColor(Color.WHITE)
  15.     .alignItems(VerticalAlign.Center)
  16.     .borderRadius(4)
  17.     Row{
  18.         Image(@r(app.media.lx_wallet))
  19.         .height(21)
  20.         .width(21)
  21.         .margin(left:14)
  22.         Text('$ 4600')
  23.         .fontColor(0X42436A)
  24.         .fontSize(15)
  25.         .margin(left:14)
  26.     }
  27.     .width(168)
  28.     .height(49)
  29.     .backgroundColor(Color.WHITE)
  30.     .alignItems(VerticalAlign.Center)
  31.     .borderRadius(4)
  32. }
  33. .width(100.percent)
  34. .justifyContent(FlexAlign.SpaceBetween)
复制代码
功能列表部分有些难度，我们要在List容器中嵌套网格列表，也就是Grid，这是一个2行4列的网格，大家要注意Grid属性的设置和foreach的使用：
  1. Grid {
  2.     ForEach(lxList, itemGeneratorFunc: {item:LXItem,tag:Int64 =>
  3.                 GridItem{
  4.                     Column{
  5.                     Image(item.getImg())
  6.                     .width(52)
  7.                     .height(52)
  8.                     Text(item.getTitle())
  9.                     .fontColor(0x6e6e6e)
  10.                     .fontSize(15)
  11.                     }
  12.                     .height(80)
  13.                 }
  14.             })
  15. }
  16. .width(100.percent)
  17. .columnsTemplate('1fr 1fr 1fr 1fr')
  18. .rowsTemplate('1fr 1fr')
  19. .columnsGap(12)
  20. .rowsGap(12)
  21. .height(200)
复制代码
最后一列是带有标题的，我们已经多次见过，对于这种三个元素的对齐方式有多种实现方法，今天就简单实用Row和Column实现：
  1. ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('Recommend')})){
  2.     ListItem{
  3.         Row(15){
  4.             Image(@r(app.media.lx_f1))
  5.             .width(142)
  6.             .height(185)
  7.             
  8.             Column{
  9.                 Image(@r(app.media.lx_f2))
  10.                 .width(100.percent)
  11.                 .height(83)
  12.                 Image(@r(app.media.lx_f3))
  13.                 .width(100.percent)
  14.                 .height(83)
  15.                
  16.             }
  17.             .height(185)
  18.             .layoutWeight(1)
  19.             .justifyContent(FlexAlign.SpaceBetween)
  20.             
  21.         }
  22.         .width(100.percent)
  23.         .height(185)
  24.     }
  25. }
复制代码
旅行app的主要内容就是这些，感谢阅读。##HarmonyOS语言##仓颉##休闲娱乐#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
痨砖
2025-6-29 11:13:25

0

粉丝关注

23

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫