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

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

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

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

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

#harmonyos#