随着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，支持在线实时协作
