鸿蒙仓颉语言开发实战教程：商城应用个人中心页面

又到了高考的日子，幽蓝君在这里祝各位考生朋友冷静答题，超常发挥。
今天要分享的内容是仓颉语言商城应用的个人中心页面，先看效果图：
 

下面介绍下这个页面的实现过程。
我们可以先分析下整个页面的布局结构。可以看出它是纵向的布局，整个页面由导航栏、个人资料、vip横条和我的订单几部分构成。
导航栏我们遇到过很多次了，需要注意的地方就是让标题居中，返回图标靠左。最简单的办法让它俩不在一个层级上，互不影响，所以我们使用层叠布局实现：
 

1. Stack {
2.      Text('个人中心')
3.     .fontSize(16)
4.     .fontWeight(FontWeight.Bold)
5.     .fontColor(Color.BLACK)
6.     Row{
7.          Image(@r(app.media.back))
8.     .width(27)
9.     .height(27)
10.      .onClick({evet => Router.back()})
11.     }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
12. }
13. .width(100.percent)
14. .height(60)
15. .backgroundColor(Color.WHITE)

复制代码

头像和昵称部分也比较简单，一个Row容器就能搞定：
 

1. Row(8){
2.     Image(@r(app.media.chaofu))
3.     .width(60.vp)
4.     .height(60)
5.     .borderRadius(30)
6.     Text('幽蓝计划')
7.     .fontSize(16)
8.     .fontColor(Color.BLACK)
9.     .fontWeight(FontWeight.Bold)
10. }
11. .width(100.percent)
12. .height(60.vp)

复制代码

到了开通会员部分，有些需要注意的地方。首先是它只有上面部分是圆角，下面两个是没有圆角的，仓颉语言中borderRadius属性提供了单独设置圆角的方法，不过Length类型的参数不知道大家有没有见到过：
 

1. .borderRadius(topLeft: Length(12, unitType: LengthType.vp), topRight: Length(12, unitType: LengthType.vp))

复制代码

最后是我的订单部分，又可以把它分成标题和订单类型内容两部分，这两部分都使用SpaceBetween布局，局部分代码就不再一一列举了，直接附上整个页面的完整代码：
 

1. package ohos_app_cangjie_entry.page
2. import ohos.base.*
3. import ohos.component.*
4. import ohos.state_manage.*
5. import ohos.state_macro_manage.*
6. import ohos.router.Router
7. import cj_res_entry.app
8. import std.collection.ArrayList
9. @Entry
10. @Component
11. public class mine  {
12.     func build() {
13.         Column{
14.             Stack {
15.                  Text('个人中心')
16.                 .fontSize(16)
17.                 .fontWeight(FontWeight.Bold)
18.                 .fontColor(Color.BLACK)
19.                 Row{
20.                      Image(@r(app.media.back))
21.                 .width(27)
22.                 .height(27)
23.                  .onClick({evet => Router.back()})
24.                 }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
25.             }
26.             .width(100.percent)
27.             .height(60)
28.             .backgroundColor(Color.WHITE)
29.             
30.             Column{
31.                 Row(8){
32.                     Image(@r(app.media.chaofu))
33.                     .width(60.vp)
34.                     .height(60)
35.                     .borderRadius(30)
36.                     Text('幽蓝计划')
37.                     .fontSize(16)
38.                     .fontColor(Color.BLACK)
39.                     .fontWeight(FontWeight.Bold)
40.                  }
41.                  .width(100.percent)
42.                  .height(60.vp)
43.                 Row{
44.                     Row{
45.                         Text('开通会员')
46.                         .fontColor(Color.WHITE)
47.                         .fontSize(14)
48.                         Image(@r(app.media.right))
49.                         .width(13)
50.                         .height(13)
51.                     }
52.                     .padding(left:12,right:12)
53.                     .width(100.percent)
54.                     .height(43)
55.                     .backgroundColor(Color(41, 41, 41, alpha:1.0))
56.                     .alignItems(VerticalAlign.Center)
57.                     .justifyContent(FlexAlign.SpaceBetween)
58.                     .borderRadius(topLeft: Length(12, unitType: LengthType.vp), topRight: Length(12, unitType: LengthType.vp))
59.                 }
60.                 .width(100.percent)
61.                 .padding(left:15,right:15)
62.                 .margin(top:40)
63.                 Column{
64.                     Row{
65.                         Text('我的订单')
66.                         .fontSize(14)
67.                         .fontColor(Color.BLACK)
68.                         Row(3){
69.                             Text('全部')
70.                             .fontSize(0x666666)
71.                             .fontSize(12)
72.                             Image(@r(app.media.icon_arrow_right))
73.                             .width(12)
74.                             .height(13)
75.                             .objectFit(ImageFit.Contain)
76.                         }
77.                         .alignItems(VerticalAlign.Center)
78.                     }
79.                     .justifyContent(FlexAlign.SpaceBetween)
80.                     .alignItems(VerticalAlign.Center)
81.                     .width(100.percent)
82.                     Row{
83.                         Column(5){
84.                             Image(@r(app.media.zhifu))
85.                             .width(34)
86.                             .height(34)
87.                             Text('待支付')
88.                             .fontSize(12)
89.                             .fontColor(Color.BLACK)
90.                         }
91.                         Column(5){
92.                             Image(@r(app.media.shouhuo))
93.                             .width(34)
94.                             .height(34)
95.                             Text('待收货')
96.                             .fontSize(12)
97.                             .fontColor(Color.BLACK)
98.                         }
99.                         Column(5){
100.                             Image(@r(app.media.wancheng))
101.                             .width(34)
102.                             .height(34)
103.                             Text('已完成')
104.                             .fontSize(12)
105.                             .fontColor(Color.BLACK)
106.                         }
107.                         Column(5){
108.                             Image(@r(app.media.shouhou))
109.                             .width(34)
110.                             .height(34)
111.                             Text('售后')
112.                             .fontSize(12)
113.                             .fontColor(Color.BLACK)
114.                         }
115.                     }
116.                     .width(100.percent)
117.                     .justifyContent(FlexAlign.SpaceBetween)
118.                 }
119.                 .width(100.percent)
120.                 .height(120)
121.                 .borderRadius(12)
122.                 .backgroundColor(0xF5F5F5)
123.                 .padding(left:10,right:10,top:15,bottom:15)
124.                 .justifyContent(FlexAlign.SpaceBetween)
125.             }
126.             .width(100.percent)
127.             .padding(left:12,right:12)
128.         }
129.         .width(100.percent)
130.         .height(100.percent)
131.     }
132. }

复制代码

感谢阅读，祝大家周末愉快。##HarmonyOS语言##仓颉##购物#

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