鸿蒙 Next 仓颉语言开发实战教程：订单详情
作者：幽蓝计划
- 2025-06-13 山东
本文字数：2713 字
阅读完需：约 9 分钟
幽蓝君听说 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 语言 ##仓颉 ##购物 #
划线
评论
复制
发布于: 刚刚阅读数: 5
幽蓝计划
关注
还未添加个人签名 2025-05-09 加入
还未添加个人简介
评论