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

一、ArkUI介紹

框架介紹

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

基本概念

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

主要特征

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

二、常見布局

彈性布局

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

柵格布局

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

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

媒體查詢

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

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

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

三、彈性布局

Flex：官方文檔

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

參數(shù)

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

• FlexDirection枚舉說明

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

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

FlexWrap枚舉說明

FlexAlign枚舉說明

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

四、柵格布局

柵格系統(tǒng)

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

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

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

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

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

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

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

編輯：黃飛