HarmonyOSUI設計入門匯報人:Kimi時間:2025.01.01ArkUI基礎01布局詳解02狀態(tài)管理03實戰(zhàn)案例04目錄CONTENTSArkUI基礎01ArkUI概述ArkUI基本概念**Content**：ArkUI為HarmonyOS應用開發(fā)提供完整的基礎設施，包括簡潔的UI語法和豐富的UI功能，支持可視化界面開發(fā)。UI是用戶界面，組件是UI構建的最小單位，開發(fā)者通過組合組件構建界面。ArkUI開發(fā)語法**Content**：ArkUI語法包括@Entry、@Component、struct、@State、build()函數(shù)、事件方法和屬性方法。@Entry標識UI入口，@Component標識組件，struct定義自定義組件，@State標識狀態(tài)變量，build()描述UI，事件方法和屬性方法用于設置組件行為和樣式。UI組件與布局布局基礎**Content**：布局用于管理組件的大小和位置。ArkUI提供多種布局方式，如線性布局、層疊布局、彈性布局等。開發(fā)者通過設置布局屬性，如width、height、padding、margin等，實現(xiàn)組件的排列和對齊。常見UI組件**Content**：ArkUI提供多種常見UI組件，如Text、Button、Image、TextInput等。Text用于顯示文本，Button用于觸發(fā)操作，Image用于顯示圖片，TextInput用于輸入文本。這些組件通過屬性和事件方法實現(xiàn)多樣化功能。布局詳解02線性布局Row和Column**Content**：線性布局通過Row和Column容器實現(xiàn)。Row容器內的子元素水平排列，Column容器內的子元素垂直排列。通過設置space、alignItems、justifyContent等屬性，可實現(xiàn)子元素的間距和對齊方式。示例代碼**Content**：示例代碼展示了如何使用Row和Column構建簡單的頁面布局。例如，使用Column容器將多個Row容器按垂直方向排列，每個Row容器設置不同的背景顏色，實現(xiàn)頁面分區(qū)。層疊布局Stack容器**Content**：層疊布局通過Stack容器實現(xiàn)，子元素可以重疊顯示。通過alignContent屬性設置子元素在容器中的位置。Stack適用于需要元素覆蓋層疊的場景，如彈窗、卡片等。示例代碼**Content**：示例代碼展示了Stack容器的使用方法。通過將多個子元素添加到Stack容器中，實現(xiàn)元素的層疊效果。例如，一個Text組件被一個Button組件覆蓋，通過設置alignContent屬性，控制子元素的位置。彈性布局Flex容器**Content**：彈性布局通過Flex容器實現(xiàn)，適用于需要動態(tài)調整子元素大小和位置的場景。通過設置direction、justifyContent、alignItems等屬性，控制子元素的排列方向和對齊方式。示例代碼**Content**：示例代碼展示了Flex容器的使用方法。通過設置Flex容器的主軸方向為水平方向，將多個Text組件按水平方向排列，并通過justifyContent屬性實現(xiàn)子元素的均勻分布。相對布局示例代碼**Content**：示例代碼展示了RelativeContainer的使用方法。通過設置子元素的錨點和對齊方式，實現(xiàn)子元素在父容器中的相對定位。例如，一個子元素的頂部與父容器頂部對齊，右側與父容器右側對齊。RelativeContainer**Content**：相對布局通過RelativeContainer實現(xiàn)，子元素可以基于父容器或兄弟元素設置相對位置。通過設置錨點和對齊方式，實現(xiàn)復雜的布局效果。柵格布局GridRow和GridCol**Content**：柵格布局通過GridRow和GridCol實現(xiàn)，適用于多設備適配場景。通過設置columnsTemplate和rowsTemplate屬性，定義柵格的列數(shù)和行數(shù)，實現(xiàn)響應式布局。示例代碼**Content**：示例代碼展示了柵格布局的使用方法。通過設置GridRow的columnsTemplate和rowsTemplate屬性，將屏幕分為多個區(qū)域，并在每個區(qū)域中放置不同的組件，實現(xiàn)多設備適配。輪播、列表與表格輪播組件**Content**：輪播組件（Swiper）用于顯示輪播圖，支持自動播放、循環(huán)播放等功能。通過設置autoPlay和loop屬性，實現(xiàn)輪播圖的自動播放和循環(huán)播放。列表組件**Content**：列表組件（List）用于顯示可滾動的列表數(shù)據(jù)，支持垂直和水平方向的滾動。通過設置listDirection和lanes屬性，控制列表的排列方向和每行顯示的列數(shù)。表格組件**Content**：表格組件（Grid）用于顯示表格數(shù)據(jù)，支持多行多列的布局。通過設置columnsTemplate和rowsTemplate屬性，定義表格的列數(shù)和行數(shù)，實現(xiàn)表格的布局。狀態(tài)管理03狀態(tài)管理概述狀態(tài)與UI的關系**Content**：在聲明式UI框架中，UI是狀態(tài)的運行結果。狀態(tài)變量的變化會觸發(fā)UI的重新渲染。通過使用狀態(tài)變量，開發(fā)者可以實現(xiàn)動態(tài)的UI交互。狀態(tài)變量與裝飾器**Content**：狀態(tài)變量通過裝飾器進行聲明，如@State、@Prop、@Link等。@State用于聲明本地狀態(tài)變量，@Prop用于聲明父組件傳遞給子組件的屬性，@Link用于實現(xiàn)父子組件之間的雙向數(shù)據(jù)綁定。裝飾器詳解01@State裝飾器**Content**：@State裝飾器用于聲明狀態(tài)變量，狀態(tài)變量的變化會觸發(fā)UI的重新渲染。狀態(tài)變量必須進行初始化，支持多種數(shù)據(jù)類型，如Object、string、number等。02@Prop裝飾器**Content**：@Prop裝飾器用于聲明父組件傳遞給子組件的屬性，支持單向數(shù)據(jù)綁定。子組件可以通過@Prop接收父組件的數(shù)據(jù)，但數(shù)據(jù)的變化不會同步回父組件。03@Link裝飾器**Content**：@Link裝飾器用于實現(xiàn)父子組件之間的雙向數(shù)據(jù)綁定。子組件可以通過@Link接收父組件的數(shù)據(jù)，并且數(shù)據(jù)的變化會同步回父組件。數(shù)據(jù)存儲LocalStorage**Content**：LocalStorage是頁面級的UI狀態(tài)存儲，支持頁面內多個組件之間的狀態(tài)共享。通過@LocalStorageProp和@LocalStorageLink裝飾器，實現(xiàn)單向和雙向數(shù)據(jù)綁定。AppStorage**Content**：AppStorage是應用級的UI狀態(tài)存儲，支持應用內多個頁面之間的狀態(tài)共享。通過@StorageProp和@StorageLink裝飾器，實現(xiàn)單向和雙向數(shù)據(jù)綁定。實戰(zhàn)案例04個人中心界面頁面結構**Content**：個人中心界面包括個人信息、功能列表和設置等部分。通過CardComp組件封裝白色小卡片效果，使用@Builder裝飾器構建自定義組件，實現(xiàn)頁面的模塊化設計。示例代碼**Content**：示例代碼展示了如何使用CardComp組件構建個人中心界面。通過在Mine組件中定義多個@Builder方法，分別實現(xiàn)個人信息、功能列表和設置的展示，并將這些組件傳遞給CardComp組件，實現(xiàn)頁面的布局。首頁內容界面頁面結構**Content**：首頁內容界面包括輪播圖、工具欄、師資介紹等部分。通過Scroll容器實現(xiàn)頁面的滾動效果，使用GridComp、TeacherComp等自定義組件實現(xiàn)頁面的模塊化設計。示例代碼**Content**：示例代碼展示了如何使用Scroll容器和自定義組件構建首頁內容界面。通過在IndexComp組件中調用bannerComp、GridComp、TeacherComp等自定義組件，實現(xiàn)頁面的布局和功能。資訊內容界面頁面結構**Content**：資訊內容界面包括新聞輪播圖、新聞列表等部分。通過Swiper組件實現(xiàn)新聞輪播圖，使用List組件和NewsItem組件實現(xiàn)新聞列表的展示。示例代碼**Content**：示例代碼展示了如何使用Swiper組件和List組件構建資訊內容界面。通過在NewsComp組件中定義bannerComp和newsListComp，實現(xiàn)新聞輪播圖和新聞列表的展示。教學內容界面頁面結構**Content**：教學內容界面包括教學安排、實驗安排等部分。通過Tabs組件實現(xiàn)導航欄，使用CourseItem和Experim