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

又到了高考的日子，幽蓝君在这里祝各位考生朋友冷静答题，超常发挥。

今天要分享的内容是仓颉语言商城应用的个人中心页面，先看效果图：

 

下面介绍下这个页面的实现过程。

我们可以先分析下整个页面的布局结构。可以看出它是纵向的布局，整个页面由导航栏、个人资料、vip横条和我的订单几部分构成。

导航栏我们遇到过很多次了，需要注意的地方就是让标题居中，返回图标靠左。最简单的办法让它俩不在一个层级上，互不影响，所以我们使用层叠布局实现：

 

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)

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

 

Row(8){     Image(@r(app.media.chaofu))     .width(60.vp)     .height(60)     .borderRadius(30)     Text('幽蓝计划')     .fontSize(16)     .fontColor(Color.BLACK)     .fontWeight(FontWeight.Bold)  }  .width(100.percent)  .height(60.vp)

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

 

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

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

 

package ohos_app_cangjie_entry.page import ohos.base.* import ohos.component.* import ohos.state_manage.* import ohos.state_macro_manage.* import ohos.router.Router import cj_res_entry.app import std.collection.ArrayList @Entry @Component public class mine  {     func build() {         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)                          Column{                 Row(8){                     Image(@r(app.media.chaofu))                     .width(60.vp)                     .height(60)                     .borderRadius(30)                     Text('幽蓝计划')                     .fontSize(16)                     .fontColor(Color.BLACK)                     .fontWeight(FontWeight.Bold)                  }                  .width(100.percent)                  .height(60.vp)                 Row{                     Row{                         Text('开通会员')                         .fontColor(Color.WHITE)                         .fontSize(14)                         Image(@r(app.media.right))                         .width(13)                         .height(13)                     }                     .padding(left:12,right:12)                     .width(100.percent)                     .height(43)                     .backgroundColor(Color(41, 41, 41, alpha:1.0))                     .alignItems(VerticalAlign.Center)                     .justifyContent(FlexAlign.SpaceBetween)                     .borderRadius(topLeft: Length(12, unitType: LengthType.vp), topRight: Length(12, unitType: LengthType.vp))                 }                 .width(100.percent)                 .padding(left:15,right:15)                 .margin(top:40)                 Column{                     Row{                         Text('我的订单')                         .fontSize(14)                         .fontColor(Color.BLACK)                         Row(3){                             Text('全部')                             .fontSize(0x666666)                             .fontSize(12)                             Image(@r(app.media.icon_arrow_right))                             .width(12)                             .height(13)                             .objectFit(ImageFit.Contain)                         }                         .alignItems(VerticalAlign.Center)                     }                     .justifyContent(FlexAlign.SpaceBetween)                     .alignItems(VerticalAlign.Center)                     .width(100.percent)                     Row{                         Column(5){                             Image(@r(app.media.zhifu))                             .width(34)                             .height(34)                             Text('待支付')                             .fontSize(12)                             .fontColor(Color.BLACK)                         }                         Column(5){                             Image(@r(app.media.shouhuo))                             .width(34)                             .height(34)                             Text('待收货')                             .fontSize(12)                             .fontColor(Color.BLACK)                         }                         Column(5){                             Image(@r(app.media.wancheng))                             .width(34)                             .height(34)                             Text('已完成')                             .fontSize(12)                             .fontColor(Color.BLACK)                         }                         Column(5){                             Image(@r(app.media.shouhou))                             .width(34)                             .height(34)                             Text('售后')                             .fontSize(12)                             .fontColor(Color.BLACK)                         }                     }                     .width(100.percent)                     .justifyContent(FlexAlign.SpaceBetween)                 }                 .width(100.percent)                 .height(120)                 .borderRadius(12)                 .backgroundColor(0xF5F5F5)                 .padding(left:10,right:10,top:15,bottom:15)                 .justifyContent(FlexAlign.SpaceBetween)             }             .width(100.percent)             .padding(left:12,right:12)         }         .width(100.percent)         .height(100.percent)     } }

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