HarmonyOS NEXT仓颉开发语言实战案例：小而美的旅行App_仓颉 写app应用

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

在开始写代码之前，我们还是先理一下整个页面的结构，它整体是一个滚动的列表，所以要使用List组件。而且这个页面是没有导航栏的，但是为了更好的使用组件导航，我们还是要使用Navigation组件，并且隐藏头部内容，像这样：

pathStack: NavPathStack = new NavPathStack();Navigation(this.pathStack){}.width(\'100%\').height(\'100%\').hideTitleBar(true)

接下来，在List容器内部又分为几个不同的部分，分别是个人信息部分、功能列表部分和推荐部分每个部分都是不同的布局方式。我们可以先设置List组件的整体样式，它是有背景色、有左右间距的，另外，对于List内部元素的上下间距可以使用space参数实现，免去了每次设置margin的繁琐，具体代码如下：

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语言##仓颉##休闲娱乐#