用超多案例，幫你掌握 Symbol 的自適應封裝原理

本文聚焦于 sketch 中 symbol 組件庫自適應效果的封裝，講解封裝目的、自適應原理、自適應封裝思路等，并實例演示部分組件的自適應封裝思路及操作步驟。通過自適應封裝，可以實現組件任意拉伸不變形、更改組件字符內容自適應推移，以及減少控件（設為無控件）的自適應推移效果，從而使設計師使用組件庫更便捷，產出頁面更高效。

文章篇幅較長，會分篇章逐一展開。有關 symbol 替換的封裝思路，例如切換組件不同類型或狀態非本文重點僅簡單提及。本文案例中部分組件樣式引用自 AntD。

自適應封裝原理

上篇文章中，介紹了 symbol 與 symbol 自適應。

那重點來了，如何將組件封裝成靈活的自適應組件？

前面我們提到過，組件主要有兩種自適應形式，一是拉伸不變形，二是輸入自適應。組件自適應效果的實現，依賴于 sketch 的兩個功能，一是固定布局，二是方向布局。

1. 基礎原理一：拉伸不變形

如何實現拉伸不變形？即子級元素跟隨父級，產生不變形不跑偏的適應變化。

這里就要說到 sketch 的一個功能：固定布局，也叫彈性布局、神奇縮放、Resizing。拉伸不變形需要基于編組，而封裝 symbol 的時候系統就會默認建立編組。固定布局對于 symbol 縮放變形時，組內里面各個元素的相對位置變化起著關鍵作用，可以避免縮放時編組里面的內容變形跑偏。

固定布局包含兩種：一是 Pin to Edge 固定邊緣，即固定元素到邊緣的內間距，包括固左、固右、固上、固下。二是 Fix Size 固定尺寸，即固定元素自身的尺寸大小，包括固定寬度、固定高度。通過設置固定布局，我們就可以固定元素的位置和尺寸。設置完布局方式后，可通過 Preview 預覽功能，預覽自適應布局效果。

例如，做圖時我們經常需要調整選擇器的寬度，但是未進行自適應封裝的組件，拉伸后效果一般都很糟糕。

下面以選擇器拉伸不變形為例，簡單演示一下如何設置固定布局，實現圖示的拉伸自適應效果。

選擇器內一共 3 個元素：文字、icon、容器。其中父級是容器，子級是文字和 icon。想象一下我們期望的每個元素拉伸時的拉伸效果。一是文字容器到左邊緣的間距保持固定；二是 icon 不會變形，且 icon 到右邊緣的間距保持固定。接下來，只需要我們稍微設置一下，就能實現完美的拉伸效果。

這樣就實現了我們想要的效果。但如果是定義組件規范的話，就涉及到一些更深層次的考量。例如，組件規范里一般會定義文字容器的大小，拉伸時文字容器跟著輸入控件寬度的變化自適應寬度。那我們設置的時候就要多做一步操作，需要設定文字容器到選擇器右邊緣的間距也保持固定，從而保證文字容器和 icon 之間的間距固定為 8pt。圖示了固定和未固定文字容器右邊距的效果對比。

相對復雜一點的組件，如對話框，我們也可以對其內部元素進行一一設置，從而使得拉伸效果非常絲滑。

需要注意的是，不同于輸入自適應，設置拉伸自適應是不需要創建 symbol 的，而是需要基于編組來設置。

注意點：為什么我的自適應效果不對？

①盡量減少編組：檢查一下編了幾個組，是不是組里又套著組？我們設置的固定布局是固定一個編組內，子級相對于父級的位置變化。多了一個編組，就多形成了一個子級和一個父級關系，你需要一層一層地向上設置父級中子級元素的固定布局，來保證每層編組的相對位置變化。所以封裝時，盡量保證層級簡單，否則效果容易不對，自己也容易找不到錯在哪兒。

②勿遺漏設置：總共有哪些元素，檢查是不是一一設置好了。

2. 基礎原理二：輸入自適應

如何實現輸入自適應：即讓父級組件的尺寸跟隨子級元素字符內容的變化而變化。

這里介紹 sketch 的另一個功能：方向布局，即通過設定組件推移方向，實現內容變化自適應。

我們在創建組件的時候，可以選擇性賦予組件不同的方向屬性，賦予屬性之后組件內字符增加或減少，會根據設置的方向改變組件的寬高。主要可以設置 3 種大方向：水平、垂直、無。水平方向下，又可以細分為水平向左，水平居中，水平向右 3 種；垂直方向上，細分為垂直向下、垂直居中、垂直向下 3 種，所以一共有 7 種。

其實類似的方向設置功能，我們經常用到。比如設置文字的對齊方式：左對齊、居中對齊和右對齊；以及文字的方向：自動寬度（即單行不斷變長）或是自動高度（段落寬度固定高度變化）這兩種，效果類似。較常使用是設置為水平方向，設置垂直方向一般是為了配合文字折行，即文本采用自動高度的對齊方式，實現文本域的高度變化。

方向布局功能可以在兩處進行設置：一是，在創建 symbol 的時候也可以預先設置好；二是，進入 symbol 控件中，在右側的工具欄里設置。因此，我們可以知道，不同于拉伸自適應，設置輸入自適應必須創建 symbol。

在這里舉個超簡單的例子，描述列表的自適應封裝。字數變化時，label 字段自動推移內容字段，且兩者之間間距不變。我們只需要這兩個字段選中，生成 symbol 的時候，設置一個方向——水平向右就可以了。

當然了，在一個復合型的組件中，也會存在水平和垂直方向混合的情況，多個不同自適應方向的 symbol 可以嵌套組合，讓我們在使用組件的能夠非常方便地根據需要來調整字符。

注意點：

1. 只有 symbol 控件才能設置推移方向，設置為無控件后，內容減少的方向也遵循 symbol 設定的方向布局。
2. 想要設置拉伸自適應，則需要元素存在父級和子級關系，只需要基于編組，并非必須創建控件。

3. 基礎原理小拓展

「問題探討——固定尺寸與自適應」文字圖層設置為固定尺寸了，還能夠自動推移嗎？

答案是：可以。固定寬度或高度，只會確保編組或圖層的尺寸不會被外部縮放所改變，并不會限制其內部產生的尺寸變化，也不會影響其內部文本在尺寸變化后的內容跟隨，即固定尺寸，固定的是拉伸時候尺寸不發生變化，不影響自適應推移。