深入淺出學習eTs（三）UI布局

本項目Gitee倉地址：深入淺出eTs學習: 帶大家深入淺出學習eTs (gitee.com)

一、ArkUI介紹

框架介紹

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

基本概念

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

主要特征

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

二、常見布局

彈性布局

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

柵格布局

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

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

媒體查詢

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

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

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

三、彈性布局

Flex：官方文檔

應用彈性方式布局子組件的容器組件。

參數(shù)

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

• FlexDirection枚舉說明

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

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

FlexWrap枚舉說明

FlexAlign枚舉說明

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

四、柵格布局

柵格系統(tǒng)

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

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

系統(tǒng)柵格斷點

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

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

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

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

編輯：黃飛