基于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)//底部工具栏
  }
}

实现效果