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

大家周末好，本文分享一个小而美的旅行app首页，效果图如下：

很显然这个页面还是使用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语言##仓颉##休闲娱乐#

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