Layouts

簡介

Layouts 提供了一種透過將 Shapes “對接”在一起來堆疊它們的方法。這意味著如果堆疊中某個 Shape 的邊界框發生變化，其他 Shape 將移動以適應該 Shape 所需的新空間。

這對於建立需要回應尺寸變化的動態佈局非常有用，同時也是一項有趣的藝術功能。

建立佈局

可以透過簡單地將 Shapes 添加到以下佈局組類型之一來建立佈局：

• Layout Group - 在水平或垂直方向排列 Shapes，並提供換行到多行/多列的選項。
• Grid Layout Group - 將 Grid Layout Rows 排列成列。
• Grid Layout Row - 將 Shapes 排列成行，用於 Grid Layout Group。

1. 建立 3 個 Shapes。
2. 選取所有 3 個 Shapes，在 Viewport 中右鍵單擊，然後選擇 Layout > Embed selected in Horizontal Layout。

要建立簡單的水平佈局：

1. 建立 2 個 Shapes。
2. 建立一個 Layout Group。
3. 在 Scene Window 中選取兩個 Shapes。
4. 將兩個 Shapes 拖放到 Layout Group 上。
5. 釋放滑鼠。

兩個 Shapes 將並排排列在水平佈局中。如果變更任一 Shape 的 Width（Size W），佈局將相應更新。

佈局組可以像任何其他圖層一樣透過 Add Layers 視窗建立，但也可以使用 Scene Window 或 Viewport 中的右鍵選單建立。只需選取多個 Shapes，右鍵單擊並選擇 Layout > Embed selected in [Horizontal/Vertical/Grid] Layout。

要從佈局組中移除 Shape，只需將其拖出佈局組即可。

層級

佈局組是層級結構，Shapes 從圖層堆疊的頂部到底部進行組織。Layout Group 的任何直接子級都將被納入佈局，但比子級更深的 Shape（例如孫級等）將被忽略。

透過在佈局組中巢狀佈局組，可以建立更複雜的佈局。

在下面的示例中，2 個水平佈局組是一個垂直佈局組的子級，而該垂直佈局組本身又是另一個水平佈局組的子級。

多個佈局組彼此巢狀。

可以透過在 Attribute Editor 中的 Advanced 選項卡下勾選 Exclude from Layout，將佈局組中的 Shape 排除在佈局之外。參見 Common Attributes。

變換

一旦將 Shape 添加到佈局組中，就可以調整其變換（位置/旋轉/比例），這意味著可以為佈局組內的 Shapes 製作動畫。請注意，佈局讀取的是 Shape 的邊界框，而忽略”頂層”變換。因此，雖然 Shape 可能被旋轉，但佈局本身不會改變，因為 Shape 的邊界框沒有改變。

當將 Shape 添加到佈局組時，其 Position 將重設為 0,0。雖然 Shapes 不必位於 0,0，但如果 Shapes 被無意移動，佈局可能會顯得混亂。

從佈局組中移除 Shape 時，其變換將保持不變。

邊界框

Shape 的世界空間邊界框用於計算它在佈局中所佔的空間。由於頂層變換被忽略，因此 Shape 需要成為另一個 Shape 的子級，才能使任何變換影響佈局的邊界框計算。

在下面的示例中，由於黃色矩形是 Group（底部）的子級，其旋轉會變更該 Group 的邊界框，進而影響佈局組中其他 Shapes 的佈局。

矩形作為佈局組的子級。

矩形作為佈局組中 Group 的子級。

雖然佈局本身忽略子級以下的 Shapes（例如孫級等），但作為層級結構的一部分，它們會被包含在其父級的邊界框計算中，從而可能影響佈局。

Spacers

Spacers 可用於填充佈局中的任何可用空間，從而用於均勻分佈空間或將儲存格對齊到佈局的左/右/頂/底。

在下面的示例中，請注意 Spacer 如何填充佈局中的可用空間，從而迫使其他儲存格相應地對齊。

放置在兩個 Shapes 之間的 Spacer。

放置在兩個 Shapes 下方的 Spacer。

要將 Spacer 添加到佈局中，只需透過 Add Layers 視窗建立一個，然後將其拖入 Layout Group。

Layout Group 的 Spacing Mode 必須設定為 Manual Spacers，才能將 Spacers 納入佈局計算。在任何其他 Spacing Mode 下，除非設定為 ‘Fixed Size’，否則它們將被忽略。

對齊

Shape 在儲存格中的對齊方式可以透過其 Advanced 選項卡下的 Vertical/Horizontal Layout Alignment 選項設定。參見 Common Attributes（Advanced 選項卡）。

請注意，Text Shape 的 Alignment 和 Vertical Alignment 將被這些設定覆寫。

注意事項

• 具有基線對齊的 Text Shape 將對齊到其佈局的底部。這意味著任何下行字母將位於其”儲存格”之外。
• Layout Group 與 Groups 共享功能，因此子級將繼承添加到其上的任何 Transforms、Filters 或 Deformers。
• 透過 Add Layers 視窗或右鍵選單建立任何佈局組類型時，它們將在 Scene Window 中被鎖定。這是為了防止在 Viewport 中與其他 Shapes 互動時，對組內的 Shapes 添加任何意外的變換。