接上篇，繼續(xù)Squareline的屬性欄

3、Transform - 變換，詞窮。。主要是部件的位置、大小信息。

X、Y，是以部件中心為原點(diǎn)的相對父級位移，是的，不是的相對位置，也不是絕對位置。

當(dāng)X、Y為0時，部件并不一定是在左上角，而是靠Align（對齊）來確定，Align為Center（中心），則部件在父級容器的中心，X、Y加減是以這個中心來移動的。如果Align為BOTTOM MID，則部件在父級容器的中下，如下圖所示。

X、Y輸入框有兩個單位，px和%，px是像素，%則是相對父級容器百分之多少，例如，X=10%，則實際移動為：父級容器寬度*10%，-10%和Y同理。注意部件是可以移動到顯示區(qū)域外部的。

Width（部件寬度）、Height（部件高度），三個單位px、%、Content、fr，px：像素、%：相對父容器百分比，Content：和值無關(guān)，在保證正常顯示的前提下，盡量減小寬度/高度（類似于自適應(yīng)大小，由內(nèi)部子級部件確定），我只在LVGL文檔中找到了這個玩意，實際效果也是這效果，對不對就不一定了，見下圖這是兩個寬度為1Content，高度為50px的按鈕。

fr：僅在父級為flex彈性布局時才有，這是一個比例。舉個例子：橫向排列狀態(tài)，同一行內(nèi)有兩個部件，一個寬度為2fr，另一個為3fr，那么2fr的部件寬度則為：2/（2+3）*100%*父級容器寬度，也就是40%，與百分比不同的是，百分比可超出顯示區(qū)域，而fr則由于基數(shù)為100%，所以不會，同時如果混用，其它三個單位導(dǎo)致超出范圍后，以fr為單位的部件會顯示不出來。

Align - 對齊：X、Y為0時，部件相對父容器的位置。

CENTER：中心，TOP LEFT：左上，TOP MID：中上，TOP RIGHT：右上，BOTTOM LEFT：左下，BOTTOM MID：中下，BOTTOM RIGHT：右下，LEFT MID：中左，RIGHT MID：中右。

標(biāo)志

滾動條顯示模式：OFF - 不顯示，ON - 常顯，ACTIVE - 激活時顯示，AUTO - 自動

滾動方向：TOP：向上，LEFT：向左，BOTTOM：向下，RIGHT：向右，HOR：橫向，VER：縱向，ALL：全向。

狀態(tài)：部件狀態(tài)可處于以下的一個或組合

Checked：切換或選中的狀態(tài)

Disabled：禁用，禁用狀態(tài)

Focused：聚焦，通過鍵盤或編碼器對焦，或通過觸摸板/鼠標(biāo)單擊。

Pressed：被按下

User：自定義的部分

基礎(chǔ)的屬性就到這，每個部件還有各自的屬性，同時每個部件的樣式也有所差別，下面先寫下樣式中相同的東西，隨后將詳細(xì)到不同種類的部件進(jìn)行擴(kuò)展。

STYLE SETTINGS 樣式設(shè)置

?STATE - 狀態(tài)：部件會有以下幾種狀態(tài)，每種狀態(tài)都可以設(shè)置一種樣式，當(dāng)部件處于此狀態(tài)時便顯示對應(yīng)的效果，以呈現(xiàn)出更好的視覺體驗。

基礎(chǔ)樣式基本就這些了，后面分開說每個部件，因為有屬性也有樣式，可能會有點(diǎn)亂。（屬性是部件運(yùn)行的主要參數(shù)，樣式是外觀樣貌）