鸿蒙Next仓颉语言开发实战教程：订单详情
幽蓝君听说HarmonyOS 5.1版本即将推送，6.0版本也快要来了,表示十分期待。
今天继续分享仓颉语言开发商城应用的实战教程，今天要分享的是订单详情页.
我们今天应该是第一次遇到分为上中下三部分的页面，而且中间内容可以滚动，这样的布局如何设置呢，其实和之前一样，我们知道其中两个的高度，第三个容器使用layoutWeight属性就行了，这里使layoutWeight的依然是List组件，贴一下上下两部分的内容和List容器的整体布局代码：
Column(){
Stack {
Text('订单详情')
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor(Color.BLACK)
Row{
Image(@r(app.media.back))
.width(27)
.height(27)
.onClick({evet => Router.back()})
}.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
}
.width(100.percent)
.height(60)
.backgroundColor(Color.WHITE)
List(space:8){
}
.backgroundColor(Color(240, 240, 240, alpha: 1.0))
.layoutWeight(1)
Row{
Row(){
Text('实付金额：')
.fontColor(Color.BLACK)
.fontSize(15)
Text('¥100' )
.fontColor(Color.RED)
.fontSize(15)
}
.margin(left:10)
Text('立即支付')
.fontColor(Color.WHITE)
.backgroundColor(Color.RED)
.width(80)
.height(40)
.textAlign(TextAlign.Center)
.borderRadius(20)
.margin(right:10)
}
.backgroundColor(Color.WHITE)
.width(100.percent)
.height(50)
.justifyContent(FlexAlign.SpaceBetween)
}.width(100.percent).height(100.percent)
剩下的内容就是List容器中的内容，也就是主体内容部分，可以看到它们分为三组，每一组拆开来看也都相对简单，都是基础的布局方式。
比如中间商品详情部分，它可以分为上下两部分，上面内容部分又可以分为左右两部分，这就是分析布局的基本逻辑。
这里有一个知识点要说一下，如果在仓颉中你想设置某一个边的边线宽度，比如设置上边线的宽度，这样写：
.borderWidth(EdgeWidths( top: 1.vp))
下面也附上List内容部分的具体代码：
ListItem{
Column{
Row{
Text('默认')
.fontColor(Color.WHITE)
.fontSize(15)
.backgroundColor(Color.RED)
.width(35)
.height(20)
.textAlign(TextAlign.Center)
Text('北京北京市东城')
.fontColor(Color.BLACK)
.fontSize(15)
.margin(left:5)
}
Text('石景山游乐园')
.fontColor(Color.BLACK)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.margin(top:10)
Text('王富贵 123123')
.fontColor(Color.BLACK)
.fontSize(16)
.margin(top:10)
}
.width(100.percent)
.alignItems(HorizontalAlign.Start)
}
.padding(left:10,right:10)
.width(100.percent)
.height(100)
.backgroundColor(Color.WHITE)
ListItem{
Column{
Row{
Row{
Image(@r(app.media.good1))
.width(60)
.height(60)
.margin(left:1)
Column{
Text('纯棉牛津纺舒适基础长袖衬衫')
.fontColor(Color.BLACK)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.maxLines(1)
Text('天蓝色 L')
.fontColor(Color.GRAY)
.fontSize(14)
.maxLines(1)
.margin(top:5)
Row(){
Text('单价: ¥100' )
.fontColor(Color.BLACK)
.fontSize(15)
Text('数量: 1' )
.fontColor(Color.BLACK)
.fontSize(15)
.margin(left:20)
}
.margin(top:5)
}
.alignItems(HorizontalAlign.Start)
.width(60.percent)
.margin(left:10)
}
Text('¥100')
.fontColor(Color.BLACK)
.fontSize(16)
.margin(right:10)
}
.padding(top:10,bottom:10)
.width(100.percent)
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Top)
.borderColor(Color(236, 236, 236, alpha: 1.0))
.borderStyle(BorderStyle.Solid)
Row{
Text('共计金额:')
.fontColor(Color.BLACK)
.fontSize(15)
Text('¥100')
.fontColor(Color.RED)
.fontSize(15)
}
.borderWidth(EdgeWidths( top: 1.vp))
.borderColor(Color(236, 236, 236, alpha: 1.0))
.alignItems(VerticalAlign.Center)
.padding(left:10,right:10)
.width(100.percent)
.height(40)
.justifyContent(FlexAlign.SpaceBetween)
}
}
.backgroundColor(Color.WHITE)
.width(100.percent)
.padding(top:10,bottom:10)
ListItem{
Column{
Row{
Row(){
Image('')
.width(30)
.height(30)
.borderRadius(15)
.backgroundColor(Color(21,120,255))
Text('支付宝支付')
.fontSize(15)
.fontColor(Color.BLACK)
.margin(left:8)
}
Image( @r(app.media.choose1))
.width(15)
.height(15)
}
.padding(left:10,right:10)
.width(100.percent)
.justifyContent(FlexAlign.SpaceBetween)
.height(45)
Row{
Row(){
Image('')
.width(30)
.height(30)
.borderRadius(15)
.backgroundColor(Color(84, 169, 70, alpha: 1.0))
Text('微信支付')
.fontSize(15)
.fontColor(Color.BLACK)
.margin(left:8)
}
Image( @r(app.media.choose0))
.width(15)
.height(15)
}
.padding(left:10,right:10)
.width(100.percent)
.justifyContent(FlexAlign.SpaceBetween)
.height(45)
}
}
.backgroundColor(Color.WHITE)
感谢您今天的阅读。##HarmonyOS语言##仓颉##购物#
#harmonyos#
投递快手等公司10个岗位