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

一、页面的模块介绍

        我的页面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

1. @Component
2. export default struct MineUser{
3.   build() {
4.         Row(){
5.           Image($r('app.media.catpicture'))
6.             .width(60)
7.             .height(60)
8.             .margin({left:20,right:30})
9.           Column(){
10.             Text('张三')
11.               .fontSize(20)
12.             Text('111111000@qq.com')
13.               .fontSize(14)
14.               .margin({top:5})
15.           }
16.           .alignItems(HorizontalAlign.Start) //在水平轴靠左对齐
17.       }
18.     .alignItems(VerticalAlign.Center)  //在垂直轴居中对齐
19.     .backgroundColor(Color.White)
20.     .width('90%')
21.     .margin({top:20,bottom:20})
22.     .borderRadius(25)
23.     .height(100)
26.   }
27. }

复制代码

ets/view/components/MineList.ets

1. import {ItemType} from '../../model/types'
2. import promptAction from '@ohos.promptAction';  //弹窗
3. @Component
4. export default struct MineList{
5.   @State message: string = '我的列表'
6.   private listData:Array<ItemType>=[
7.     {
8.       title:'推送通知',
9.       img:$r('app.media.my_notice')
10.     },
11.     {
12.       title:'数据管理',
13.       img:$r('app.media.my_data')
14.     },
15.     {
16.       title:'菜单设置',
17.       img:$r('app.media.my_menu')
18.     },
19.     {
20.       title:'关于',
21.       img:$r('app.media.my_about')
22.     },
23.     {
24.       title:'清除缓存',
25.       img:$r('app.media.my_clear')
26.     },
27.     {
28.       title:'隐私协议',
29.       img:$r('app.media.my_privacy')
30.     }
31.   ]
32.   build() {
33.     List(){
34.       ForEach(this.listData,(item:ItemType)=>{
35.         ListItem(){
36.           Row(){
37.             Row({space:15}){
38.               Image(item.img)
39.                 .width(30)
40.                 .height(30)
41.               Text(item.title)
42.                 .fontSize(16)
43.                 .fontWeight(FontWeight.Bold)
44.             }
45.             //开关组件 切换按钮组件
46.             //Toggle() isOn开关状态
47.             Toggle({type:ToggleType.Switch,isOn:false})
48.               .width(40)
49.               .height(20)
50.               .onChange((isChange:boolean)=>{
51.                 //isChange代表打开或关闭的状态
52.                 let tip:string = isChange?'系统选项已打开':'系统选项已关闭'
53.                 promptAction.showToast({
54.                   message:tip,
55.                   duration:2000
56.                 })
57.               })
58.           }
59.           .width('100%')
60.           .justifyContent(FlexAlign.SpaceBetween)
61.           .padding(12)
62.         }
63.         .height(60)
64.       })
65.     }
66.     .width('100%')
67.     .backgroundColor(Color.White)
68.     .borderRadius(25)
69.     .padding({top:5,bottom:5})
70.     .divider({
71.       color:'#dddd',
72.       strokeWidth:1   //分割线的宽度
73.     })   //分割线
74.   }
76. }

复制代码

ets/view/MinePage.ets

1. import MineUser from './components/MineUser'
2. import MineList from './components/MineList'
3. import router from '@ohos.router';
4. @Component
5. export default struct MinePage {
6.   @State message: string = '我的'
9.   build() {
10.     Row() {
11.       Column(){
12.         Text(this.message)
13.           .margin(10)
14.           .fontSize(25)
15.           .width('95%')
16.           .fontWeight(FontWeight.Bold)
17.           .textAlign(TextAlign.Start)
19.         //用户描述
20.         MineUser()
21.         //列表
22.         MineList()
23.         //退出登录
24.         Button('退出登录')
25.           .width('90%')
26.           .height(40)
27.           .backgroundColor('#dddd')
28.           .fontColor(Color.Red)
29.           .margin({top:30})
30.           .onClick(()=>{
31.             //跳转
32.             router.pushUrl({
33.               url:'pages/LoginPage' //跳转到登录页面
34.             }).catch((error:Error)=>{
35.               //异常处理
37.             })
38.           })
40.       }
41.       .width('100%')
42.       .height('100%')
43.     }
44.     .backgroundColor('#f1f3f5')
45.   }
47. }

复制代码

四、知识点科普

Toggle

        Toggle组件是一个交互式UI组件，用于切换两种状态之间的选择或开关。它通常用于表示开关按钮，比方在设置中启用或禁用某些选项。 

        在Toggle组件中，用户可以点击按钮来切换状态，大概使用键盘或其他输入设备上的快捷键。通常，Toggle组件会在用户点击或切换状态时触发一个事件，以便应用步伐可以响应此更改。

Toggle组件通常包含以部属性：

• type：表示当前Toggle组件类型。
  
• isOn：表示当前Toggle组件选中的状态。
  
• onChange：在Toggle组件状态改变时触发的事件处理函数。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。