《仿盒马》app开发技术分享-- 个人中心页面(19)

举报
yd_215151764 发表于 2025/06/30 10:25:47 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了分类页面的所有联动效果,这一节我们要开始完成一个新的页面,这个页面是我们主界面的第四个板块,就是个人中心页面。在这个模块,我们可以显示一些用户信息,以及用户相关的各类功能的入口## 功能分析要实现个人中心页面,首先我们要规划好整体的布局,我们选择从上到下实现,分为三块,一块显示用户信息,一块显示关键信息,一块用来展...


## 技术栈

Appgallery connect
## 开发准备

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

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

## 代码实现

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


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<SectionLine>{
    let  listData:SectionLine[]=[
      new SectionLine("订单",
        "",
          $r('app.media.order'),
        true),
      new SectionLine("地址簿",
        "设置常用地址",
        $r('app.media.address'),
        false),
    ]
    return listData
  }


  getSectionListTwo():Array<SectionLine>{
    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)
  }
}
到这里我们就实现了个人中心的静态页面了

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。