鸿蒙仓颉开发语言实战教程：实现商城应用首页
【摘要】 经过了几天的入门教程，我们终于进入到了仓颉开发语言的实战环节，今天分享的内容是实现商城应用的首页页面，效果图如下：首页的内容包括导航栏、轮播图、商品分类和商品列表，我们下面逐一介绍。导航栏仓颉语言中是没有导航栏组件的，我们需要自己去开发。此处的导航栏也比较简单，只有一个搜索框，仓颉中的常见组件我们已经在之前的文章中做了讲解。所以这里就直接Row容器下添加Search组件：Row { Sea...
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 {
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)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() {
//banner
ListItem {}
//分类
ListItem {}
//商品
ListItem {}
}.layoutWeight(1)
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）