随着HarmonyOS的不断发展,越来越多的开发者开始关注这个平台上的应用开发。本篇文章将详细讲解如何从零开始设计一款个人中心页,并在代码中实现其相关功能。
1. 项目结构设计
首先,我们需要设计一个合理的项目结构。我们将个人中心页面分为几个主要部分:
- 收藏按钮区域:显示用户的收藏项和数量
- 功能按钮列表:提供快捷功能入口
- 菜单项列表:提供其他设置和信息访问
2. 数据结构定义
为了方便管理,我们定义了几个接口来规范数据结构:
interface FavBtnItem {
count: number;
title: string; // 按钮标题
pagePath: string; // 页面路径
}
interface ListBtnItem {
title: string; // 菜单标题
pagePath: string; // 页面路径
}
interface FunBtnItem {
title: string; // 功能标题
color: string; // 按钮颜色
icon: string; // 图标资源
pagePath: string; // 页面路径
}
3. 页面组件实现
接下来,我们实现个人中心页的主要构建逻辑。以下是使用HarmonyOS NEXT的代码实现:
@Entry
@Component
export default struct Mine {
pageStack: NavPathStack = new NavPathStack()
private favButtons: FavBtnItem[] = [
{count: 0, title: "收藏影视", pagePath: ""},
{count: 0, title: "播放历史", pagePath: ""},
{count: 0, title: "收藏音乐", pagePath: ""},
{count: 0, title: "我的足迹", pagePath: ""},
];
private listButtons: ListBtnItem[] = [
{title: "我的消息", pagePath: ""},
{title: "意见反馈", pagePath: ""},
{title: "分享链接", pagePath: ""},
{title: "检查更新", pagePath: ""},
{title: "关于我们", pagePath: ""},
];
private funButtons: FunBtnItem[] = [
{title: "电视直播", color: '#00FF00', icon: 'app.media.camera_video', pagePath: ""},
{title: "本地视频", color: '#00FF00', icon: 'app.media.music', pagePath: ""},
{title: "本地图片", color: '#00FF00', icon: 'app.media.music', pagePath: ""},
{title: "在线音乐", color: '#00FF00', icon: 'app.media.music', pagePath: ""},
{title: "播放链接", color: '#00FF00', icon: 'app.media.music', pagePath: ""},
];
build() {
Navigation(this.pageStack) {
Column() {
Column(){
Button('登录').width(120).fontColor(Color.Green)
.align(Alignment.Center).backgroundColor(Color.White);
}
.justifyContent(FlexAlign.Center)
.backgroundColor('rgba(85, 170, 255,0.6)')
.size({ width: '100%', height: 200 });
Row({space: 30}){
ForEach(this.favButtons, (item: FavBtnItem, idx) => {
Column({space: 2}){
Text(item.count.toString());
Text(item.title).fontColor('#AAAAAA');
}
});
}
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.White)
.width('100%').height(80);
// 功能列表
Column(){
Text('功能列表').width('100%').padding(10);
Grid() {
ForEach(this.funButtons, (item: FunBtnItem, idx) => {
GridItem() {
Column({space: 2}){
Image($r(item.icon)).width(32).fillColor(item.color);
Text(item.title).fontSize(14);
}
}
});
}
.rowsTemplate('1fr 1fr')
.columnsTemplate('1fr 1fr 1fr 1fr')
.width('100%').height(150);
}.width('100%').height(200).justifyContent(FlexAlign.Start).backgroundColor(Color.White);
// 菜单项
List({ space: 15 }) {
ForEach(this.listButtons, (item: ListBtnItem, idx) => {
ListItem(){
Row(){
Text(item.title).layoutWeight(12);
Text('>').fontColor('#AAAAAA').layoutWeight(1);
}
}
});
}.divider({strokeWidth: 2, color: '#F1F3F5'})
.padding(10);
}
.backgroundColor('F4F4F4')
.size({ width: '100%', height: '100%' });
}
.mode(NavigationMode.Stack)
.titleMode(NavigationTitleMode.Mini)
.title("我的")
.hideBackButton(true)
.width('100%').height('100%');
}
}
4. 代码解析
- FavBtnItem:用于展示用户的收藏项,包括数量和标题。
- ListBtnItem:包括用户的消息、反馈等操作的按钮。
- FunBtnItem:为用户提供了一系列功能入口,如本地视频、在线音乐等。
页面布局采用了Column
和Row
进行分层,同时使用Grid
来展示多个功能。通过ForEach
方法实现动态内容的生成,确保代码的灵活性和可维护性。
关于icon图标,可以使用svg是矢量图,而且这种矢量图,任意放大不失真,可以修改颜色。放在media目录下,和加载png图片的方式一样。
Image($r('app.media.music')).width(32).fillColor(item.color);
关于icon图标资源的获取,官方的有harmonyos-symbol(HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟),另外还有很多三方的资源可以用。如阿里的矢量图形库iconFont,Bootstrap 官方图标库,Octicons等等。
5. 总结
本文通过实例详细介绍了如何在HarmonyOS NEXT中设计个人中心页面。从数据结构的定义到页面UI的实现,我们提供了完整的代码示例。希望对初学者和开发者有所帮助,让大家更好地理解HarmonyOS NEXT的开发流程。在实际开发中,别忘了根据实际需求进行适当的调整和扩展,提升用户体验。
项目开源地址
zhihudaily: HarmonyOS NEXT 项目开发实战,仿知乎日报的实现
写在最后
最后,推荐下笔者的业余开源app影视项目“爱影家”,推荐分享给与我一样喜欢免费观影的朋友。【注】:该项目仅限于学习研究使用!请勿用于其他用途!
开源地址:爱影家app开源项目介绍及源码
https://gitee.com/yyz116/imovie
其他资源
开发-HarmonyOS NEXT鸿蒙应用开发平台-华为开发者联盟
文档中心
文档中心--创建网格 (Grid/GridItem)
https://zhuanlan.zhihu.com/p/684044091
iconfont-阿里巴巴矢量图标库
https://zhuanlan.zhihu.com/p/641557895
百度安全验证
2024前端图标库推荐,高手出品!
Octicons ,OcticonsOcticons ,
Bootstrap 图标库 · Bootstrap 官方开源图标(icon)库
鸿蒙开发之ArkUI 界面篇 八 svg图标的使用-CSDN博客
HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟
Pixso官网 - 新一代UI设计工具,替代Sketch,Figma,支持在线实时协作