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

幽蓝君听说HarmonyOS 5.1版本即将推送，6.0版本也快要来了,表示十分期待。
今天继续分享仓颉语言开发商城应用的实战教程，今天要分享的是订单详情页：

我们今天应该是第一次遇到分为上中下三部分的页面，而且中间内容可以滚动，这样的布局如何设置呢，其实和之前一样，我们知道其中两个的高度，第三个容器使用layoutWeight属性就行了，这里使layoutWeight的依然是List组件，贴一下上下两部分的内容和List容器的整体布局代码：

1. Column(){
2.     Stack {
3.          Text('订单详情')
4.         .fontSize(16)
5.         .fontWeight(FontWeight.Bold)
6.         .fontColor(Color.BLACK)
7.         Row{
8.              Image(@r(app.media.back))
9.         .width(27)
10.         .height(27)
11.          .onClick({evet => Router.back()})
12.         }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
13.     }
14.     .width(100.percent)
15.     .height(60)
16.     .backgroundColor(Color.WHITE)
17.      List(space:8){
18.         }
19.        .backgroundColor(Color(240, 240, 240, alpha: 1.0))
20.       .layoutWeight(1)
21.       Row{
22.           Row(){
23.       Text('实付金额：')
24.         .fontColor(Color.BLACK)
25.         .fontSize(15)
26.       Text('¥100' )
27.         .fontColor(Color.RED)
28.         .fontSize(15)
29.     }
30.     .margin(left:10)
31.           Text('立即支付')
32.       .fontColor(Color.WHITE)
33.       .backgroundColor(Color.RED)
34.       .width(80)
35.       .height(40)
36.       .textAlign(TextAlign.Center)
37.       .borderRadius(20)
38.       .margin(right:10)
39.       }
40.       .backgroundColor(Color.WHITE)
41.   .width(100.percent)
42.   .height(50)
43.   .justifyContent(FlexAlign.SpaceBetween)
44. }.width(100.percent).height(100.percent)

复制代码

剩下的内容就是List容器中的内容，也就是主体内容部分，可以看到它们分为三组，每一组拆开来看也都相对简单，都是基础的布局方式。
比如中间商品详情部分，它可以分为上下两部分，上面内容部分又可以分为左右两部分，这就是分析布局的基本逻辑。
这里有一个知识点要说一下，如果在仓颉中你想设置某一个边的边线宽度，比如设置上边线的宽度，这样写：

1. .borderWidth(EdgeWidths( top: 1.vp))

复制代码

下面也附上List内容部分的具体代码：

1. ListItem{
2.       Column{
3.           Row{
4.     Text('默认')
5.       .fontColor(Color.WHITE)
6.       .fontSize(15)
7.       .backgroundColor(Color.RED)
8.       .width(35)
9.       .height(20)
10.       .textAlign(TextAlign.Center)
11.     Text('北京北京市东城')
12.       .fontColor(Color.BLACK)
13.       .fontSize(15)
14.       .margin(left:5)
15.   }
16.           Text('石景山游乐园68号')
17.     .fontColor(Color.BLACK)
18.     .fontSize(18)
19.     .fontWeight(FontWeight.Bold)
20.     .margin(top:10)
21.   Text('王富贵 13084532514')
22.     .fontColor(Color.BLACK)
23.     .fontSize(16)
24.     .margin(top:10)
25.       }
26.       .width(100.percent)
27.       .alignItems(HorizontalAlign.Start)
28.   }
29.   .padding(left:10,right:10)
30.   .width(100.percent)
31.   .height(100)
32.   .backgroundColor(Color.WHITE)
33.   ListItem{
34.       Column{
35.           Row{
36.           Row{
37.               Image(@r(app.media.good1))
38.               .width(60)
39.               .height(60)
40.               .margin(left:1)
41.               Column{
42.                   Text('纯棉牛津纺舒适基础长袖衬衫')
43.           .fontColor(Color.BLACK)
44.           .fontSize(16)
45.           .fontWeight(FontWeight.Bold)
46.           .maxLines(1)
47.         Text('天蓝色 L')
48.           .fontColor(Color.GRAY)
49.           .fontSize(14)
50.           .maxLines(1)
51.           .margin(top:5)
52.                   Row(){
53.           Text('单价: ¥100' )
54.             .fontColor(Color.BLACK)
55.             .fontSize(15)
56.           Text('数量: 1' )
57.             .fontColor(Color.BLACK)
58.             .fontSize(15)
59.             .margin(left:20)
60.         }
61.         .margin(top:5)
62.               }
63.                .alignItems(HorizontalAlign.Start)
64.                .width(60.percent)
65.                .margin(left:10)
66.           }
67.           Text('¥100')
68.       .fontColor(Color.BLACK)
69.       .fontSize(16)
70.       .margin(right:10)
71.       }
72.       .padding(top:10,bottom:10)
73.   .width(100.percent)
74.   .justifyContent(FlexAlign.SpaceBetween)
75.   .alignItems(VerticalAlign.Top)
76.   .borderColor(Color(236, 236, 236, alpha: 1.0))
77.   .borderStyle(BorderStyle.Solid)
78.           Row{
79.       Text('共计金额:')
80.     .fontColor(Color.BLACK)
81.     .fontSize(15)
82.       Text('¥100')
83.     .fontColor(Color.RED)
84.     .fontSize(15)
85. }
86.          
87.           .borderWidth(EdgeWidths( top: 1.vp))
88.           .borderColor(Color(236, 236, 236, alpha: 1.0))
89. .alignItems(VerticalAlign.Center)
90. .padding(left:10,right:10)
91. .width(100.percent)
92. .height(40)
93. .justifyContent(FlexAlign.SpaceBetween)
94.       }
95.   }
96.   .backgroundColor(Color.WHITE)
97.    .width(100.percent)
98.   .padding(top:10,bottom:10)
99.   ListItem{
100.       Column{
101.           Row{
102.               Row(){
103.     Image('')
104.       .width(30)
105.       .height(30)
106.       .borderRadius(15)
107.                   .backgroundColor(Color(21,120,255))
108.     Text('支付宝支付')
109.       .fontSize(15)
110.       .fontColor(Color.BLACK)
111.       .margin(left:8)
112.   }
113.   Image( @r(app.media.choose1))
114.     .width(15)
115.     .height(15)
116.           }
117.           .padding(left:10,right:10)
118.           .width(100.percent)
119.           .justifyContent(FlexAlign.SpaceBetween)
120.           .height(45)
121.           Row{
122.               Row(){
123.     Image('')
124.       .width(30)
125.       .height(30)
126.       .borderRadius(15)
127.                   .backgroundColor(Color(84, 169, 70, alpha: 1.0))
128.     Text('微信支付')
129.       .fontSize(15)
130.       .fontColor(Color.BLACK)
131.       .margin(left:8)
132.   }
133.   Image( @r(app.media.choose0))
134.     .width(15)
135.     .height(15)
136.           }
137.           .padding(left:10,right:10)
138.           .width(100.percent)
139.           .justifyContent(FlexAlign.SpaceBetween)
140.           .height(45)
141.       }
142.   }
143.    .backgroundColor(Color.WHITE)

复制代码

感谢您今天的阅读。##HarmonyOS语言##仓颉##购物#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！