經(jīng)過了幾天的入門教程，我們終于進入到了倉頡開發(fā)語言的實戰(zhàn)環(huán)節(jié)，今天分享的內(nèi)容是實現(xiàn)商城應用的首頁頁面，效果圖如下：

image.png

首頁的內(nèi)容包括導航欄、輪播圖、商品分類和商品列表，我們下面逐一介紹。
下面再為大家分享一個關于布局的基礎知識，所有的布局方式無非分為三種：橫向布局、豎向布局和層疊布局，其他的布局方式均有這三種方式衍生而來，比如彈性布局、網(wǎng)格布局、列表布局等等。
所以我們也可以對今天的頁面先做一個簡單的分析，它首先是一個從上至下的豎向布局，中間嵌套了橫向布局方式，也可以說是網(wǎng)格布局方式。再仔細一點分析，它是由導航欄和列表組件構(gòu)成，在列表組件中又有不同的頁面結(jié)構(gòu)。
每一次開發(fā)項目之前都進行類似的分析，開發(fā)就會變得簡單。做完分析，我們就可以著手寫代碼了。

導航欄

倉頡語言中是沒有導航欄組件的，我們需要自己去開發(fā)。此處的導航欄也比較簡單，只有一個搜索框，倉頡中的常見組件我們已經(jīng)在之前的文章中做了講解。所以這里就直接Row容器下添加Search組件：

Row {
  Search(placeholder: "搜索",  controller: this.searchController)
  .height(38)
}.width(100.percent).height(60).padding(right: 12, left: 12)

輪播圖

倉頡是有輪播圖組件的，用法也比較簡單：

Swiper{
  Image(@r(app.media.banner1)).width(100.percent).height(100.percent)
  Image(@r(app.media.banner2)).width(100.percent).height(100.percent)
  Image(@r(app.media.banner3)).width(100.percent).height(100.percent)
}.width(100.percent).height(160).duration(1500).autoPlay(true)

商品分類

這里我們會遇到倉頡的第一個復雜容器Grid，作用和ArkTs中的Grid一樣：

Grid {
          ForEach(
              goodsTypeList,
              itemGeneratorFunc: {
                  item: TypeItem, index: Int64 => GridItem {
                      Column(){
                          Image(item.getImage()).width(40).height(40).margin(bottom: 4)
                          Text(item.getTitle()).fontSize(13).textAlign(TextAlign.Center).fontWeight(FontWeight.W400).margin(top:5)
                      }
                  }
              }
          )
      }.columnsTemplate('1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr')
      .width(100.percent).height(150).backgroundColor(0xFFFFFF)

商品列表

商品列表和分類幾乎一樣，只不過由4列改為2列：

Grid {
         ForEach(
             goodsList,
             itemGeneratorFunc: {
                 item: GoodsItem, index: Int64 => GridItem {
                     Column(){
                         Image(item.getImage()).width(100.percent).height(200).margin(bottom: 4)
                         Text(item.getTitle()).fontSize(14).textAlign(TextAlign.Start).fontWeight(FontWeight.W400)
                         Text(item.getPrice()).fontSize(12).textAlign(TextAlign.Center).fontWeight(FontWeight.W400).fontColor(Color.RED)
                     }
                     .alignItems(HorizontalAlign.Start)
                 }
             }
         )
     }.columnsTemplate('1fr 1fr').columnsGap(10).rowsGap(10)
     .width(100.percent).backgroundColor(0xFFFFFF).padding( right: 10, left: 10)

最后要注意，除導航欄外，其他組件是需要可以滾動的，所以需要把它們放到List組件中，注意List的屬性設置，這里使用layoutWeight來自動分配空間：

List() {
    //banner
    ListItem {}    
    //分類
    ListItem {}
    //商品
    ListItem {}
}.layoutWeight(1)

#HarmonyOS語言##倉頡##購物#