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

实现效果

相关推荐
长弓三石34 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
SameX2 小时前
鸿蒙 Next 电商应用安全支付与密码保护实践
前端·harmonyos
SuperHeroWu73 小时前
【HarmonyOS】键盘遮挡输入框UI布局处理
华为·harmonyos·压缩·keyboard·键盘遮挡·抬起
sanzk8 小时前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna12 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析13 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg66813 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
lqj_本人14 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人14 小时前
使用 Flutter 绘制一个棋盘
harmonyos
lqj_本人17 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos