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

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

自適應(yīng)封裝原理

上篇文章中，介紹了 symbol 與 symbol 自適應(yīng)。

那重點(diǎn)來了，如何將組件封裝成靈活的自適應(yīng)組件？

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

1. 基礎(chǔ)原理一：拉伸不變形

如何實(shí)現(xiàn)拉伸不變形？即子級(jí)元素跟隨父級(jí)，產(chǎn)生不變形不跑偏的適應(yīng)變化。

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

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

例如，做圖時(shí)我們經(jīng)常需要調(diào)整選擇器的寬度，但是未進(jìn)行自適應(yīng)封裝的組件，拉伸后效果一般都很糟糕。

下面以選擇器拉伸不變形為例，簡單演示一下如何設(shè)置固定布局，實(shí)現(xiàn)圖示的拉伸自適應(yīng)效果。

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

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

相對(duì)復(fù)雜一點(diǎn)的組件，如對(duì)話框，我們也可以對(duì)其內(nèi)部元素進(jìn)行一一設(shè)置，從而使得拉伸效果非常絲滑。

需要注意的是，不同于輸入自適應(yīng)，設(shè)置拉伸自適應(yīng)是不需要?jiǎng)?chuàng)建 symbol 的，而是需要基于編組來設(shè)置。

注意點(diǎn)：為什么我的自適應(yīng)效果不對(duì)？

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

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

2. 基礎(chǔ)原理二：輸入自適應(yīng)

如何實(shí)現(xiàn)輸入自適應(yīng)：即讓父級(jí)組件的尺寸跟隨子級(jí)元素字符內(nèi)容的變化而變化。

這里介紹 sketch 的另一個(gè)功能：方向布局，即通過設(shè)定組件推移方向，實(shí)現(xiàn)內(nèi)容變化自適應(yīng)。

我們在創(chuàng)建組件的時(shí)候，可以選擇性賦予組件不同的方向?qū)傩?，賦予屬性之后組件內(nèi)字符增加或減少，會(huì)根據(jù)設(shè)置的方向改變組件的寬高。主要可以設(shè)置 3 種大方向：水平、垂直、無。水平方向下，又可以細(xì)分為水平向左，水平居中，水平向右 3 種；垂直方向上，細(xì)分為垂直向下、垂直居中、垂直向下 3 種，所以一共有 7 種。

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

方向布局功能可以在兩處進(jìn)行設(shè)置：一是，在創(chuàng)建 symbol 的時(shí)候也可以預(yù)先設(shè)置好；二是，進(jìn)入 symbol 控件中，在右側(cè)的工具欄里設(shè)置。因此，我們可以知道，不同于拉伸自適應(yīng)，設(shè)置輸入自適應(yīng)必須創(chuàng)建 symbol。

在這里舉個(gè)超簡單的例子，描述列表的自適應(yīng)封裝。字?jǐn)?shù)變化時(shí)，label 字段自動(dòng)推移內(nèi)容字段，且兩者之間間距不變。我們只需要這兩個(gè)字段選中，生成 symbol 的時(shí)候，設(shè)置一個(gè)方向——水平向右就可以了。

當(dāng)然了，在一個(gè)復(fù)合型的組件中，也會(huì)存在水平和垂直方向混合的情況，多個(gè)不同自適應(yīng)方向的 symbol 可以嵌套組合，讓我們在使用組件的能夠非常方便地根據(jù)需要來調(diào)整字符。

注意點(diǎn)：

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

3. 基礎(chǔ)原理小拓展

「問題探討——固定尺寸與自適應(yīng)」文字圖層設(shè)置為固定尺寸了，還能夠自動(dòng)推移嗎？

答案是：可以。固定寬度或高度，只會(huì)確保編組或圖層的尺寸不會(huì)被外部縮放所改變，并不會(huì)限制其內(nèi)部產(chǎn)生的尺寸變化，也不會(huì)影響其內(nèi)部文本在尺寸變化后的內(nèi)容跟隨，即固定尺寸，固定的是拉伸時(shí)候尺寸不發(fā)生變化，不影響自適應(yīng)推移。