大家上午好，倉頡語言商城應用的開發進程已經過半，不知道大家通過這一系列的教程對倉頡開發是否有了進一步的了解。今天要分享的購物車頁面：

看到這個頁面，我們首先要對它簡單的分析一下。這個頁面一共分為三部分，分別是導航欄、購物車列表和底部的結算欄。也能它們是column布局，那么怎么樣讓這三部分剛好撐滿整個頁面，有一個簡單的辦法：給導航欄和結算欄一個固定的高度，然后給List組件設置layoutWeight(1)屬性即可。寫一個簡單的頁面結構:

Column{Row{//導航欄}.width(100.percent).height(60)List{//購物車列表}.width(100.percent).layoutWeight(1)Row{//結算欄}.width(100.percent).height(45)
}
.width(100.percent)
.height(100.percent)

購物車列表

購物車列表毫無疑問使用List組件，今天的List組件比之前多了一些內容，就是店鋪名字這部分的內容，我們使用List中的header來實現。

我首先寫下header部分的內容，并自定義一個組件itemHead：

@Builder func itemHead(text:String) {Row{Text(text).fontSize(15).backgroundColor(Color.WHITE).padding(10)Image(@r(app.media.righticon)).height(18).width(18).objectFit(ImageFit.Contain).margin(left:-5)}.width(100.percent).height(35).alignItems(VerticalAlign.Center)
}

在List中使用這個組件，并傳入參數，就是店鋪的名字：

List(space:12) {ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('幽藍旗艦店')})){})
}

然后就是列表內容部分，循環列表內容我們只看其中一個就行了。

同樣先把它簡單的分析一下，大家可以把它分為兩部分或者三部分，拆分開來就會比較簡單了。

要注意的是這部分內容需要橫向占滿整個屏幕，我們同樣可以使用layoutWeight來實現。

下面為大家貼上列表內容加上循環遍歷的實現代碼。倉頡Foreach寫法比較不同，需要慢慢習慣：

ForEach(this.carList,itemGeneratorFunc:{item:CarItem, index: Int64 => ListItem {Row(8){Image(@r(app.media.unselect)).width(17).height(17)Image(item.getCover()).width(90).height(90).borderRadius(6)Column {Column(5){Text(item.getName()).fontSize(16).fontColor(Color.BLACK)Text('天藍色，XL（180）').fontSize(14).fontColor(Color.GRAY).padding(4).backgroundColor(Color(241, 241, 241, alpha: 1.0)).borderRadius(4)}.alignItems(HorizontalAlign.Start)Row {Row{Text('￥').fontColor(Color.RED).fontSize(13)Text(item.getPrice()).fontSize(18).fontColor(Color.RED).fontWeight(FontWeight.Bold)}.alignItems(VerticalAlign.Bottom)Row (6){Text('-').fontColor(Color(74, 74, 74, alpha: 1.0)).fontSize(16)Text(item.getCount().toString()).fontSize(14).fontColor(Color.BLACK).padding(4).backgroundColor(Color(241, 241, 241, alpha: 1.0)).textAlign(TextAlign.Center).width(40).height(28).borderRadius(6)Text('+').fontColor(Color(74, 74, 74, alpha: 1.0)).fontSize(16)}.alignItems(VerticalAlign.Center)}.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.SpaceBetween).width(100.percent)}.layoutWeight(1).alignItems(HorizontalAlign.Start).height(90).justifyContent(FlexAlign.SpaceBetween)}.width(100.percent).height(110)}})

結算欄

相比購物車列表，結算欄的內容就比較簡單了，使用幾個Row容器就能實現：

Row(6){Row(){Text('合計').fontSize(13).fontColor(Color.BLACK)Text('￥').fontColor(Color.RED).fontSize(13).margin(left:5)Text('0').fontSize(18).fontColor(Color.RED).fontWeight(FontWeight.Bold)}.alignItems(VerticalAlign.Bottom)Text('結算').fontColor(Color.WHITE).backgroundColor(Color.RED).width(100).height(38).borderRadius(6).textAlign(TextAlign.Center)}

以上就是購物車頁面開發的內容分享，感謝閱讀。#HarmonyOS語言##倉頡##購物#?