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

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

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

项目创建

创建一个空项目取名为PetApp

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

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

实现目标效果:
5个工具选项,对应5个页面,点击工具栏在内容区切换子组件页面和标题
在这里插入图片描述
下载矢量图:阿里巴巴矢量图标库
下载的图片放到项目的src/main/ets/images
在这里插入图片描述
打开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)//底部工具栏}
}

实现效果

在这里插入图片描述

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

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

相关文章

机器学习辅助复合材料预测,性能管理优化创新材料,这种王炸般的组合,还真是大开眼界!

在人工智能与复合材料技术融合的背景下&#xff0c;复合材料的研究和应用正迅速发展&#xff0c;创新解决方案层出不穷。从复合材料性能的精确预测到复杂材料结构的智能设计&#xff0c;从数据驱动的材料结构优化到多尺度分析&#xff0c;人工智能技术正以其强大的数据处理能力…

Eureka 原理与实践全攻略

一、Eureka 概述 Eureka 在微服务架构中具有举足轻重的地位。它作为服务注册与发现的核心组件&#xff0c;为分布式系统中的服务管理提供了关键支持。 Eureka 的主要功能包括服务注册、服务发现、服务健康监测和自我保护机制。服务注册功能使得服务提供者能够在启动时将自身的…

git-版本管理工具基本操作-创建仓库-拉取-推送-暂存库-版本库

1、创建仓库和版本说明 2、克隆仓库到本地&#xff08;首次拉取需要输入用户名和密码&#xff0c;用户名用邮箱&#xff0c;密码用登录gitee的密码&#xff0c;后面配置密钥后可以直接clone&#xff09; 在命令行输出两行指令配置git才能克隆&#xff1a; username&#xff1…

《Web项目跨域请求后端Api设置Cookie失败问题?》

问题描述&#xff1a; 在web项目中跨域请求api时&#xff0c;api登录成功后需要向域名中设置cookie实现在两个域名下共享&#xff0c;但是登录接口返回成功&#xff0c;响应头中也有set-cookie&#xff0c;实际却无法设置到cookie中… web项目访问时的域名https://b.com/ api所…

解锁Spring Boot、Prometheus与Grafana三合一:打造你的专属自定义指标炫酷大屏!

1. 集成Prometheus到Spring Boot 需要在Spring Boot应用中集成Prometheus。可以通过micrometer库来实现。micrometer是一个应用程序监控库&#xff0c;它支持多种监控系统&#xff0c;包括Prometheus。 一招制胜&#xff01;Spring Boot、Prometheus和Grafana三剑合璧&#x…

银河麒麟服务器操作系统Kylin-Server-V10-SP3-2403-Release-20240426-x86_64安装步骤

银河麒麟服务器操作系统 Kylin-Server-V10-SP3-2403-Release-20240426-x86_64安装步骤 一、准备工作1. 下载ISO镜像2. 制作安装介质3. 设置BIOS 二、安装过程1. 启动系统2. 选择安装语言3. 选择安装配置4. 配置root密码与创建用户5. 开始安装6. 重启系统7. 同意许可协议 三、系…

【Redis】基本全局命令

Redis的基本全局命令 keysexistsdelexpirettltype Redis 有 5 种数据结构&#xff0c;但它们都是键值对种的值&#xff0c;对于键来说有⼀些通⽤的命令。 keys 返回所有满足样式 &#xff08;pattern&#xff09;的key。支持如下统配样式。 h?llo 匹配 hello , hallo 和 hxl…

培训班和科班出生有什么区别

IT业的萌新来啦 每到毕业季 总有大量萌新走进职场 IT圈子的程序员 有的是科班出生 比如 计算机科学与技术、软件工程、大数据技术 有的是相关专业出生的 比如 信息安全、网络工程、物联网工程等等 除此之外 还有各种其他专业转行过来的 文理不限、专业不限 科班出生…

【在Linux世界中追寻伟大的One Piece】IO基础

目录 1 -> 回顾 1.1 -> 回顾C文件接口 1.2 -> 总结 2 -> 系统文件I/O 3 -> 接口介绍 3.1 -> open 3.2 -> open函数返回值 3.3 -> 文件描述符fd 4 -> 0 & 1 & 2 5 -> 文件描述符的分配规则 6 -> 重定向 7 -> 使用dup2系…

运维开发——局域网SSH访问服务器与应用

摘要 本博文主要介绍局域网SSH访问登陆虚拟机和及其应用相关配置操作。 1. 局域网SSH访问登陆虚拟机 目标&#xff1a;在局域网内A电脑使用SSH登陆B电脑上虚拟机的服务器。 前提条件:B电脑为宿主机&#xff0c;可以正常使用ssh访问虚拟机服务器&#xff0c;虚拟机网络连接方…

深度学习基础—超参数调试

1.超参数调试顺序 在训练深度网络最难的事情之一是超参数的选择&#xff0c;如何选择合适的超参数取值&#xff1f;下面我将谈谈&#xff0c;如下是我所理解的超参数调试顺序&#xff1a; 重要性排序 超参数 Top1梯队 学习率a Top2梯队 min-batch大小&#xff0c;隐层神经…

QT-五子棋游戏

QT-五子棋游戏 一、演示效果二、核心代码三、下载链接 一、演示效果 二、核心代码 #include "GameModel.h" #include <time.h> #include <stdlib.h>GameModel::GameModel(){}void GameModel::startGame(GameType type){gameType type;//初始化棋盤game…

uniapp/vue如何实现一个子表单及子表单作用

子表单是一个辅助表单或一个表&#xff0c;它允许在主表单中添加多个行式项目&#xff0c;以处理与主记录相关联的多个辅助项目或数据。子表单在多种应用场景中发挥着重要作用&#xff0c;特别是在需要处理一对多关系的数据时。 以下是对子表单的详细解析&#xff1a; 定义与特…

90%的设计师都不知道的免抠图素材插件,水花免抠png素材轻松搞定!附保姆教程

你是否曾在设计中为绘制那些晶莹剔透的水花而苦恼&#xff1f;用PS太麻烦&#xff0c;细节根本抠不清楚&#xff1b;去素材网找&#xff0c;不是付费太高就是图案不满意&#xff01;可以试试千鹿设计助手的“AI免抠生成”插件&#xff0c;接下来我来分享一下我的一些使用过程和…

ardupilot开发 --- C嘎嘎 篇

长生不老&#xff1f;三界六道不就毁在这4个字上&#xff1f; 溜撒点一起上吧 cout和cin的使用&#xff0c;标准输入输出<< 和 >> 的使用数据类型&#xff08;函数&#xff09;模板的使用&#xff1a;命名空间的使用&#xff0c;std命名空间语句块new 的使用引用 &…

fiddler在软件测试中的使用(详细版)

1.抓包&#xff0c;辅助定位bug&#xff08;web中类似谷歌浏览器F12开发调试工具&#xff09; 合格的软件测试工程师&#xff0c;不仅仅需要能够发现bug&#xff0c;还需要能透过bug表象&#xff0c;分析出问题根本原因&#xff0c;从而提升bug的解决效率&#xff0c;通过fidd…

手机使用技巧:如何恢复Android手机不见的短信

在您的 Android 手机上丢失短信可能是一种令人沮丧的经历&#xff0c;尤其是在文本包含重要信息的情况下。幸运的是&#xff0c;有一些方法可以在Android上恢复已删除的短信。在这篇博文中&#xff0c;我们将讨论几种在Android手机上恢复已删除短信的方法。 为什么需要恢复Andr…

vue2版本空目录下创建新项目的方法2024

vue2版本空目录下创建新项目的方法2024 node -v npm -v vue -V 安装vue-cli 2.9版本的命令 npm install vue-cli -g 卸载vue2.x方法&#xff1a; npm uninstall vue-cli -g 设置 NPM 镜像 npm config set registry https://registry.npmmirror.com vue -V 报错时需设置环…

JVM的内存模型和垃圾回收

JVM内存区域 内存模型图&#xff1a; 堆 线程共享。所有的对象实例以及数组都要在堆上分配。回收器主要管理的对象。 它的目的是存放对象实例。同时它也是GC所管理的主要区域&#xff0c;因此常被称为GC堆&#xff0c;又由于现在收集器常使用分代算法&#xff0c;Java堆中还…

【Spring Cloud】Consul

官网介绍: Spring Cloud Consul该项目为Spring Boot应用程序提供了与Consul的集成,通过自动配置和绑定到Spring环境以及其他Spring编程模型习语。通过几个简单的注解,您可以在应用程序内部快速启用和配置常见模式,并使用基于Consul的组件构建大型分布式系统。提供的模式包括…