CanvasPanel
/
The canvas panel is a designer friendly panel that allows widgets to be laid out at arbitrary locations, anchored and z-ordered with other children of the canvas. The canvas is a great widget for manual layout, but bad when you want to procedurally just generate widgets and place them in a container (unless you want absolute layout).
允許指定部件的位置，錨點，以及覆蓋層級
允許放置多個孩子組件
適合於手動設置布局，不適用於程序化生成一個Widget並將其放置於一個容器中（除非想要絕對布局）。
CanvasPanel底下的部件會有Slot(Canvas Panel Slot) ，CanvasPanel和子部件的關系用這個Slot的屬性來設置：
-
Anchors: CanvasPanel的錨點，可以分別設置x，y在區間[0,1] 的任意值，表示屏幕的百分比位置。
-
PositionX
PositionY : 部件錨點(一般是左上角)相對於屏幕錨點的位置偏移
-
SizeX
SizeY: 部件的大小
-
Alignment: 對齊方式(相當於部件的錨點)，可以分別設置x，y在區間[0,1] 的任意值，表示部件的百分比位置。
-
SizeToContent: 當AutoSize為true時，使用部件的實際大小而無視SizeX,Y。（可看作部件大小的語法糖）
-
ZOrder: 設置層級，數字越大的放在上面
//確定部件位置：1.CanvasPanel錨點 + 2.兩個錨點間的位置偏移 + 4.部件錨點
//確定部件大小：3. 5.
//確定部件層級：6.
Overlay
Allows widgets to be stacked on top of each other, uses simple flow layout for content on each layer.
允許組件一個堆在另一個上，
每層使用簡單流式布局
Overlay底下的部件會有Slot(Overlay Slot) ，Overlay和子部件的關系用這個Slot的屬性來設置：
-
Padding
Left
Top
Right
Bottom: 內邊距（Overlay的各邊到子部件各邊的距離）
-
Horizontal Alignment
Horizontal Alignment Left
Horizontal Alignment Center
Horizontal Alignment Right
Horizontal Alignment Fill
Vertical Alignment
Vertical Alignment Top
Vertical Alignment Center
Vertical Alignment Bottom
Vertical Alignment Fill: 對齊方式，與Padding的值是疊加的。先計算對齊方式，再加上內邊距。（Fill會使用Overlay的Size代替部件的實際Size）
//確定部件位置：1.內邊距 + 2.對齊方式
//確定部件大小：無
//確定部件層級：無
使用范例
這里我用我自己做過的一個UI來作范例：有血條Widget，和時間Widget
一般來說Overlay的確定位置方式比CanvasPanel要簡單，所以基礎的Widget我是以Overlay為根組件創建的：
這是SizeBox_Percent，有一個子部件：設置對齊為水平靠右，豎直居中，然后加了一定的右內邊距
這是HorizentalBox，有三個子部件：設置對齊為水平居中，豎直居中
要注意這里的位置設置是相對於我們這里自動生成的Overlay的邊框來的（圖中最外層的虛線），這個Overlay的大小可以使用虛線右下角的拖放進行臨時設置，它並不會保存這個設置。
到這里血條部件算是創建好了。我們就可以在另一個Widget藍圖中使用它。
我們新建一個Widget Blueprint，在User Created 欄找到這個血條部件，將其拖到根部件CanvasPanel下：
可以看到這個血條部件的大小並不是我們在編輯此血條藍圖時的大小，而是默認的100*30。所以看到的效果變形了，為了驗證這一點，我們來到血條藍圖改變Overlay的大小：
這樣看來，是不是理解為什么做好的部件拖到另一個地方會變形了？它沒有變形，只是你需要在新的地方給它設置大小而已。
我們這里是在CanvasPanel部件下創建部件的，所以這個部件會被加上Canvas Panel Slot，我們在這里設置血條部件的位置，大小以及層級：
我們選中Size To Content快速設置血條組件的大小，可以看到這時的血條看起來跟編輯時的一樣了。
為了使血條部件始終居中顯示在屏幕頂端，我們設置CanvasPanel的錨點在靠上居中，設置血條的錨點也在靠上居中(不懂的看上面的CanvasPanel介紹部分)。然后設置兩錨點的位置偏移為0（PositionX, PositionY = 0, 0)。
完成。