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

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

news 来源：原创 2025/6/14 7:28:15

幽蓝君听说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语言##仓颉##购物#