鸿蒙仓颉语言开发实战教程：商城应用个人中心页面
作者：幽蓝计划
- 2025-06-07 山东
本文字数：3216 字
阅读完需：约 11 分钟
又到了高考的日子，幽蓝君在这里祝各位考生朋友冷静答题，超常发挥。今天要分享的内容是仓颉语言商城应用的个人中心页面，先看效果图：
下面介绍下这个页面的实现过程。我们可以先分析下整个页面的布局结构。可以看出它是纵向的布局，整个页面由导航栏、个人资料、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.pageimport ohos.base.*import ohos.component.*import ohos.state_manage.*import ohos.state_macro_manage.*import ohos.router.Routerimport cj_res_entry.appimport std.collection.ArrayList@Entry@Componentpublic 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 语言 ##仓颉 ##购物 #
划线
评论
复制
发布于: 刚刚阅读数: 2
版权声明: 本文为 InfoQ 作者【幽蓝计划】的原创文章。
原文链接:【http://xie.infoq.cn/article/2ca52a24f39d5db09cc081ab7】。未经作者许可，禁止转载。
幽蓝计划
关注
还未添加个人签名 2025-05-09 加入
还未添加个人简介
评论