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语言##仓颉##休闲娱乐#
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]