1、效果展示

2、下載 DevEco Studio

• 訪問官網根據自己的版本進行下載，默認安裝下一步即可。

https://developer.huawei.com/consumer/cn/download/

3、創建項目

4、新建頁面模板

/**
* ${PROJECT_NAME} #項目的名稱 
* ${FILE_NAME} #文件名稱
* Created by ${USER} ON ${DATE} #作者及添加日期
*/
@Entry
@Component
struct ${NAME} {build() {}
}

5、更改應用信息

{"string": [{"name": "module_desc","value": "module description"},{"name": "EntryAbility_desc","value": "description"},{"name": "EntryAbility_label","value": "硅谷租房" # 應用名稱}]
}

6、新建以下頁面

• Home.ets
• See.ets
• Discover.ets
• Service.ets
• My.ets
  
  

7、Index.ets

import Home from './Home'
import See from './See'
import Service from './Service'
import Discover from './Discover'
import My from './My'@Entry
@Component
struct Index {@State currentTabBarIndex: number = 0;@BuildertabBarBuilder(image: Resource, activeImage: Resource, text: string, index: number) {Column() {Image(this.currentTabBarIndex == index ? activeImage : image).width(28).height(28)Text(text).fontSize(10).fontColor(this.currentTabBarIndex == index ? '#000' : '#CBCBCB')}}build() {Tabs({ barPosition: BarPosition.End }) {TabContent() {Home()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_home'), $r('app.media.tabbar_home_active'), '首頁', 0))TabContent() {See()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_see'), $r('app.media.tabbar_see_active'), '想看', 1))TabContent() {Service()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_service'), $r('app.media.tabbar_service_active'), '服務', 2))TabContent() {Discover()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_discover'), $r('app.media.tabbar_discover_active'), '發現', 3))TabContent() {My()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_my'), $r('app.media.tabbar_my_active'), '我的', 4))}.barHeight(50).scrollable(false).onChange((index) => {this.currentTabBarIndex = index;})}
}

8、真機運行

9、圖片資源文件

見資源綁定