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

实现效果

相关推荐
SameX4 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX4 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index12 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室15 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu717 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
zhangjr057520 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟4641 天前
初识ArkUI
harmonyos
SameX1 天前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠1 天前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤2 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙