【ArkUI】ets開發 創建視圖與構建佈局
前言：在先前的鴻蒙ArkUI ets開發的學習中，筆者已經對基礎的頁面佈局、數據連接、圖片動畫的繪製的知識進行了分享。這次我們同樣來分享ets開發的學習基礎UI知識，但這次我們返璞歸真，從最基礎的視圖創建開始學習。夯實基礎才能在今後的學習中融會貫通，相信通過這次的學習，對之前分享的內容能收穫更多。
本篇是以HarmonyOS官網的基於TS擴展的聲明式開發範式文檔，體驗聲明式UI的創建簡單視圖爲基礎進行編寫。所以筆者將原文進行整合，提取出其中的要點，以便通俗易懂地呈現給讀者，希望能幫助你快速瞭解Harmony的ETS開發，學會簡單的視圖創建與佈局構建的學習。本篇最後會貼上參考原文鏈接。
首先講一下大致的思路，我們要創建視圖，首先需要通過容器組件Stack、Flex和一些基本的組件進行構建，然後完成自定義的組件的創建。從容器組件的角度出發，本篇主要介紹的是Stack佈局和Flex佈局，其他的佈局就由讀者自行探索。所以筆者將整個功能的實現分爲了兩個步驟，構建Stack佈局和構建Flex佈局，這與原篇大致相同。
1. 構建Stack佈局。
在之前的學習中，我們已經建立的項目，所以之前基礎的創建項目就不詳細寫了，直接開始構建佈局。
1) 創建Stack組件，將Text組件、Image組件放進Stack組件中，使其成爲Stack組件的子組件。Stack組件爲堆疊組件，可以包含一個或多個子組件，其特點是後一個子組件覆蓋前一個子組件。
指定Image組件的url，圖片資源放在resources下的rawfile文件夾內，引用rawfile下資源時使用“$rawfile('filename')”的形式，filename爲rawfile目錄下的文件相對路徑。當前$rawfile僅支持Image控件引用圖片資源。
@Entry
@Component
struct MyComponent {
build() {
Stack() {
Image($rawfile('icon.png'))
Text('Tomato')
.fontSize(26)
.fontWeight(500)
}
}
}
2) 除指定圖片路徑外，也可以使用引用媒體資源符$r引用資源，需要遵循resources文件夾的資源限定詞的規則。將圖片放到resources-base-media文件夾中。就可以通過“$r('app.type.name')”的形式引用應用資源，即$r('app.media.icon')。
設置Image寬高，並且將image的objectFit屬性設置爲ImageFit.Contain，即保持圖片長寬比的情況下，使得圖片完整地顯示在邊界內。
@Entry
@Component
struct MyComponent {
build() {
Stack() {
Image($r('app.media.icon'))
.objectFit(ImageFit.Contain)
.height(357)
Text('Tomato')
.fontSize(26)
.fontWeight(500)
}
}
}
3) 設置食物圖片和名稱佈局。設置Stack的對齊方式爲底部起始端對齊，設置Stack構造參數alignContent爲Alignment.BottomStart。
通過設置Stack的背景顏色來改變食物圖片的背景顏色。通過框架提供的Color內置枚舉值來設置，比如backgroundColor(Color.Red)，即設置背景顏色爲紅色。或者string類型參數，支持的顏色格式有：rgb、rgba和HEX顏色碼。
@Entry
@Component
struct MyComponent {
build() {
Stack({ alignContent: Alignment.BottomStart }) {
Image($r('app.media.icon'))
.objectFit(ImageFit.Contain)
.height(357)
Text('Tomato')
.fontSize(26)
.fontWeight(500)
}
.backgroundColor('#FFedf2f5')
}
}
4) 調整Text組件的外邊距margin，使其距離左側和底部有一定的距離。margin是簡寫屬性，可以統一指定四個邊的外邊距，也可以分別指定。
創建頁面入口組件爲FoodDetail，在FoodDetail中創建Column，設置水平方向上居中對齊 alignItems(HorizontalAlign.Center)。MyComponent組件名改爲FoodImageDisplay，爲FoodDetail的子組件。
@Component
struct FoodImageDisplay {
build() {
Stack({ alignContent: Alignment.BottomStart }) {
Image($r('app.media.icon'))
.objectFit(ImageFit.Contain)
Text('Tomato')
.fontSize(26)
.fontWeight(500)
.margin({left: 26, bottom: 17.4})
}
.height(357)
.backgroundColor('#FFedf2f5')
}
}
@Entry
@Component
struct FoodDetail {
build() {
Column() {
FoodImageDisplay()
}
.alignItems(HorizontalAlign.Center)
}
}
2. 構建Flex佈局。
上一部分我們已經學習了Stack佈局，這一部分我們來學習Flex佈局，讓整個視圖細節更加豐富。使用Flex彈性佈局來構建食物的食物成分表，彈性佈局在本場景的優勢在於可以免去多餘的寬高計算，通過比例來設置不同單元格的大小，更加靈活。
1) 創建ContentTable組件，使其成爲頁面入口組件FoodDetail的子組件。
創建Flex組件展示食品的成分。先創建熱量這一類。創建Flex組件，高度爲280，上、右、左內邊距爲30，包含三個Text子組件分別代表類別名（Calories），含量名稱（Calories）和含量數值（17kcal）。Flex組件默認爲水平排列方式。
@Component
struct ContentTable {
build() {
Flex() {
Text('Calories')
.fontSize(17.4)
.fontWeight(FontWeight.Bold)
Text('Calories')
.fontSize(17.4)
Text('17kcal')
.fontSize(17.4)
}
.height(280)
.padding({ top: 30, right: 30, left: 30 })
}
}
@Entry
@Component
struct FoodDetail {
build() {
Column() {
FoodImageDisplay()
ContentTable()
}
.alignItems(HorizontalAlign.Center)
}
}
2) 調整佈局，設置各部分佔比。分類名佔比（layoutWeight）爲1，成分名和成分含量一共佔比（layoutWeight）2。成分名和成分含量位於同一個Flex中，成分名佔據所有剩餘空間flexGrow(1)。
@Component
struct ContentTable {
build() {
Flex() {
Text('Calories')
.fontSize(17.4)
.fontWeight(FontWeight.Bold)
.layoutWeight(1)
Flex() {
Text('Calories')
.fontSize(17.4)
.flexGrow(1)
Text('17kcal')
.fontSize(17.4)
}
.layoutWeight(2)
}
.height(280)
.padding({ top: 30, right: 30, left: 30 })
}
}
3) 仿照熱量分類添加其他營養成分分類。設置外層Flex爲豎直排列FlexDirection.Column， 在主軸方向（豎直方向）上等距排列FlexAlign.SpaceBetween，在交叉軸方向（水平軸方向）上首部對齊排列ItemAlign.Start。
每個成分表中的成分單元其實都是一樣的UI結構。使用自定義構造函數@Builder簡化代碼。在ContentTable內聲明@Builder修飾的IngredientItem方法，用於聲明分類名、成分名稱和成分含量UI描述。
@Component
struct ContentTable {
@Builder IngredientItem(title:string, colorValue: string, name: string, value: string) {
Flex() {
Text(title)
.fontSize(17.4)
.fontWeight(FontWeight.Bold)
.layoutWeight(1)
Flex({ alignItems: ItemAlign.Center }) {
Circle({width: 6, height: 6})
.margin({right: 12})
.fill(colorValue)
Text(name)
.fontSize(17.4)
.flexGrow(1)
Text(value)
.fontSize(17.4)
}
.layoutWeight(2)
}
}
}4) 在ContentTable的build方法內調用IngredientItem接口，需要用this去調用該Component作用域內的方法，以此來區分全局的方法調用。
@Component
struct ContentTable {
......
build() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
this.IngredientItem('Calories', 'Calories', '17kcal')
this.IngredientItem('Nutrition', 'Protein', '0.9g')
this.IngredientItem('', 'Fat', '0.2g')
this.IngredientItem('', 'Carbohydrates', '3.9g')
this.IngredientItem('', 'VitaminC', '17.8mg')
}
.height(280)
.padding({ top: 30, right: 30, left: 30 })
}
}
5) 通過學習Stack佈局和Flex佈局的構建，來完成食物的圖文展示和營養成分表，創建出普通視圖的食物詳情頁。
以上，本次的內容分享，謝謝！
參考原文鏈接：
