当前位置：首页 > news >正文

鸿蒙Next仓颉语言开发实战教程：订单列表

news 来源：原创 2025/6/13 13:21:54

大家上午好，最近不断有友友反馈仓颉语言和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语言##仓颉##购物#