懒人听书,我欲封天耳根小说零,好看的玄幻小说

一、ArkUI介紹

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

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

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

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

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

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

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

參數

參數名	參數類型	必填	默認值	參數描述
direction	FlexDirection	否	FlexDirection.Row	子組件在Flex容器上排列的方向，即主軸的方向。
wrap	FlexWrap	否	FlexWrap.NoWrap	Flex容器是單行/列還是多行/列排列。
justifyContent	FlexAlign	否	FlexAlign.Start	子組件在Flex容器主軸上的對齊格式。
alignItems	ItemAlign	否	ItemAlign.Stretch	子組件在Flex容器交叉軸上的對齊格式。
alignContent	FlexAlign	否	FlexAlign.Start	交叉軸中有額外的空間時，多行內容的對齊方式。僅在wrap為Wrap或WrapReverse下生效。

在Super Visual中導入一個flex布局，在右側可以看到如上的參數

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

如上圖，是direction的演示，Flex還有其它參數

FlexWrap枚舉說明

FlexAlign枚舉說明

名稱	描述
Start	元素在主軸方向首端對齊，第一個元素與行首對齊，同時后續的元素與前一個對齊。
Center	元素在主軸方向中心對齊，第一個元素與行首的距離與最后一個元素與行尾距離相同。
End	元素在主軸方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊。
SpaceBetween	Flex主軸方向均勻分配彈性元素，相鄰元素之間距離相同。第一個元素與行首對齊，最后一個元素與行尾對齊。
SpaceAround	Flex主軸方向均勻分配彈性元素，相鄰元素之間距離相同。第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半。
SpaceEvenly	Flex主軸方向元素等間距布局，相鄰元素之間的間距、第一個元素與行首的間距、最后一個元素到行尾的間距都完全一樣。

柵格系統有Column、Margin、Gutter三個概念

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

系統根據不同水平寬度設備對應Column的數量關系，形成了一套斷點規則定義。

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

設備水平寬度斷點范圍	設備寬度類型	描述	columns	gutter	margin
0<水平寬度<320vp	XS	最小寬度類型設備。	2	12vp	12vp
320vp<=水平寬度<600vp	SM	小寬度類型設備。	4	24vp	24vp
600vp<=水平寬度<840vp	MD	中等寬度類型設備。	8	24vp	32vp
840<=水平分辨率	LG	大寬度類型設備。	12	24vp	48vp