当前位置: 首页 > news >正文

基于HarmonyOS的宠物收养系统的设计与实现(一)

基于HarmonyOS的宠物收养系统的设计与实现(一)

本系统是简易的宠物收养系统,为了更加熟练地掌握HarmonyOS相关技术的使用。

项目创建

创建一个空项目取名为PetApp

首页实现(组件导航使用)

官方文档:组件导航(Navigation)

实现目标效果:
5个工具选项,对应5个页面,点击工具栏在内容区切换子组件页面和标题
在这里插入图片描述
打开src/main/ets/pages 编辑Index.ets文件
Index.ets

import { AccountPage } from './AccountPage'
import { FavoritePage } from './FavoritePage'
import { HomePage } from './HomePage'
import { MapsPage } from './MapsPage'
import { MessagePage } from './MessagePage'@Entry
@Component
struct Index {private menuItem:NavigationMenuItem = {value:"",icon:"./images/list.png",action:()=>{}}private toolBarItemHome:ToolbarItem = {value:"Home",icon:"./images/home.png",action:()=>{this.pageName = "HomePage"this.title = "Home"}}private toolBarItemMaps:ToolbarItem = {value:"Maps",icon:"./images/maps.png",action:()=>{this.pageName = "MapsPage"this.title = "Maps"}}private toolBarItemFavorite:ToolbarItem = {value:"Favorite",icon:"./images/favorite.png",action:()=>{this.pageName = "FavoritePage"this.title = "Favorite"}}private toolBarItemMessage:ToolbarItem = {value:"Message",icon:"./images/message.png",action:()=>{this.pageName = "MessagePage"this.title = "Message"}}private toolBarItemAccount:ToolbarItem = {value:"Account",icon:"./images/account.png",action:()=>{this.pageName = "AccountPage"this.title = "Account"}}@State pageName:string = "HomePage";@State title:string = "Home"build() {Navigation(this.pageStack){if(this.pageName === 'HomePage'){HomePage()}else if(this.pageName === 'MapsPage'){MapsPage()}else if(this.pageName === 'FavoritePage'){FavoritePage()}else if(this.pageName === 'MessagePage'){MessagePage()}else {AccountPage()}}.titleMode(NavigationTitleMode.Mini)//标题模式.title(this.title)//设置标题.menus([this.menuItem])//设置顶部菜单.toolbarConfiguration([this.toolBarItemHome,this.toolBarItemMaps,this.toolBarItemFavorite,this.toolBarItemMessage,this.toolBarItemAccount])//底部工具栏}
}

添加首页 HomePage.ets

@Entry
@Component
export struct HomePage {build() {NavDestination(){Text("home")Text("home")Text("home")}}
}

添加地图页MapsPage.ets

@Entry
@Component
export struct MapsPage {build() {NavDestination(){Text("maps")Text("maps")Text("maps")}}
}

添加喜欢宠物页FavoritePage.ets

@Entry
@Component
export struct MapsPage {build() {NavDestination(){Text("maps")Text("maps")Text("maps")}}
}

添加消息页MessagePage.ets

@Entry
@Component
export struct MessagePage {build() {NavDestination(){Text("Message")Text("Message")Text("Message")}}
}

添加账号信息页AccountPage.ets

@Entry
@Component
export struct AccountPage {build() {NavDestination(){Text("Account")Text("Account")Text("Account")}}
}

实现效果

在这里插入图片描述

实现点击工具栏高亮

修改index.ets,添加changeState方法、activeIcon属性、status属性。

import { AccountPage } from './AccountPage'
import { FavoritePage } from './FavoritePage'
import { HomePage } from './HomePage'
import { MapsPage } from './MapsPage'
import { MessagePage } from './MessagePage'@Entry
@Component
struct Index {aboutToAppear(): void {this.changeState(0)}changeState(index:number){for(let i=0;i<this.toolBars.length;i++){this.toolBars[i].status=ToolbarItemStatus.NORMAL}this.toolBars[index].status = ToolbarItemStatus.ACTIVE}private menuItem:NavigationMenuItem = {value:"",icon:"./images/list.png",action:()=>{}}@State toolBarItemHome:ToolbarItem = {value:"Home",icon:"./images/home.png",activeIcon:"./images/home_a.png",action:()=>{this.pageName = "HomePage"this.title = "Home"this.changeState(0)}}@State toolBarItemMaps:ToolbarItem = {value:"Maps",icon:"./images/maps.png",status:ToolbarItemStatus.NORMAL,activeIcon:"./images/maps_a.png",action:()=>{this.pageName = "MapsPage"this.title = "Maps"this.changeState(1)}}@State toolBarItemFavorite:ToolbarItem = {value:"Favorite",icon:"./images/favorite.png",activeIcon:"./images/favorite_a.png",action:()=>{this.pageName = "FavoritePage"this.title = "Favorite"this.changeState(2)}}@State toolBarItemMessage:ToolbarItem = {value:"Message",icon:"./images/message.png",activeIcon:"./images/message_a.png",action:()=>{this.pageName = "MessagePage"this.title = "Message"this.changeState(3)}}@State toolBarItemAccount:ToolbarItem = {value:"Account",icon:"./images/account.png",activeIcon:"./images/account_a.png",action:()=>{this.pageName = "AccountPage"this.title = "Account"this.changeState(4)}}@State toolBars:ToolbarItem[] = [this.toolBarItemHome,this.toolBarItemMaps,this.toolBarItemFavorite,this.toolBarItemMessage,this.toolBarItemAccount];@State pageName:string = "HomePage";@State title:string = "Home"build() {Navigation(this.pageStack){if(this.pageName === 'HomePage'){HomePage()}else if(this.pageName === 'MapsPage'){MapsPage()}else if(this.pageName === 'FavoritePage'){FavoritePage()}else if(this.pageName === 'MessagePage'){MessagePage()}else {AccountPage()}}.titleMode(NavigationTitleMode.Mini)//标题模式.title(this.title)//设置标题.menus([this.menuItem])//设置顶部菜单.toolbarConfiguration(this.toolBars)//底部工具栏}
}

实现效果

在这里插入图片描述

相关文章:

基于HarmonyOS的宠物收养系统的设计与实现(一)

基于HarmonyOS的宠物收养系统的设计与实现&#xff08;一&#xff09; 本系统是简易的宠物收养系统&#xff0c;为了更加熟练地掌握HarmonyOS相关技术的使用。 项目创建 创建一个空项目取名为PetApp 首页实现&#xff08;组件导航使用&#xff09; 官方文档&#xff1a;组…...

严格模式报错

部分参考&#xff1a; Android内存泄露分析之StrictMode - 星辰之力 - 博客园 (cnblogs.com)...

nginx: [emerg] the “ssl“ parameter requires ngx_http_ssl_module in nginx.conf

nginx: [emerg] the "ssl" parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx.conf:42 查看/usr/local/nginx/conf/nginx.conf文件第42行数据&#xff1a; listen 443 ssl; # server中的配置 原因是&#xff1a;nginx缺少 http_ssl_modul…...

Docker 部署loki日志 用于微服务

因为每次去查看日志都去登录服务器去查询相关日志文件&#xff0c;还有不同的微服务&#xff0c;不同日期的文件夹&#xff0c;超级麻烦&#xff0c;因为之前用过ELK&#xff0c;原本打算用ELK&#xff0c;在做技术调研的时候发现了一个轻量级的日志系统Loki&#xff0c;果断采…...

[Day 57] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

區塊鏈的零知識證明技術 一、引言 隨著區塊鏈技術的不斷發展&#xff0c;如何在保護用戶隱私的同時確保數據的完整性和可信度成為了研究的焦點。零知識證明&#xff08;Zero-Knowledge Proof&#xff0c;ZKP&#xff09;技術就是其中的一項關鍵技術&#xff0c;它允許一方在不…...

06结构型设计模式——代理模式

一、代理模式简介 代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff08;GoF书中解释结构型设计模式&#xff1a;一种用来处理类或对象、模块的组合关系的模式&#xff09;&#xff0c;代理模式是其中的一种&#xff0c;它可以为其他对象提供一种代…...

《深入浅出多模态》(九)多模态经典模型:MiniGPT-v2、MiniGPT5

🎉AI学习星球推荐: GoAI的学习社区 知识星球是一个致力于提供《机器学习 | 深度学习 | CV | NLP | 大模型 | 多模态 | AIGC 》各个最新AI方向综述、论文等成体系的学习资料,配有全面而有深度的专栏内容,包括不限于 前沿论文解读、资料共享、行业最新动态以、实践教程、求职…...

调试和优化大型深度学习模型 - 0 技术介绍

调试和优化大型深度学习模型 - 0 技术介绍 flyfish LLaMA Factory LLaMA Factory 是一个简单易用且高效的大型语言模型&#xff08;Large Language Model&#xff09;训练与微调平台。通过 LLaMA Factory&#xff0c;可以在无需编写任何代码的前提下&#xff0c;在本地完成上…...

华为S3700交换机配置VLAN的方法​

1.VLAN的详细介绍 VLAN(Virtual Local Area Network)即虚拟局域网,是一种将一个物理的局域网在逻辑上划分成多个广播域的技术。 1.1基本概念 1)作用: 隔离广播域:通过将网络划分为不同的 VLAN,广播帧只会在同一 VLAN 内传播,而不会扩散到其他 VLAN 中,从而有效…...

学懂C++(三十八):深入详解C++网络编程:套接字(Socket)开发技术

目录 一、概述与基础概念 1.1 套接字&#xff08;Socket&#xff09;概念 1.2 底层原理与网络协议 1.2.1 网络协议 1.2.2 套接字工作原理 二、C套接字编程核心技术 2.1 套接字编程的基本步骤 2.2 套接字编程详细实现 2.2.1 创建套接字 2.2.2 绑定地址 2.2.3 监听和接…...

SpringBoot-配置加载顺序

目录 前言 样例 内部配置加载顺序 ​ 样例 小结 前言 我之前写的配置文件&#xff0c;都是放在resources文件夹&#xff0c;根据当前目录下&#xff0c;优先级的高低&#xff0c;判断谁先被加载。但实际开发中&#xff0c;我们写的配置文件并不是&#xff0c;都放…...

第八周:机器学习笔记

第八周机器学习笔记 摘要Abstract机器学习1. 鱼和熊掌和可兼得的机器学习1.1 Deep network v.s. Fat network 2. 为什么用来验证集结果还是不好&#xff1f; Pytorch学习1. 卷积层代码实战2. 最大池化层代码实战3. 非线性激活层代码实战 总结 摘要 本周学习对李宏毅机器学习视…...

音乐怎么剪切掉一部分?5个方法,轻松学会音频分割!(2024全新)

音乐怎么剪切掉一部分&#xff1f;音频文件是娱乐和创作的重要基础。音频在我们日常生活中发挥着重要作用&#xff0c;从音乐播放列表到有趣的视频&#xff0c;它无处不在。无论是音乐爱好者还是内容创作者&#xff0c;我们常常需要对音频文件进行剪切和编辑。想象一下&#xf…...

洛谷 CF295D Greg and Caves

题目来源于&#xff1a;洛谷 题目本质&#xff1a;动态规划dp&#xff0c;枚举 解题思路&#xff1a;将整个洞分成两半&#xff0c;一半递增&#xff0c;一半递减。我们分别 DP 求值&#xff0c;最后合并。状态转移方程为&#xff1a;dpi,j​k2∑j​(j−k1)dpi−1,k​1。枚举极…...

【图像处理】在图像处理算法开发中,有哪些常见的主观评价指标和客观评价指标?

主观评价指标 在图像处理算法开发中&#xff0c;主观评价指标依赖于观察者的个人感受和判断&#xff0c;通常用于评估图像的视觉质量。以下是一些常见的主观评价指标&#xff1a; 平均意见分数 (Mean Opinion Score, MOS)&#xff1a;通过收集多个评价者的评分并计算平均值来评…...

从零开始学cv-6:图像的灰度变换

文章目录 一&#xff0c;简介&#xff1a;二、图像的线性变换三、分段线性变换四&#xff0c;非线性变换4.1 对数变换4.2 Gamma变换 五&#xff0c;效果: 一&#xff0c;简介&#xff1a; 图像灰度变换涉及对图像中每个像素的灰度值执行数学运算&#xff0c;进而调整图像的视觉…...

使用Apache POI和POI-OOXML实现word模板文档自动填充功能

最近接到一个新的需求&#xff0c;用户创建好模板文件保存到模板库&#xff0c;然后使用在线文档编辑器打开模板时&#xff0c;将系统数据填充到模板文件并生成新的word文件&#xff0c;然后在线编辑&#xff0c;研究使用Apache POI和POI-OOXML实现了这个功能。 Maven依赖 <…...

【HarmonyOS NEXT星河版开发学习】综合测试案例-各平台评论部分

目录 前言 功能展示 整体页面布局 最新和最热 写评论 点赞功能 界面构建 初始数据的准备 列表项部分的渲染 底部区域 index部分 知识点概述 List组件 List组件简介 ListItem组件详解 ListItemGroup组件介绍 ForEach循环渲染 列表分割线设置 列表排列方向设…...

垂直行业数字化表现抢眼 亚信科技全年利润展望乐观

大数据产业创新服务媒体 ——聚焦数据 改变商业 2024年8月14日&#xff0c;亚信科技控股有限公司&#xff08;股票代码&#xff1a;01675.HK&#xff09;公布了公司截至2024年6月30日的中期业绩。 财报数据显示&#xff0c;2024年上半年&#xff0c;亚信科技的营业收入为人民币…...

EmguCV学习笔记 VB.Net 4.1 颜色变换

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 教程VB.net版本请访问&#xff1a;EmguCV学习笔记 VB.Net 目录-CSDN博客 教程C#版本请访问&#xff1a;EmguCV学习笔记 C# 目录-CSD…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

jdbc查询mysql数据库时,出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...