本項(xiàng)目Gitee倉(cāng)地址：深入淺出eTs學(xué)習(xí): 帶大家深入淺出學(xué)習(xí)eTs (gitee.com)

一、ArkUI介紹

框架介紹

方舟開(kāi)發(fā)框架（簡(jiǎn)稱(chēng)：ArkUI），是一套UI開(kāi)發(fā)框架，提供開(kāi)發(fā)者進(jìn)行應(yīng)用UI開(kāi)發(fā)時(shí)所必需的能力。

基本概念

• 組件：組件是界面搭建與顯示的最小單位。開(kāi)發(fā)者通過(guò)多種組件的組合，構(gòu)建出滿足自身應(yīng)用訴求的完整界面。
• 頁(yè)面：page頁(yè)面是方舟開(kāi)發(fā)框架最小的調(diào)度分割單位。開(kāi)發(fā)者可以將應(yīng)用設(shè)計(jì)為多個(gè)功能頁(yè)面，每個(gè)頁(yè)面進(jìn)行單獨(dú)的文件管理，并通過(guò)路由API實(shí)現(xiàn)頁(yè)面的調(diào)度管理，以實(shí)現(xiàn)應(yīng)用內(nèi)功能的解耦。

主要特征

• UI組件：方舟開(kāi)發(fā)框架不僅提供了多種基礎(chǔ)組件，如文本顯示、圖片顯示、按鍵交互等，也提供了支持視頻播放能力的媒體組件。并且針對(duì)不同類(lèi)型設(shè)備進(jìn)行了組件設(shè)計(jì)，提供了組件在不同平臺(tái)上的樣式適配能力，此種組件稱(chēng)為“多態(tài)組件”。
• 布局：UI界面設(shè)計(jì)離不開(kāi)布局的參與。方舟開(kāi)發(fā)框架提供了多種布局方式，不僅保留了經(jīng)典的彈性布局能力，也提供了列表、宮格、柵格布局和適應(yīng)多分辨率場(chǎng)景開(kāi)發(fā)的原子布局能力。
• 動(dòng)畫(huà)：方舟開(kāi)發(fā)框架對(duì)于UI界面的美化，除了組件內(nèi)置動(dòng)畫(huà)效果外，也提供了屬性動(dòng)畫(huà)、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)和自定義動(dòng)畫(huà)能力。
• 繪制：方舟開(kāi)發(fā)框架提供了多種繪制能力，以滿足開(kāi)發(fā)者繪制自定義形狀的需求，支持圖形繪制、顏色填充、文本繪制、圖片繪制等。
• 交互事件：方舟開(kāi)發(fā)框架提供了多種交互能力，滿足應(yīng)用在不同平臺(tái)通過(guò)不同輸入設(shè)備均可正常進(jìn)行UI交互響應(yīng)，默認(rèn)適配了觸摸手勢(shì)、遙控器、鼠標(biāo)等輸入操作，同時(shí)也提供事件通知能力。
• 平臺(tái)API通道：方舟開(kāi)發(fā)框架提供了API擴(kuò)展機(jī)制，平臺(tái)能力通過(guò)此種機(jī)制進(jìn)行封裝，提供風(fēng)格統(tǒng)一的JS接口。

二、常見(jiàn)布局

彈性布局

Flex組件用于創(chuàng)建彈性布局，開(kāi)發(fā)者可以通過(guò)Flex的接口創(chuàng)建容器組件，進(jìn)而對(duì)容器內(nèi)的其他元素進(jìn)行彈性布局，例如：使三個(gè)元素在容器內(nèi)水平居中，垂直等間隔分散。

柵格布局

柵格系統(tǒng)作為一種輔助布局的定位工具，在平面設(shè)計(jì)和網(wǎng)站設(shè)計(jì)都起到了很好的作用，對(duì)移動(dòng)設(shè)備的界面設(shè)計(jì)有較好的借鑒作用。總結(jié)柵格系統(tǒng)對(duì)于移動(dòng)設(shè)備的優(yōu)勢(shì)主要有：

1. 給布局提供一種可循的規(guī)律，解決多尺寸多設(shè)備的動(dòng)態(tài)布局問(wèn)題。
2. 給系統(tǒng)提供一種統(tǒng)一的定位標(biāo)注，保證各模塊各設(shè)備的布局一致性。
3. 給應(yīng)用提供一種靈活的間距調(diào)整方法，滿足特殊場(chǎng)景布局調(diào)整的可能性。

媒體查詢

媒體查詢（Media Query）在移動(dòng)設(shè)備上應(yīng)用十分廣泛，開(kāi)發(fā)者經(jīng)常需要根據(jù)設(shè)備的大致類(lèi)型或者特定的特征和設(shè)備參數(shù)（例如屏幕分辨率）來(lái)修改應(yīng)用的樣式。為此媒體查詢提供了如下功能：

1. 針對(duì)設(shè)備和應(yīng)用的屬性信息，可以設(shè)計(jì)出相匹配的布局樣式。
2. 當(dāng)屏幕發(fā)生動(dòng)態(tài)改變時(shí)（比如分屏、橫豎屏切換），應(yīng)用頁(yè)面布局同步更新。

本教程主要涉及彈性布局和柵格布局的講解和演示

三、彈性布局

Flex：官方文檔

應(yīng)用彈性方式布局子組件的容器組件。

參數(shù)

在Super Visual中導(dǎo)入一個(gè)flex布局，在右側(cè)可以看到如上的參數(shù)

• FlexDirection枚舉說(shuō)明

在flex中放置兩個(gè)標(biāo)簽，通過(guò)修改該參數(shù)可以實(shí)現(xiàn)橫向和豎向的顯示

如上圖，是direction的演示，F(xiàn)lex還有其它參數(shù)

FlexWrap枚舉說(shuō)明

FlexAlign枚舉說(shuō)明

大家可以自己自由測(cè)試，這里就不一一演示了

四、柵格布局

柵格系統(tǒng)

柵格系統(tǒng)有Column、Margin、Gutter三個(gè)概念

1. Gutter： 用來(lái)控制元素與元素之間距離關(guān)系?？梢愿鶕?jù)設(shè)備的不同尺寸，定義不同的gutter值，作為柵格布局的統(tǒng)一規(guī)范。為了保證較好的視覺(jué)效果，通常gutter的取值不會(huì)大于margin的取值。
2. Margin： 離柵格容器邊緣的距離。可以根據(jù)設(shè)備的不同尺寸，定義不同的margin值，作為柵格布局的統(tǒng)一規(guī)范。
3. Column: 柵格布局的主要定位工具。根據(jù)設(shè)備的不同尺寸，把柵格容器分割成不同的列數(shù)，在保證margin和gutter符合規(guī)范的情況下，根據(jù)總Column的個(gè)數(shù)計(jì)算每個(gè)Column列的寬度。

系統(tǒng)柵格斷點(diǎn)

系統(tǒng)根據(jù)不同水平寬度設(shè)備對(duì)應(yīng)Column的數(shù)量關(guān)系，形成了一套斷點(diǎn)規(guī)則定義。

系統(tǒng)以設(shè)備的水平寬度的屏幕密度像素值作為斷點(diǎn)依據(jù)，根據(jù)當(dāng)前設(shè)備水平寬度所在的斷點(diǎn)范圍，定義了設(shè)備的寬度類(lèi)型。系統(tǒng)的柵格斷點(diǎn)范圍、設(shè)備寬度類(lèi)型及其描述，以及對(duì)應(yīng)的默認(rèn)總列數(shù)(column)，邊距（margin)，間隔(gutter)定義如下：

這里以兩層嵌套為例：形成一個(gè)田字格

中間是經(jīng)過(guò)多層嵌套形成的田字格，左邊是如何進(jìn)行嵌套的層級(jí)展示，Row為豎向，Column為橫向，如果大家要做一個(gè)計(jì)算器或者任意形式的布局，使用Row和Column基本都可以實(shí)現(xiàn)。

編輯：黃飛