鸿蒙 Next 仓颉语言开发实战教程：订单列表
作者：幽蓝计划
- 2025-06-11 山东
本文字数：2375 字
阅读完需：约 8 分钟
大家上午好，最近不断有友友反馈仓颉语言和 ArkTs 很像，所以要注意不要混淆。今天要分享的是仓颉语言开发商城应用的订单列表页。
首先来分析一下这个页面，它分为三大部分，分别是导航栏、订单类型和订单列表部分。
导航栏由返回按钮和搜索框组成，这里要注意组件横向占满屏幕时要使用 layoutWeight 属性，导航栏部分的实现代码如下：
Row(8) { Image(@r(app.media.back)) .width(22) .height(22) .onClick({evet => Router.back()}) Search(placeholder: "搜索").height(38).layoutWeight(1) .onClick({evet => })}.width(100.percent).height(60).padding(right: 12, left: 12).alignItems(VerticalAlign.Center)复制代码
订单类型应该是一个滚动的横条，虽然它现在没有占满整个屏幕，但是为了适配更多尺寸和类型的屏幕，我们还是要使用 Scroll。里面的内容使用 foreach 循环添加，大家要慢慢习惯仓颉中 Foreach 的写法，另外这里定一个变量 orderIndex 和指定当前选中的订单类型，这一部分的具体实现代码如下：
Scroll{ Row(25){ ForEach(this.orderTypeList, itemGeneratorFunc: {item:String,index:Int64 => if(this.orderIndex == index){ Text(item) .fontColor(Color(215, 68, 62, alpha: 1.0)) .fontSize(17) .fontWeight(FontWeight.Bold) }else { Text(item) .fontColor(Color.GRAY) .fontSize(16) .onClick({evet => this.orderIndex = index}) } })}.width(100.percent).height(40)}.height(40).padding( right: 12, left: 12).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).scrollBarColor(Color.GRAY).scrollBarWidth(50.px)复制代码
最后是订单列表部分，很明显是一个 List 组件，依然使用 layoutWeight 占满剩余屏幕。然后店铺名字和发货状态部分使用 List 的 header 来实现，
@Builder func itemHead(text:String) { Row{ Row{ Text(text) .fontSize(15) .fontWeight(FontWeight.Bold) .backgroundColor(Color.WHITE) Image(@r(app.media.righticon)) .height(18) .width(18) .objectFit(ImageFit.Contain) } Text('卖家已发货') .fontColor(Color.RED) .fontSize(14) } .width(100.percent) .height(35) .justifyContent(FlexAlign.SpaceBetween) .alignItems(VerticalAlign.Center) .padding(left:12,right:12)}
List{ ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('幽蓝旗舰店')})){
}}复制代码
订单商品部分虽然看起来较为复杂，反而不是很难，只要仔细分析布局和对齐方式就能轻松实现，具体代码如下：
ListItem{ Column(10){ Row(8){ Image(@r(app.media.chaofu)) .width(90) .height(90) Column(11){ Row{ Text('牛津纺布通勤男士衬衫') .fontSize(16) .fontColor(Color.BLACK) Text('¥27.9') .fontSize(16) .fontColor(Color.BLACK) } .justifyContent(FlexAlign.SpaceBetween) .width(100.percent) Text('天蓝色，XL（180）') .fontSize(14) .fontColor(Color.GRAY) .padding(4) .backgroundColor(Color(241, 241, 241, alpha: 1.0)) .borderRadius(4) } .height(90) .layoutWeight(1) .alignItems(HorizontalAlign.Start) .justifyContent(FlexAlign.Start) .padding(top:10) } Row(10){ Text('实付款：') .fontSize(13) .fontColor(Color(74, 74, 74, alpha: 1.0)) Text('¥27.9') .fontSize(16) .fontColor(Color.BLACK) .fontWeight(FontWeight.Bold) } .width(100.percent) .justifyContent(FlexAlign.End) Row(10){ Text('延长收货') .padding(top:6,bottom:6,left:8,right:8) .backgroundColor(Color(240, 240, 240, alpha: 1.0)) .fontSize(14) .fontColor(Color(74, 74, 74, alpha: 1.0)) .borderRadius(6) Text('查看物流') .padding(top:6,bottom:6,left:8,right:8) .fontSize(14) .fontColor(Color(74, 74, 74, alpha: 1.0)) .backgroundColor(Color(240, 240, 240, alpha: 1.0)) .borderRadius(6) Text('确认收货') .padding(top:6,bottom:6,left:8,right:8) .fontSize(14) .fontColor(Color(74, 74, 74, alpha: 1.0)) .backgroundColor(Color(240, 240, 240, alpha: 1.0)) .borderRadius(6) } .width(100.percent) .justifyContent(FlexAlign.End) } .padding(left:12,right:12)}复制代码
以上就是今天的内容分享，感谢阅读。##HarmonyOS 语言 ##仓颉 ##购物 #
划线
评论
复制
发布于: 刚刚阅读数: 5
幽蓝计划
关注
还未添加个人签名 2025-05-09 加入
还未添加个人简介
评论