單片機低代碼交互UI制作 - LVGL+Squareline+Arduino平臺 學習記錄（3）
Squareline的注冊、安裝、介紹等前期準備
Squareline沒有中文，漢化有空研究下吧，不一定能成，本篇主要做了下英漢對照，參考著看。Squareline官網(wǎng)：https://squareline.io（不掛梯子問題不大）
Squareline的試用版是根據(jù)設備來的，如果是未安裝過的設備不注冊賬號也可以用30天。
注冊
在主頁上點這個，直接進注冊頁面的話鏈接：https://squareline.io/sign-up
注冊界面，郵箱實測QQ、163都能接收到驗證郵件，沒限制。
注冊完成后會發(fā)送一封確認郵件，在郵箱確認完成后進入登錄界面。
如下圖點擊確認界面與下圖類似，如果還是發(fā)送郵件界面則回郵箱再點幾次，直到提示驗證成功。
下載軟件在這，鏈接是：https://squareline.io/downloads
支持WIN、Linux、MAC三類，按需選擇，實測下載有點慢。
下載的壓縮文件里就這一個玩意。
雙擊文件
等待跑條
完成
安裝完成后雙擊打開，注意軟件需要登錄獲取證書后才能離線運行。
進入后應該是下面兩個圖中的一個，也就是登錄賬號。
接下來就是項目管理界面，直接上圖。
這里有個坑，分辨率和顯示方向，分辨率需要根據(jù)你的屏幕來定，一般廠家對于寬高都有說明。但顯示方向和TFT_eSPI有沖突，TFT_eSPI對于屏幕的寬高是固定的，也就是說屏幕廠家給的什么就是什么，可在Squareline里，調整屏幕方向就是在調整寬高。。。
醉了，不知道以后官方會不會改，目前處理方法是，調整好橫屏、豎屏就行了，方不方向的不重要，填什么都可以，只要Squareline里的顯示效果是你要的，后面代碼里改TFT_eSPI的參數(shù)就可以了。
例程那一欄，看懂上面那兩個圖自然就會了。
主界面介紹，這些功能欄都是能拖的，可能會有些不一樣，我這是拖過的。
項目樹欄介紹
部件欄介紹
素材欄
輸出/日志欄
動效欄
屬性欄，這個比較多
1、名稱
最上面是部件類型，這個是屏幕，部件上面還有個組件。Name這一行可以改名字，無法使用中文，錯誤文字（例如中文、特殊符號）無法鍵入。
2、布局
LVGL的布局和樣式參考的是網(wǎng)頁CSS那一套，而CSS作為網(wǎng)頁的三大件之一，真的挺雜的，我想盡量把這些說的易懂一些，雖然我自己也不太懂。
FlexFlow直譯彈性流，我更想稱其為布局選項，這一欄有兩個選項，No Layout - 無布局，F(xiàn)lex - 彈性布局。
請注意，這一欄的作用對象是它內部的部件（子級），而不是它自己。說到父子關系應該不難理解，下圖紅色線標識的兩個Button按鍵就是父級Panel的子級，而黃色線標識的是同級。所以如果設置的是Panel這個部件，它的作用范圍只有兩個孩子Button，管不著它兄弟Image和它爹Screen。
No Layout - 無布局：應該比較好理解，部件通過X、Y坐標來確定自己的位置，可以相互重疊甚至跑出容器不顯示或只顯示一部分。如圖所示，這是兩個重疊的按鈕和一張超出顯示范圍的圖片。
Flex - 彈性布局：內部的部件自動排列，超出顯示范圍的只顯示一部分，在一些網(wǎng)站上應該見過，拖動瀏覽器邊框改變大小，網(wǎng)頁上的顯示會自動進行壓縮間隔、換行等操作。如圖，還是那些部件，彈性布局下就變成自動排列了。
但！在后面的Flags（標志）中有兩個可以讓子級解除布局限制的選項，1、IGNORE_LAYOUT（忽略布局），2、FLOATING（浮動）。這兩個選項都是在子級上的，接上之前的例子，如果你在Panel上開啟了其中任意一個，只會讓Panel脫離它爹Screen的管控（注意是管控，而不是分家），Panel的兩個孩子Button依然是受它管理的。
在選擇無布局時是沒有上圖這一欄的，彈性布局畢竟涉及到一些自動化操作，不給點指引放飛自我的話效果絕對不是想要的那種。
FlexFlow。。。是的它又出現(xiàn)了，這一次它是代表著彈性布局方向來的，由于彈性布局是自動排列換行的，那么是橫著排還是豎著排需要一個指示，Row（行）也就是橫著來，Column（列）豎著排。
注意，即使同一行（/列）中，前一個部件比后一個部件高了很多，后面的部件也不會在同一行豎著排，如下圖所示。
Wrap - 包裹，或者說自動換行。以上面布局方向為橫向（行）來舉例，橫向排列的部件超過父級容器寬度時，No Wrap：不換行接著向后排，超出父級容器范圍（顯示區(qū)域）的就不顯示；Wrap：換行，這個就好理解了，反正不管這個超出的容器在下一行會不會依然超出，直接給它新開一行就完了。
（至于超出父級顯示區(qū)域的部分，想想滾動條就知道它并不是沒有作用的了，LVGL真的很強大，不是畫個框框圈圈那么簡單）
No wrap - 不換行，下圖。
Wrap - 換行，下圖。
Reversed - 翻轉，兩個選項1、不翻轉，2、翻轉。效果就是子級的排列順序是正著排還是反著排，沒太想明白這一條的實際用途，難道是后面為了程序控制方便的嗎？
兩個選項的效果。
題外話，老外這些功能的詞真的搞的腦袋疼。
Main dir.align - 主對齊。。。真特喵der，如果是橫向排列，那么它就是水平對齊，如果是縱向排列，它就是豎直對齊。。。更特喵der了。
橫向排列：
Start：左對齊
Center：水平居中對齊
End：右對齊，前面這仨看著部件間有間距，其實是沒有的，下圖應該能看明白，一些陰影等效果會導致部件有邊緣。
Space between：等間距，
Space around：部件到兩側父級邊框的距離相加等于部件間距，
Space evenly：部件到兩側邊框的距離與部件間距相等。
縱向排列：
Start：頂部對齊
Center：垂直居中對齊
End：底部對齊，后面那仨一樣，只不過換成了豎著的
Cross dir.align - 交叉對齊。。。?。。?！什么特么玩意啊?。?！
橫向排列時，它控制的是垂直對齊；縱向排列時，它控制的是水平對齊，還是上圖吧。
橫向排列，等間距分布：
Start：頂部對齊
Center：居中對齊
End：底部對齊
縱向排列，等間距分布：
Start：左對齊
Center：居中對齊
End：右對齊
前面兩個設置的是一行/列內的對齊樣式，而下面這個Track控制的則是每一行/列的對齊樣式。
我沒有找到一個合適的詞去簡述它的功能，同樣更更der的來了，通過前面知道了有換行和不換行兩種狀態(tài)，也就是說布局內最少有一行，以此為標志。
不換行 -> 橫向排列：這一欄類似于縱向排列時的Main dir.align，也就是這一行相對于父級位置。Start：頂部對齊，End：底部對齊，由于只有一行，其余四項都是居中效果，只放個全為居中的圖，其它的自己試吧。
不換行 -> 縱向排列：對應的是橫向排列時的Main dir.align。Start：左對齊，End：右對齊，其它居中。
換行 -> 橫向排列：由于換行則可能出現(xiàn)多行的情況，這也是為什么前面要對照Main dir.align，因為換行后效果是一樣的，只不過作用的范圍從行內部件，變成了每個自動產(chǎn)生的行。（這自動換行的內容話說不都是控制邊距的嗎？這樣搞真的頭一次見。）
換行 -> 縱向排列：懶得弄了，放個圖自己試吧，看起來很有用，其實用的時候真不多
太長了，下篇繼續(xù)。。
