鸿蒙期末大作业——甜点店铺APP（五）我的页面的详细完善

本文链接：https://blog.csdn.net/qq_74141710/article/details/139785220

一、页面的模块介绍

我的页面MinePage主要分为三个模块部分——用户描述、列表以及退出登录模块。我们首先在view中的components中新建两个新的ets文件——MineUser.ets和MineList.ets，方便在MinePage.ets中导入该模块直接进行引用。

在用户描述模块，添加头像和用户姓名、邮箱，并设置图片高度和宽度，字体大小和外间距。并设置整体的背景颜色、宽度占比、外间距以及圆角大小、高度。

在我的列表模块，首先定义一个ItemType接口类型的listData数组，里面传入多组数据。通过ForEach循环遍历对每一组数据进行加载渲染，加载文字和图片，设置图片的高度和宽度、字体的大小和粗细。在这里我们还需要用到切换按钮组件Toggle，用来控制各种功能的开关。我们设置该组件的类型为开关组件即ToggleType.Switch，初始状态为关闭，设置组件的宽高度，为组件添加触发事件。当我们点击，会有弹窗提示—‘系统选项已打开’；再次点击—‘系统选项已关闭’。并且将每个组件之间加上分割线，并且设置分割线的颜色和宽度。

最后在MinePage加载出两个组件—MineUser.ets和MineList.ets，再添加一个退出登录的按钮，并且设置背景颜色、字体颜色以及点击事件，当点击按钮时进行页面跳转，跳转到登录页面。

二、效果展示

三、代码实现

ets/view/components/MineUser.ets

@Component
export default struct MineUser{
  build() {
        Row(){
          Image($r('app.media.catpicture'))
            .width(60)
            .height(60)
            .margin({left:20,right:30})
          Column(){
            Text('张三')
              .fontSize(20)
            Text('111111000@qq.com')
              .fontSize(14)
              .margin({top:5})
          }
          .alignItems(HorizontalAlign.Start) //在水平轴靠左对齐
      }
    .alignItems(VerticalAlign.Center)  //在垂直轴居中对齐
    .backgroundColor(Color.White)
    .width('90%')
    .margin({top:20,bottom:20})
    .borderRadius(25)
    .height(100)


  }
}

ets/view/components/MineList.ets

import {ItemType} from '../../model/types'
import promptAction from '@ohos.promptAction';  //弹窗
@Component
export default struct MineList{
  @State message: string = '我的列表'
  private listData:Array<ItemType>=[
    {
      title:'推送通知',
      img:$r('app.media.my_notice')
    },
    {
      title:'数据管理',
      img:$r('app.media.my_data')
    },
    {
      title:'菜单设置',
      img:$r('app.media.my_menu')
    },
    {
      title:'关于',
      img:$r('app.media.my_about')
    },
    {
      title:'清除缓存',
      img:$r('app.media.my_clear')
    },
    {
      title:'隐私协议',
      img:$r('app.media.my_privacy')
    }
  ]
  build() {
    List(){
      ForEach(this.listData,(item:ItemType)=>{
        ListItem(){
          Row(){
            Row({space:15}){
              Image(item.img)
                .width(30)
                .height(30)
              Text(item.title)
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
            }
            //开关组件 切换按钮组件
            //Toggle() isOn开关状态
            Toggle({type:ToggleType.Switch,isOn:false})
              .width(40)
              .height(20)
              .onChange((isChange:boolean)=>{
                //isChange代表打开或关闭的状态
                let tip:string = isChange?'系统选项已打开':'系统选项已关闭'
                promptAction.showToast({
                  message:tip,
                  duration:2000
                })
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .padding(12)
        }
        .height(60)
      })
    }
    .width('100%')
    .backgroundColor(Color.White)
    .borderRadius(25)
    .padding({top:5,bottom:5})
    .divider({
      color:'#dddd',
      strokeWidth:1   //分割线的宽度
    })   //分割线
  }

}

ets/view/MinePage.ets

import MineUser from './components/MineUser'
import MineList from './components/MineList'
import router from '@ohos.router';
@Component
export default struct MinePage {
  @State message: string = '我的'


  build() {
    Row() {
      Column(){
        Text(this.message)
          .margin(10)
          .fontSize(25)
          .width('95%')
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Start)

        //用户描述
        MineUser()
        //列表
        MineList()
        //退出登录
        Button('退出登录')
          .width('90%')
          .height(40)
          .backgroundColor('#dddd')
          .fontColor(Color.Red)
          .margin({top:30})
          .onClick(()=>{
            //跳转
            router.pushUrl({
              url:'pages/LoginPage' //跳转到登录页面
            }).catch((error:Error)=>{
              //异常处理

            })
          })

      }
      .width('100%')
      .height('100%')
    }
    .backgroundColor('#f1f3f5')
  }

}