一、前言

每一個App都應該有一個首頁，在Android中一般由MainActivity + Navigation + Fragment * N （隨便你怎么組合，用別的也一樣），鴻蒙呢？瞅瞅吧。阿彌陀佛，苦逼Android學完Java學Dart、學完Dart學Kotlin、學完Kotlin學Compose、學完Compose，HarmonyOS來啦！艸（更別說還有Framework）艸艸艸。

如果您有任何疑問、對文章寫的不滿意、發(fā)現(xiàn)錯誤或者有更好的方法，歡迎在評論、私信或郵件中提出，非常感謝您的支持。🙏

二、準備

因為眾所不周知的原因，用的是編譯SDK是9。DEV版本是DevEco Studio 4.0 Release。以及我只簡單的寫了一下底部的Tab，具體的內(nèi)容也只有一個Text作為填充物～～～ 主要還是分享給大家如何寫一個首頁的基本代碼啦～。

三、你需要一個項目

我們使用最最最基本的項目結構就好了，你可能需要如此做

File->New->Create Project->Application->Empty Ability->Next->(API 9)->Done->Finish 完事。

四、準備一點數(shù)據(jù)

顯然，一個首頁會有一個底部導航欄。一般而言會是“文字+圖片”的組合，并且都具有選中狀態(tài)、非選中狀態(tài)。再顯然這玩意是個數(shù)組。我們準備下

1. 新建一個data/MainCategory.ets文件

   記得新建一個data文件夾

   簡單的在里面定義一個數(shù)據(jù)結構

 // 定義一個接口來表示項目類別的結構。export interface ItemCategory {// 當類別被選中時顯示的圖像資源。// 圖像文件的引用selectedImage: Resource,// 未被選中時顯示的圖像資源。// 用于在用戶界面上區(qū)分選中和未選中的狀態(tài)。unselectedImage: Resource,// 類別的標題資源。// 一個字符串資源的引用title: Resource}

貼心的加上注釋。PS：export表示某個實體（比如一個類、接口、變量或函數(shù)）應該被導出，使得它可以在其他文件或模塊中被導入和使用。

2. 構造一丟丟數(shù)據(jù)

   我們打算做四個頁面，所以準備四個數(shù)據(jù)吧～

 export const MAIN_CATEGORIES: ItemCategory[] =[{selectedImage: $r('app.media.icon_home_select'),unselectedImage: $r('app.media.icon_home_unselect'),title: $r("app.string.main_home")},{selectedImage: $r('app.media.icon_group_select'),unselectedImage: $r('app.media.icon_group_unselect'),title: $r("app.string.main_group")},{selectedImage: $r('app.media.icon_message_select'),unselectedImage: $r('app.media.icon_message_unselect'),title: $r("app.string.main_message")},{selectedImage: $r('app.media.icon_mine_select'),unselectedImage: $r('app.media.icon_mine_unselect'),title: $r("app.string.main_mine")}]

PS：const關鍵字用于聲明一個常量，意味著一旦被賦值后，其值就不能被改變（PPS：如果變量引用的是一個對象或數(shù)組，那么對象的屬性或數(shù)組的元素是可以被修改）。

3. 溫柔的導入

回到我們的Index.ets。讓我們導入剛剛準備的數(shù)據(jù)～

 import { ItemCategory, MAIN_CATEGORIES } from './data/MainCategory'

import就是導入的意思，這玩意一般在文件的最前面。

{}用來聲明你要導入這個文件中的什么（PS：這玩意能換名字）

 import { ItemCategory, MAIN_CATEGORIES as NewName} from './data/MainCategory'

from 顯然沒什么用

./聰明的你，很清楚的知道這玩意的意思是：表示當前文件所在目錄。順帶還想到了../表示：父目錄。那還有......../?抱歉，沒有了。但是你可以這么寫

 import { ItemCategory, MAIN_CATEGORIES as NewName} from '../../main/ets/data/MainCategory'

這樣你就可以無限套娃了～一直../下去吧！少年！

五、準備好Tab

首先，肯定有當前展示頁面之分，所以我們需要記錄下選中的頁面的Tab的Index

 @State tabCurrentIndex: number = 0

PS:@State裝飾的狀態(tài)變量，一旦變量擁有了狀態(tài)屬性，就和自定義組件的渲染綁定起來。當狀態(tài)改變時，UI會發(fā)生對應的渲染改變(官網(wǎng)抄的)。

我們直接使用鴻蒙之超能Tab之Tab，

 import { ItemCategory, MAIN_CATEGORIES } from './data/MainCategory'/*生成的別管*/@Entry/*生成的別管*/@Component/*struct 生成的別管*/struct Index {@State tabCurrentIndex: number = 0/*build UI都寫在這*/build() {// 創(chuàng)建 Tabs 組件，設置其屬性Tabs({ barPosition: BarPosition.End }) {// ForEach 用于遍歷 MAIN_CATEGORIES，為每個元素創(chuàng)建 TabContent 組件ForEach(MAIN_CATEGORIES, (item: ItemCategory, index: number) => {// 創(chuàng)建 TabContent 組件TabContent() {// 在這里可以添加 TabContent 組件的內(nèi)容}// 設置 TabContent 組件的 tabBar 屬性.tabBar(/* 這里可以設置 tabBar 相關屬性 */)})}// 設置 Tabs 組件的其他屬性.scrollable(false) // 設置是否可滾動 （首頁一般來說，左右不能滑動吧？）.barHeight(56) // 設置選項卡高度.barWidth('100%') // 設置選項卡寬度.vertical(false) // 設置選項卡排列方式（垂直或水平）.backgroundColor(0xFFFEFEFE) // 設置背景色// 設置當選項卡改變時的回調(diào)函數(shù).onChange((index: number) => {this.tabCurrentIndex = index; // 更新當前選中的選項卡索引})}}

可以看到，我們的Tab已經(jīng)準備好了！然后我們需要填充下TabBar。

 // 使用 @Builder 裝飾器，表示 TabBarBuilder 是一個構建器方法@BuilderTabBarBuilder(index: number, selectedImage: Resource, unselectedImage: Resource, tabBarName: Resource) {// 構建一個列布局（Column），用于垂直排列子組件Column() {// 在列中添加一個圖像組件// 如果當前索引與傳入的索引相同，則顯示選中的圖像，否則顯示未選中的圖像Image(this.tabCurrentIndex === index ? selectedImage : unselectedImage).width(24) // 設置圖像寬度.height(24) // 設置圖像高度.margin({ bottom: 4 }) // 設置底部外邊距?// 在列中添加一個文本組件，用于顯示選項卡名稱Text(tabBarName).fontSize(10) // 設置字體大小.fontFamily('HarmonyHeiTi-Medium') // 設置字體.fontColor(this.tabCurrentIndex === index ? 0xFF2E2F2E : 0xFF848683) // 設置字體顏色，根據(jù)選中狀態(tài)改變}// 設置列組件的寬度為 100%.width('100%')// 設置列組件的內(nèi)邊距.padding({ top: 6, bottom: 6 })// 設置子項在水平方向上的對齊方式為居中.alignItems(HorizontalAlign.Center)// 設置組件的 ID，使用索引來確保唯一性.id(`tabBar${index}`)}

那么往Tab組件里面一塞

 tabBar(this.TabBarBuilder(index, item.selectedImage, item.unselectedImage, item.title))

那么Tab就完成啦～～～

六、TabContent

重要的頁面來了。

為了不讓Index內(nèi)太臃腫，我們直接！新建一個 MainPageContainer類,并塞入一個Text

 @Componentexport struct MainPageContainer {private mTitle: Resource;build() {Column() {Text(this.mTitle) // 使用 mTitle 作為文本內(nèi)容.fontSize(50) .width('100%').height('100%') .textAlign(TextAlign.Center) .fontColor(0xFF9FE748) }.height('100%').padding({ top: 12 })}}

然后我們直接在Index中導入一下

 import { MainPageContainer } from './MainPageContainer'

再這么一用

 TabContent() {MainPageContainer({ mTitle: item.title })}

完事～

最后效果放在最前面啦～

七、總結

這玩意挺簡單了，但是這DevEco-Studio是我用過的最垃圾的工具了。真的爛。這代碼提醒，這代碼補全，不如不要，啥也提醒不了，就只會“Did you mean xxxx”、“ignore x x x x"。💩。

為了能讓大家更好的學習鴻蒙 (Harmony OS) 開發(fā)技術，這邊特意整理了《鴻蒙 (Harmony OS)開發(fā)學習手冊》（共計890頁），希望對大家有所幫助：https://qr21.cn/FV7h05

《鴻蒙 (Harmony OS)開發(fā)學習手冊》

入門必看：https://qr21.cn/FV7h05

1. 應用開發(fā)導讀(ArkTS)
2. 應用開發(fā)導讀(Java)

HarmonyOS 概念：https://qr21.cn/FV7h05

1. 系統(tǒng)定義
2. 技術架構
3. 技術特性
4. 系統(tǒng)安全

如何快速入門：https://qr21.cn/FV7h05

1. 基本概念
2. 構建第一個ArkTS應用
3. 構建第一個JS應用
4. ……

開發(fā)基礎知識：https://qr21.cn/FV7h05

1. 應用基礎知識
2. 配置文件
3. 應用數(shù)據(jù)管理
4. 應用安全管理
5. 應用隱私保護
6. 三方應用調(diào)用管控機制
7. 資源分類與訪問
8. 學習ArkTS語言
9. ……

基于ArkTS 開發(fā)：https://qr21.cn/FV7h05

1. Ability開發(fā)
2. UI開發(fā)
3. 公共事件與通知
4. 窗口管理
5. 媒體
6. 安全
7. 網(wǎng)絡與鏈接
8. 電話服務
9. 數(shù)據(jù)管理
10. 后臺任務(Background Task)管理
11. 設備管理
12. 設備使用信息統(tǒng)計
13. DFX
14. 國際化開發(fā)
15. 折疊屏系列
16. ……