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

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

实现效果

相关推荐
爱笑的眼睛113 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
Georgewu10 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉10 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu10 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
ajassi200012 小时前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos
塞尔维亚大汉13 小时前
鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式
harmonyos·源码阅读
生如夏花℡16 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
xq952716 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos
枫叶丹417 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
前端世界1 天前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos