给网站开发自己的一封信,网红店的营销方式,网站seo课程,厦门seo网站排名优化基于HarmonyOS的宠物收养系统的设计与实现#xff08;一#xff09;
本系统是简易的宠物收养系统#xff0c;为了更加熟练地掌握HarmonyOS相关技术的使用。
项目创建
创建一个空项目取名为PetApp
首页实现#xff08;组件导航使用#xff09;
官方文档#xff1a;组…基于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 ./MessagePageEntry
Component
struct Index {private menuItem:NavigationMenuItem {value:,icon:./images/list.png,action:(){}}private toolBarItemHome:ToolbarItem {value:Home,icon:./images/home.png,action:(){this.pageName HomePagethis.title Home}}private toolBarItemMaps:ToolbarItem {value:Maps,icon:./images/maps.png,action:(){this.pageName MapsPagethis.title Maps}}private toolBarItemFavorite:ToolbarItem {value:Favorite,icon:./images/favorite.png,action:(){this.pageName FavoritePagethis.title Favorite}}private toolBarItemMessage:ToolbarItem {value:Message,icon:./images/message.png,action:(){this.pageName MessagePagethis.title Message}}private toolBarItemAccount:ToolbarItem {value:Account,icon:./images/account.png,action:(){this.pageName AccountPagethis.title Account}}State pageName:string HomePage;State title:string Homebuild() {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 ./MessagePageEntry
Component
struct Index {aboutToAppear(): void {this.changeState(0)}changeState(index:number){for(let i0;ithis.toolBars.length;i){this.toolBars[i].statusToolbarItemStatus.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 HomePagethis.title Homethis.changeState(0)}}State toolBarItemMaps:ToolbarItem {value:Maps,icon:./images/maps.png,status:ToolbarItemStatus.NORMAL,activeIcon:./images/maps_a.png,action:(){this.pageName MapsPagethis.title Mapsthis.changeState(1)}}State toolBarItemFavorite:ToolbarItem {value:Favorite,icon:./images/favorite.png,activeIcon:./images/favorite_a.png,action:(){this.pageName FavoritePagethis.title Favoritethis.changeState(2)}}State toolBarItemMessage:ToolbarItem {value:Message,icon:./images/message.png,activeIcon:./images/message_a.png,action:(){this.pageName MessagePagethis.title Messagethis.changeState(3)}}State toolBarItemAccount:ToolbarItem {value:Account,icon:./images/account.png,activeIcon:./images/account_a.png,action:(){this.pageName AccountPagethis.title Accountthis.changeState(4)}}State toolBars:ToolbarItem[] [this.toolBarItemHome,this.toolBarItemMaps,this.toolBarItemFavorite,this.toolBarItemMessage,this.toolBarItemAccount];State pageName:string HomePage;State title:string Homebuild() {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)//底部工具栏}
}实现效果
