鸿蒙期末大作业——甜点店铺APP（五）我的页面的详细完善
一、页面的模块介绍我的页面MinePage主要分为三个模块部分——用户形貌、列表以及退出登录模块。我们首先在view中的components中新建两个新的ets文件——MineUser.ets和MineList.ets，方便在MinePage.ets中导入该模块直接进行引用。
在用户形貌模块，添加头像和用户姓名、邮箱，并设置图片高度和宽度，字体巨细和外间距。并设置整体的背景颜色、宽度占比、外间距以及圆角巨细、高度。
在我的列表模块，首先定义一个ItemType接口类型的listData数组，里面传入多组数据。通过ForEach循环遍历对每一组数据进行加载渲染，加载文字和图片，设置图片的高度和宽度、字体的巨细和粗细。在这里我们还需要用到切换按钮组件Toggle，用来控制各种功能的开关。我们设置该组件的类型为开关组件即ToggleType.Switch，初始状态为关闭，设置组件的宽高度，为组件添加触发事件。当我们点击，会有弹窗提示—‘系统选项已打开’；再次点击—‘系统选项已关闭’。并且将每个组件之间加上分割线，并且设置分割线的颜色和宽度。
最后在MinePage加载出两个组件—MineUser.ets和MineList.ets，再添加一个退出登录的按钮，并且设置背景颜色、字体颜色以及点击事件，当点击按钮时进行页面跳转，跳转到登录页面。
二、效果展示
https://i-blog.csdnimg.cn/blog_migrate/4f655c46c7b3ec1a7d69aaaced9a63ce.png
https://i-blog.csdnimg.cn/blog_migrate/c7106f6660fc9f60135945ab7e9b2d05.png
三、代码实现
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')
}
} 四、知识点科普
Toggle
Toggle组件是一个交互式UI组件，用于切换两种状态之间的选择或开关。它通常用于表示开关按钮，比方在设置中启用或禁用某些选项。
在Toggle组件中，用户可以点击按钮来切换状态，大概使用键盘或其他输入设备上的快捷键。通常，Toggle组件会在用户点击或切换状态时触发一个事件，以便应用步伐可以响应此更改。
Toggle组件通常包含以部属性：
[*]type：表示当前Toggle组件类型。
[*]isOn：表示当前Toggle组件选中的状态。
[*]onChange：在Toggle组件状态改变时触发的事件处理函数。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]