鸿蒙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('石景山游乐园68号')     .fontColor(Color.BLACK)     .fontSize(18)     .fontWeight(FontWeight.Bold)     .margin(top:10)   Text('王富贵 13084532514')     .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语言##仓颉##购物#