找回密码
 立即注册
首页 业界区 业界 鸿蒙仓颉开发语言实战教程:实现商城应用首页 ...

鸿蒙仓颉开发语言实战教程:实现商城应用首页

瞪皱炕 2025-6-3 00:12:52
经过了几天的入门教程,我们终于进入到了仓颉开发语言的实战环节,今天分享的内容是实现商城应用的首页页面,效果图如下:
1.png

首页的内容包括导航栏、轮播图、商品分类和商品列表,我们下面逐一介绍。
导航栏
仓颉语言中是没有导航栏组件的,我们需要自己去开发。此处的导航栏也比较简单,只有一个搜索框,仓颉中的常见组件我们已经在之前的文章中做了讲解。所以这里就直接Row容器下添加Search组件:
  1. Row {
  2.   Search(placeholder: "搜索",  controller: this.searchController)
  3.   .height(38)
  4. }.width(100.percent).height(60).padding(right: 12, left: 12)
复制代码
轮播图
仓颉是有轮播图组件的,用法也比较简单:
  1. Swiper{
  2.   Image(@r(app.media.banner1)).width(100.percent).height(100.percent)
  3.   Image(@r(app.media.banner2)).width(100.percent).height(100.percent)
  4.   Image(@r(app.media.banner3)).width(100.percent).height(100.percent)
  5. }.width(100.percent).height(160).duration(1500).autoPlay(true)
复制代码
商品分类
这里我们会遇到仓颉的第一个复杂容器Grid,作用和ArkTs中的Grid一样:
  1. Grid {
  2.           ForEach(
  3.               goodsTypeList,
  4.               itemGeneratorFunc: {
  5.                   item: TypeItem, index: Int64 => GridItem {
  6.                       Column(){
  7.                           Image(item.getImage()).width(40).height(40).margin(bottom: 4)
  8.                           Text(item.getTitle()).fontSize(13).textAlign(TextAlign.Center).fontWeight(FontWeight.W400).margin(top:5)
  9.                       }
  10.                   }
  11.               }
  12.           )
  13.       }.columnsTemplate('1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr')
  14.       .width(100.percent).height(150).backgroundColor(0xFFFFFF)
复制代码
商品列表
商品列表和分类几乎一样,只不过由4列改为2列:
  1. Grid {
  2.          ForEach(
  3.              goodsList,
  4.              itemGeneratorFunc: {
  5.                  item: GoodsItem, index: Int64 => GridItem {
  6.                      Column(){
  7.                          Image(item.getImage()).width(100.percent).height(200).margin(bottom: 4)
  8.                          Text(item.getTitle()).fontSize(14).textAlign(TextAlign.Start).fontWeight(FontWeight.W400)
  9.                          Text(item.getPrice()).fontSize(12).textAlign(TextAlign.Center).fontWeight(FontWeight.W400).fontColor(Color.RED)
  10.                      }
  11.                      .alignItems(HorizontalAlign.Start)
  12.                  }
  13.              }
  14.          )
  15.      }.columnsTemplate('1fr 1fr').columnsGap(10).rowsGap(10)
  16.      .width(100.percent).backgroundColor(0xFFFFFF).padding( right: 10, left: 10)
复制代码
最后要注意,除导航栏外,其他组件是需要可以滚动的,所以需要把它们放到List组件中,注意List的属性设置,这里使用layoutWeight来自动分配空间:
  1. List() {
  2.     //banner
  3.     ListItem {}   
  4.     //分类
  5.     ListItem {}
  6.     //商品
  7.     ListItem {}
  8. }.layoutWeight(1)
复制代码
源码已经上传到gitee,大家需要的话可以下载:
  1. https://gitee.com/the-blue-plan/cjshop
复制代码
#HarmonyOS语言##仓颉##购物#

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册