大家上午好，最近不断有友友反馈仓颉语言和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)
AI 代码解读
订单类型应该是一个滚动的横条，虽然它现在没有占满整个屏幕，但是为了适配更多尺寸和类型的屏幕，我们还是要使用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)
AI 代码解读
最后是订单列表部分，很明显是一个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)('幽蓝旗舰店')})){
}
}
AI 代码解读
订单商品部分虽然看起来较为复杂，反而不是很难，只要仔细分析布局和对齐方式就能轻松实现，具体代码如下：
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)
}
AI 代码解读
以上就是今天的内容分享，感谢阅读。##HarmonyOS语言##仓颉##购物#
