HarmonyOS NEXT 应用开发实战(十、从零设计一款个人中心页面详细示例)

news2024/11/24 12:56:30

随着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:为用户提供了一系列功能入口,如本地视频、在线音乐等。

页面布局采用了ColumnRow进行分层,同时使用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,支持在线实时协作

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2232434.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Socket篇(网络通信)

目录 一、UDP 通信 1. 简介 2. UDP 编程的两个实现类 DatagramSocket DatagramPacket 3. 代码示例 示例一:一发/一收 发送端 接收端 示例二:多发/多收 发送端 接收端 示例三:多发/多收 发送端 接收端一 接收端二 示例四&…

江协科技STM32学习- P31 I2C通信协议

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

Docker部署Portainer CE结合内网穿透实现容器的可视化管理与远程访问

文章目录 前言1. 本地安装Docker2. 本地部署Portainer CE3. 公网远程访问本地Portainer-CE3.1 内网穿透工具安装3.2 创建远程连接公网地址4. 固定Portainer CE公网地址前言 本篇文章介绍如何在Ubuntu中使用docker本地部署Portainer CE可视化管理工具,并结合cpolar实现公网远程…

数据结构之二叉树--前序,中序,后序详解(含源码)

二叉树 二叉树不能轻易用断言,因为树一定有空 二叉树链式结构的实现 在学习二叉树的基本操作前,需先要创建一棵二叉树,然后才能学习其相关的基本操作。 typedef int BTDataType; typedef struct BinaryTreeNode {BTDataType _data;struct B…

数据库条件查询排查——引号故障

一、错误代码 $where_查询职汇总员[$value头[EmpCode]]$value职员[EmpCode]; 二、正常写法 $where_查询职汇总员[EmpCode]$value职员[EmpCode]; 三、原因 前一个是变量嵌套,这里不需要嵌套

前端用docker部署

1、环境检查 首先需要确认服务器上是否已经安装docker了。 在服务器上执行docker -v 显示对应的版本号说明已经安装好了docker 2、部署 使用Docker部署若依项目的前端服务,我们最终实现的是:启动一个镜像,我们的整个前端就启动了&#xf…

Matlab实现白鲸优化算法(BWO)求解路径规划问题

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1内容介绍 白鲸优化算法(BWO)是一种受自然界白鲸捕食行为启发的新型优化算法,它通过模拟白鲸的群体捕猎策略和社会互动来探索问题的最优解。BWO因其强大的全局搜索能力和高效的局部搜索能…

CPU 中央处理器调优

文章目录 1.1 CPU处理方式:1.2 查看CPU一秒钟有多个切换多少次。1.3 调整进程优先级使用更多CPU1.4 CPU亲和力1.5 CPU 性能监控1.6 CPU 利用率比例分配: 1.1 CPU处理方式: 批处理,顺序处理请求。(切换次数少,吞吐量大…

C#:强大而优雅的编程语言

在当今的软件开发领域,C#作为一种广泛应用的编程语言,以其强大的功能、优雅的语法和丰富的生态系统,受到了众多开发者的喜爱。本文将深入探讨 C#的各个方面,展示它的魅力和优势。 一、C#的历史与发展 C#是由微软公司开发的一种面…

信息安全工程师(74)网络安全风险评估技术方法与工具

前言 网络安全风险评估是依据有关信息安全技术和管理标准,对网络系统的保密性、完整性、可控性等安全数据进行科学评价的过程。 一、网络安全风险评估技术方法 风险评估程序 资产评估:确定需要保护的资源。威胁评估:确定可能对资产造成危害的…

【InfluxDB】InfluxDB 2.x基础概念及原理

InfluxDB简介 什么是时序数据库 时序数据库,全称时间序列数据库(Time Series Database,TSDB),用于存储大量基于时间的数据。时序数据库支持时序数据的快速写入、持久化,多维度查询、聚合等操作&#xff0…

sparkSQL面试题

一、查询所有数学课程成绩大于语文课程成绩的学生学号 数据 1,yuwen,43 1,shuxue,55 2,yuwen,77 2,shuxue,88 3,yuwen,98 3,shuxue,65 3,yingyu,88 基本步骤: 进行行转列比较语文与数学的成绩 SQL代码: with t1 as(SELECT id,sum(if(name yuwen,sc…

金融标准体系

目录 基本原则 标准体系结构图 标准明细表 金融标准体系下载地址 基本原则 需求引领、顶层设计。 坚持目标导向、问题导向、结果 导向有机统一,构建支撑适用、体系完善、科学合理的金融 标准体系。 全面系统、重点突出。 以金融业运用有效、保护有力、 管理高…

Spring Boot解决 406 错误之返回对象缺少Getter/Setter方法引发的问题

目录 前言1. 问题背景2. 问题分析2.1 检查返回对象 3. 解决方案3.1 确保Controller返回Result类型3.2 测试接口响应 4. 原理探讨5. 常见问题排查与优化建议结语 前言 在Spring Boot开发中,接口请求返回数据是系统交互的重要环节,尤其在开发RESTful风格的…

如何自学机器学习?

自学机器学习可以按照以下步骤进行: 一、基础知识准备 数学基础: 高等数学:学习微积分(包括导数、微分、积分等)、极限、级数等基本概念。这些知识是后续学习算法和优化方法的基础。 线性代数:掌握矩阵…

SQL,力扣题目1709,访问日期之间最大的空档期

一、力扣链接 LeetCode_1709 二、题目描述 表: UserVisits ------------------- | Column Name | Type | ------------------- | user_id | int | | visit_date | date | ------------------- 该表没有主键,它可能有重复的行 该表包含用户访问…

C# 日志框架 NLog、log4net 和 Serilog对比

文章目录 前言NLog、log4net 和 Serilog 三个框架的详细对比:一、NLog优点:缺点:二、 log4net优点缺点三、Serilog优点缺点四、Serilog使用举例总结前言 NLog、log4net 和 Serilog 三个框架的详细对比: NLog、log4net 和 Serilog 是三个非常流行的 .NET 日志框架,它们各自…

电路设计过程就是波形整形过程

这种说法有一定的道理。在电路设计中,常常需要对输入的电信号波形进行处理和调整,以满足后续电路或系统的要求,这在某种程度上可以理解为波形整形的过程。 例如,在数字电路中,输入的信号可能存在噪声、干扰或者不符合…

系统架构设计师(软考高级)一站式通关课程

系统架构设计师(软考高级) 一站式通关课程 系统架构设计师(软考高级)教程(三连评论分享链接!) 🎯 课程亮点: 全面覆盖: 从基础概念到高级应用,涵盖…