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

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

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

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

我们可以先分析下整个页面的布局结构。可以看出它是纵向的布局，整个页面由导航栏、个人资料、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语言##仓颉##购物#