大家周末好，本文分享一个小而美的旅行 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 语言 ##仓颉 ##休闲娱乐 #
评论