基于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 小时前
HarmonyOS 应用开发:深入剖析声明式 UI 状态管理及其最佳实践
华为·harmonyos
猫林老师4 小时前
HarmonyOS多媒体开发:音视频播放与录制全解析
华为·音视频·harmonyos
程序员潘Sir5 小时前
鸿蒙应用开发从入门到实战(四):ArkTS 语言概述
harmonyos·鸿蒙
爱笑的眼睛116 小时前
HarmonyOS 应用开发深度解析:基于 ArkTS 的现代化状态管理实践
华为·harmonyos
娅娅梨7 小时前
HarmonyOS-ArkUI Web控件基础铺垫7-HTTP SSL认证图解 及 Charles抓包原理 及您为什么配置对了也抓不到数据
http·华为·ssl·harmonyos
安卓开发者7 小时前
鸿蒙NEXT的Web组件网络安全与隐私保护实践
前端·web安全·harmonyos
爱笑的眼睛111 天前
HarmonyOS 应用开发深度解析:基于声明式UI的现代化状态管理实践
华为·harmonyos
前端世界1 天前
HarmonyOS 实战:如何用数据压缩和解压让应用更快更省
华为·harmonyos
安卓开发者1 天前
鸿蒙Next Web组件详解:属性设置与事件处理实战
前端·华为·harmonyos