基于HarmonyOS的宠物收养系统的设计与实现(一)
本系统是简易的宠物收养系统,为了更加熟练地掌握HarmonyOS相关技术的使用。
项目创建
创建一个空项目取名为PetApp
首页实现(组件导航使用)
官方文档:组件导航(Navigation)
实现目标效果:
5个工具选项,对应5个页面,点击工具栏在内容区切换子组件页面和标题
下载矢量图:阿里巴巴矢量图标库
下载的图片放到项目的src/main/ets/images
中
打开src/main/ets/pages
编辑Index.ets
文件
Index.ets
javascript
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
javascript
@Entry
@Component
export struct HomePage {
build() {
NavDestination(){
Text("home")
Text("home")
Text("home")
}
}
}
添加地图页MapsPage.ets
javascript
@Entry
@Component
export struct MapsPage {
build() {
NavDestination(){
Text("maps")
Text("maps")
Text("maps")
}
}
}
添加喜欢宠物页FavoritePage.ets
javascript
@Entry
@Component
export struct MapsPage {
build() {
NavDestination(){
Text("maps")
Text("maps")
Text("maps")
}
}
}
添加消息页MessagePage.ets
javascript
@Entry
@Component
export struct MessagePage {
build() {
NavDestination(){
Text("Message")
Text("Message")
Text("Message")
}
}
}
添加账号信息页AccountPage.ets
javascript
@Entry
@Component
export struct AccountPage {
build() {
NavDestination(){
Text("Account")
Text("Account")
Text("Account")
}
}
}
实现效果
实现点击工具栏高亮
修改index.ets,添加changeState方法、activeIcon属性、status属性。
javascript
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)//底部工具栏
}
}