基于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.rhkb.cn/news/406611.html

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

相关文章

redis实战——go-redis的使用与redis基础数据类型的使用场景(一)

一.go-redis的安装与快速开始 这里操作redis数据库&#xff0c;我们选用go-redis这一第三方库来操作&#xff0c;首先是三方库的下载&#xff0c;我们可以执行下面这个命令&#xff1a; go get github.com/redis/go-redis/v9最后我们尝试一下连接本机的redis数据库&#xff0…

黑神话孙悟空:自媒体小白的流量密码!

当下&#xff0c;黑神话孙悟空的热度如熊熊烈火&#xff0c;席卷了整个游戏世界。 只要与这个话题沾边&#xff0c;似乎就能轻松吸引大量关注。 那么&#xff0c;对于不怎么懂自媒体运营的小伙伴来说&#xff0c;该如何抓住这个机遇呢&#xff1f; 别担心&#xff0c;我们用以…

授权cleanmymac访问全部磁盘 Mac授权访问权限 cleanmymac缺少权限

CleanMyMac是Mac系统下的一款专业的苹果电脑清理软件&#xff0c;同时也是一款优秀的电脑系统管理软件。它能有效清理系统垃圾&#xff0c;快速释放磁盘内存&#xff0c;缓解卡顿现象&#xff0c;保障系统顺畅地运行。 全磁盘访问权限&#xff0c;就好比机场内进行的安全检查。…

微软AI人工智能认证有哪些?

微软提供的人工智能认证主要包括以下几个方面&#xff1a; Azure AI Fundamentals&#xff08;AI900认证&#xff09;&#xff1a;这是一个基础认证&#xff0c;旨在展示与Microsoft Azure软件和服务开发相关的基本AI概念&#xff0c;以创建AI解决方案。它面向具有技术和非技术…

Vue 导航条+滑块效果

目录 前言代码效果展示导航实现代码导航实现代码导航应用代码前言 总结一个最近开发的需求。设计稿里面有一个置顶的导航条,要求在激活的项目下面展示个下划线。我最先开始尝试的是使用 after 的伪类选择器,直接效果一样,但是展示的时候就会闪现变化,感觉不够自然,参考了一…

ES6解构赋值详解;全面掌握:JavaScript解构赋值的终极指南

目录 全面掌握&#xff1a;JavaScript解构赋值的终极指南 一、数组解构赋值 1、基本用法 2、跳过元素 3、剩余元素 4、默认值 二、对象解构赋值 1、基本用法 2、变量重命名 3、默认值 4、嵌套解构 三、复杂的嵌套结构解构 四、函数参数解构赋值 1、对象解构作为函…

ARM——驱动——Linux启动流程和Linux启动

一、flash存储器 lash存储器&#xff0c;全称为Flash EEPROM Memory&#xff0c;又名闪存&#xff0c;是一种长寿命的非易失性存储器。它能够在断电情况下保持所存储的数据信息&#xff0c;因此非常适合用于存储需要持久保存的数据。Flash存储器的数据删除不是以单个的字节为单…

单细胞组学大模型(1)--- iSEEEK

–https://doi.org/10.1093/bib/bbab573 A universal approach for integrating super large-scale single-cell transcriptomes by exploring gene rankings 打算深挖单细胞大模型的一系列文章、算法和代码&#xff0c;按时间线来去学习也许会好一些&#xff0c;所以第一篇带…

Spring Cloud Consul面试题

​ ​ 您好&#xff0c;我是程序员小羊&#xff01; 前言 Spring Cloud Consul 是微服务架构中的一个重要组件&#xff0c;用于服务发现、配置管理以及健康检查。了解 Spring Cloud Consul 的工作原理和应用场景&#xff0c;对于微服务开发者和架构师来说至关重要。以下是一些常…

思特科技:国家宝藏数字体验馆展现东方美学 让“文物活起来”

01      思特科技为“国家宝藏数字体验展”提供“数字技术”支持&#xff0c;带来国宝的数字化演绎。以《国家宝藏》顶级IP为基础&#xff0c;打造的全新沉浸文化项目“国宝数字体验展“&#xff0c;借由文物的视角、站在历史的星河中&#xff0c;探寻时间长河中不变的智慧…

CART决策树-基尼指数(全网最详解)

文章目录 一、基尼指数的定义二、基尼指数在CART决策树中的应用三、基尼指数与CART决策树的构建1.计算每个子集的基尼系数&#xff1a;2.计算基尼指数3.选择最优特征4.其余基尼指数5.构建决策树 四、总结 CART决策树基尼指数是CART&#xff08;Classification And Regression T…

8-9月强化速成|30天带刷《严选题》《660》

如果你的目标是90-100分&#xff0c;肯定是够了&#xff0c;但是像下面这样微调一下更好 你的基础阶段做的是辅导讲义上的题目&#xff0c;那么你的基础阶段的题量肯定是够了。 但是强化阶段如果只做660题和严选题&#xff0c;这个题量还有有一些薄弱的&#xff0c;建议可以把…

四、4 逻辑操作符

按位与、按位或关注二进制位 逻辑与、逻辑或只关注真假 1、&&逻辑与&#xff08;并且&#xff09; 左边和右边都为真&#xff0c;结果为真&#xff08;为1&#xff09; 有一个为假&#xff0c;结果为假&#xff08;为0&#xff09; 2、|| 逻辑或&#xff08;或者&a…

NumExpr加速计算(numpy表达式)

文章目录 一、简介二、安装三、函数详解四、性能评估 Python 性能优化&#xff1a;NumExpr Numba CuPy 一、简介 numexpr&#xff08;全称&#xff1a;numpy expression&#xff09;&#xff1a;用于在 NumPy 表达式上快速执行元素级运算的 Python 加速库。 优势&#xff1…

python非交互连接mysql+mycat读写分离实现

python非交互连接mysql >>>import pymysql >>>connpymysql.connect(host"192.168.118.57",port3306,database"test",user"root",password"root") >>> cursorconn.cursor() >>> cursor.execut…

Element-ui table进阶使用

最近项目有多个报表开发的需求&#xff0c;我采用的是凤翎前端组件框架&#xff08;基于element-ui开发&#xff09;&#xff0c;大伙可以直接参考element-ui组件库文档&#xff0c;把标签中的fks替换为el即可。下面我会按顺序一一展开细说这些需求&#xff1a; 1、有多级表头…

AI大模型开发——7.百度千帆大模型调用

本节旨在为读者提供一个实用指南&#xff0c;探讨如何有效地利用百度千帆大模型平台的强大功能。从基础的账号注册和密钥申请入手&#xff0c;逐步引领用户通过案例&#xff0c; 理解并掌握如何调用文本和图像处理的大模型 API&#xff0c; 包括但不限于 NLP、对话生成、文本续…

CV每日论文--2024.7.25

1、Diffusion Models for Monocular Depth Estimation: Overcoming Challenging Conditions 中文标题&#xff1a;单目深度估计的扩散模型&#xff1a;克服具有挑战性的条件 简介&#xff1a;本文提出了一种新颖的方法,旨在解决单张图像深度估计任务中具有挑战性的、超出分布范…

linux 磁盘满了,程序运行失败,如何处理?df -h

场景&#xff1a;紧急呼救&#xff0c;上传图片失败了。我一脸懵&#xff0c;服务器这是又咋地了&#xff0c;别邪乎姐姐&#xff0c;姐姐胆子小啊。 一、寻找问题原因 1、OSS出问题了&#xff1f; 然后我尝试了 IOS 的APP是没问题的&#xff0c;Android提示上传失败&#xf…

在Kubernetes中通过 pod 打开 pod所在宿主机上的shell

昨日一伙计突然问我 在么把自己打好的 docker镜像 上传到 kubernetes 的 节点的 local 镜像池。 现状大约如下&#xff1a; 1&#xff09;只有master节点的登录权限&#xff1b; 2&#xff09;不知道存在哪些worker节点也无法通过 master 借助SSH 登录到 worker节点 &#x…