大家周末好，本文分享一個(gè)小而美的旅行app首頁，效果圖如下：

image.png

在開始寫代碼之前，我們還是先理一下整個(gè)頁面的結(jié)構(gòu)，它整體是一個(gè)滾動(dòng)的列表，所以要使用List組件。而且這個(gè)頁面是沒有導(dǎo)航欄的，但是為了更好的使用組件導(dǎo)航，我們還是要使用Navigation組件，并且隱藏頭部?jī)?nèi)容，像這樣：

pathStack: NavPathStack = new NavPathStack();

Navigation(this.pathStack){
}
.width('100%')
.height('100%')
.hideTitleBar(true)

接下來，在List容器內(nèi)部又分為幾個(gè)不同的部分，分別是個(gè)人信息部分、功能列表部分和推薦部分每個(gè)部分都是不同的布局方式。我們可以先設(shè)置List組件的整體樣式，它是有背景色、有左右間距的，另外，對(duì)于List內(nèi)部元素的上下間距可以使用space參數(shù)實(shí)現(xiàn)，免去了每次設(shè)置margin的繁瑣，具體代碼如下：

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

列表第一行個(gè)人信息部分比較簡(jiǎn)單，橫向布局，對(duì)齊方式為兩端對(duì)齊，具體代碼如下：

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)

第二行相同的兩端對(duì)齊，內(nèi)容更加簡(jiǎn)單：

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容器中嵌套網(wǎng)格列表，也就是Grid，這是一個(gè)2行4列的網(wǎng)格，大家要注意Grid屬性的設(shè)置和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)

最后一列是帶有標(biāo)題的，我們已經(jīng)多次見過，對(duì)于這種三個(gè)元素的對(duì)齊方式有多種實(shí)現(xiàn)方法，今天就簡(jiǎn)單實(shí)用Row和Column實(shí)現(xiàn)：

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的主要內(nèi)容就是這些，感謝閱讀。##HarmonyOS語言##倉頡##休閑娛樂#