《仿盒马》app开发技术分享-- 个人中心页面（端云一体）

开发准备

上一节我们实现了分类页面的所有联动效果，这一节我们要开始完成一个新的页面，这个页面是我们主界面的第四个板块，就是个人中心页面。在这个模块，我们可以显示一些用户信息，以及用户相关的各类功能的入口

功能分析

要实现个人中心页面，首先我们要规划好整体的布局，我们选择从上到下实现，分为三块，一块显示用户信息，一块显示关键信息，一块用来展示用户相关的各种入口列表

代码实现

因为我们要实现列表所以我们需要先创建实体类并且填充对应的数据

export class SectionLine {
title: string;
subtitle: string;
url: string|ResourceStr;
showDividerLine: boolean

constructor(title: string, subtitle: string, url: string|ResourceStr,showDividerLine:boolean) {
this.title = title;
this.subtitle = subtitle;
this.url = url;
this.showDividerLine=showDividerLine;
}

}
这里的url 类型我们注意写成多类型，这样后期我们的内容要修改，我们的改动就会比较小

然后添加数据，我们暂时只添加三个入口

import { SectionLine } from “…/entity/SectionLine”;

export class SectionLineViewModel {
getSectionListOne():Array{
let listData:SectionLine[]=[
new SectionLine(“订单”,
“”,
$r(‘app.media.order’),
true),
new SectionLine(“地址簿”,
“设置常用地址”,
$r(‘app.media.address’),
false),
]
return listData
}

getSectionListTwo():Array{
let listData:SectionLine[]=[

  new SectionLine("关于",
    "",
    $r('app.media.guanyu'),
    true),
]
return listData

}
}

export default new SectionLineViewModel();
添加完成后我们来到页面完善我们设计的三块内容

import { SectionLine } from ‘…/entity/SectionLine’;
import SectionLineViewModel from ‘…/model/SectionLineViewModel’;

@Component
export struct Mine {

@State num:number=0
@Builder MenuItem(item: SectionLine){
Column(){
Row(){
Image(item.url).width(20).height(20)
.objectFit(ImageFit.Cover)
.interpolation(ImageInterpolation.High)
Text(item.title)
.margin({left:10})
.fontColor(“#ff333333”)
.fontSize(16)

    Blank()
    Text(item.subtitle)
      .fontColor($r('app.color.color_999'))
      .fontSize(14)
      .margin({right:6})
    Image($r('app.media.back_right_recycle'))
      .width(7).height(13)
      .objectFit(ImageFit.Contain)
      .interpolation(ImageInterpolation.High)
  }
  .padding({left:13,right:13})
  .alignItems(VerticalAlign.Center)
  .height($r('app.float.size_49'))
  .width('100%')
  .backgroundColor(Color.White)
  if (item.showDividerLine){
    Divider().width('100%').height(0.8)
      .color("#e6e6e6")
  }

}
.width('100%')

}

aboutToAppear(){

}

build() {
Column() {

  Stack({alignContent:Alignment.Top}){
    Row().width('100%')
      .height('100%')
      .linearGradient({
        angle:180,
        colors: [[0xff0000, 0], [0xff6666, 0.2], [0xffffff, 1]]
      })
    Column(){
      Row() {
        Image($r('app.media.background'))
          .height(55)
          .width(55)
          .borderRadius(27)
          .objectFit(ImageFit.Contain)
          .interpolation(ImageInterpolation.High)
        Column() {
          Text('用户111')
            .fontSize(24)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          Text('vip6')
            .fontSize(14)
        }
        .alignItems(HorizontalAlign.Start)
        .margin({ left: 10 })
        Blank()
          .layoutWeight(1)
        Image($r('app.media.ic_arrow_bold'))
          .height(16)
          .width(16)
          .margin(20)
          .objectFit(ImageFit.Contain)
          .interpolation(ImageInterpolation.High)
      }
      .justifyContent(FlexAlign.Start)
      .margin({top: 30 })

      Row(){
        Row(){
          Image($r('app.media.balance'))
            .margin({left:8})
            .height(34)
            .width(34)
            .objectFit(ImageFit.Contain)
            .interpolation(ImageInterpolation.High)
          Column(){
            Text("￥15")
              .fontSize(16)
              .fontColor($r('app.color.color_333'))
            Row(){
              Text("余额")
                .fontSize(13)
                .fontColor($r('app.color.color_999'))
              Image($r('app.media.back_right_recycle'))
                .margin({left:6})
                .height(14)
                .width(14)
                .objectFit(ImageFit.Contain)
                .interpolation(ImageInterpolation.High)
            }
          }
          .alignItems(HorizontalAlign.Start)
          .margin({left:13})
          .onClick(()=>{
          })
        }
        .width('40%')
        Divider()
          .vertical(true)
          .height('100%').margin({top:5,bottom:5})
          .margin({left:20})
        Row(){
          Image($r('app.media.points'))
            .height(34)
            .width(34)
            .objectFit(ImageFit.Contain)
            .interpolation(ImageInterpolation.High)
          Column(){
            Text("积分商城")
              .fontSize(16)
              .fontColor($r('app.color.color_333'))
            Row(){
              Text("积分兑换")
                .fontSize(13)
                .fontColor($r('app.color.color_reds'))
              Image($r('app.media.back_right_recycle'))
                .margin({left:6})
                .height(14)
                .width(14)
                .objectFit(ImageFit.Contain)
                .interpolation(ImageInterpolation.High)
            }

          }
          .margin({left:8})
          .alignItems(HorizontalAlign.Start)
        }
        .margin({left:8})
        .alignItems(VerticalAlign.Center)
        .width('40%')

      }
      .justifyContent(FlexAlign.Start)
      .height(80)
      .width('100%')
      .padding(8)
      .margin({top:40})
      .backgroundColor(Color.White)
      .borderRadius(8)
    }
    .padding({left:12,right:12})
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
  .height(180)

  Column(){
    ForEach(SectionLineViewModel.getSectionListOne(),(item:SectionLine)=>{
      this.MenuItem(item)
    })
  }
  .borderRadius(10)
  .margin({top:35,left:12,right:12})
  Column(){
    ForEach(SectionLineViewModel.getSectionListTwo(),(item:SectionLine)=>{
      this.MenuItem(item)
    })
  }
  .width('100%')
  .borderRadius(10)
  .margin({top:10,left:12,right:12})

}
.height('100%')
.backgroundColor("#f7f7f7")
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start)

}
}
都完成之后我们执行一下代码看看效果

到这里我们就实现了个人中心的静态页面了