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

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

很显然这个页面还是使用List容器，页面两侧有统一的边距，我们可以在List容器统一设置：

List(space:20){
}
.padding(left:14,right:14,top:62)
.width(100.percent)
.height(100.percent)
.backgroundColor(0xF6F9FF)

列表第一行个人信息部分比较简单，横向布局，对齐方式为两端对齐，具体代码如下：

Row{Column(4){Text('llona').fontSize(17).fontColor(0x42436A)Text('Summer time, let’s book a flight for vacation').fontColor(0x8D91A2).fontSize(14)}.constraintSize( maxWidth: 60.percent).alignItems(HorizontalAlign.Start)Image(@r(app.media.lx_icon)).width(55).height(55)
}
.width(100.percent)
.justifyContent(FlexAlign.SpaceBetween)

第二行相同的两端对齐，内容更加简单：

Row{Row{Image(@r(app.media.lx_cup)).height(21).width(21).margin(left:14)Text('1130 pts').fontColor(0X42436A).fontSize(15).margin(left:14)}.width(168).height(49).backgroundColor(Color.WHITE).alignItems(VerticalAlign.Center).borderRadius(4)Row{Image(@r(app.media.lx_wallet)).height(21).width(21).margin(left:14)Text('$ 4600').fontColor(0X42436A).fontSize(15).margin(left:14)}.width(168).height(49).backgroundColor(Color.WHITE).alignItems(VerticalAlign.Center).borderRadius(4)
}
.width(100.percent)
.justifyContent(FlexAlign.SpaceBetween)

功能列表部分有些难度，我们要在List容器中嵌套网格列表，也就是Grid，这是一个2行4列的网格，大家要注意Grid属性的设置和foreach的使用：

Grid {ForEach(lxList, itemGeneratorFunc: {item:LXItem,tag:Int64 =>GridItem{Column{Image(item.getImg()).width(52).height(52)Text(item.getTitle()).fontColor(0x6e6e6e).fontSize(15)}.height(80)}})
}
.width(100.percent)
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr')
.columnsGap(12)
.rowsGap(12)
.height(200)

最后一列是带有标题的，我们已经多次见过，对于这种三个元素的对齐方式有多种实现方法，今天就简单实用Row和Column实现：

ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('Recommend')})){ListItem{Row(15){Image(@r(app.media.lx_f1)).width(142).height(185)Column{Image(@r(app.media.lx_f2)).width(100.percent).height(83)Image(@r(app.media.lx_f3)).width(100.percent).height(83)}.height(185).layoutWeight(1).justifyContent(FlexAlign.SpaceBetween)}.width(100.percent).height(185)}
}

旅行app的主要内容就是这些，感谢阅读。##HarmonyOS语言##仓颉##休闲娱乐#