Infragistics｜Indigo.Design｜從 Sketch 檔案產生程式碼時佈局設定的基礎知識

從 Sketch 檔案產生程式碼時，如果 Sketch 檔案上的佈局設定不正確，就會發生損壞。我們將透過建立一個簡單的登入畫面來解釋佈局的基礎知識。

創作樣本

使用程式碼產生器產生如下所示的畫面。

我們這次實現的佈局有以下四個要點。

1. 寬度為 100% 的導覽列組件
2. 固定大小的登入面板
3. 登入面板垂直和水平居中佈局
4. 按組件分組

1. 100%寬度的Navbar組件

本例中，左、右、上緣以銷釘固定，高度設定為FIX（即寬度靈活）。

2.固定大小的登入面板

登入面板的高度和寬度都有固定的尺寸。 在這種情況下，寬度和高度的設定將在程式碼產生期間反映在 scss 端。

3. 登入面板佈局垂直和水平居中

若要建立中心歌舞雜耍佈局，請將固定大小的組件放置在其父組或畫板的中心。但是，在此範例中，導覽列放置在頂部，因此它放置在不包括導覽列的區域的中心。（設定方法與僅垂直居中或僅水平居中相同。）

4. 按組件分組

程式碼產生是將在 Sketch 上建立的一組解釋為一個元件來執行的，因此在建立 Sketch 時，請注意根據程式碼產生時的元件設計來建立群組。