用超多案例，幫你掌握 Symbol 的自適應封裝實戰演練

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

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

上期干貨：

自適應封裝實戰演練

基礎原理——固定布局和方向布局，上文已經介紹完了。掌握這兩個原理，搭配使用就可以實現各種各樣的自適應效果，本文會以tab、對話框、氣泡框組件為例實戰演練。

1. 水平自適應：tab 組件

第一步，明確期望達到的自適應效果。想清楚你想實現什么樣的自適應推移效果。同一組件，不同場景下，理想的自適應效果是不同的。對于 tab 組件，一般為內容變化后，水平向左推移或垂直向下推移其他內容。

第二步，先單個后整體創建 symbol 并設置方向屬性。

①帶徽標 tab

（1）首先，單個 tab 本身需要實現內容自適應。所以先要設置單個 tab 選項的自適應效果。單個 tab 項中，不僅選項名稱可輸入，徽標數值也可輸入，都要實現自適應。內容輸入后，自適應方向應該是水平向右。因此這一步很簡單，將單個 tab 項選中創建 symbol，設置單個 tab 選項的自適應方向是水平向右（整個 symbol 里面的元素都被遵循 symbol 的整體方向）

（2）接著，同理設置好組件其他每種狀態。設置其他每種狀態的好處是能方便的切換組件類型和狀態，如在選中態和非選中態之間切換，更輕松地作圖。比方說，我們畫圖時第一張圖可能要展示的是 tab1 底下的內容，第二張圖要展示 tab2 的內容，那這時候我們只需要選中 tab2 將它切換成選中態，再將 tab1 替換為未選中態就可以了，tab 里面的文字內容也都不需要調整。

（3）其次，就是以單個 symbol 為基礎，實現整個 symbol 組的自適應。將這些 tab 項編組創建一個新的控件，整體設置方向。整個 tab 要實現順序連續推移。

讓我們來試試更改 tab 名稱的效果，并試試配合著組件類型切換，更高效的使用。減少一個 tab 內容，也能絲滑的自適應。這樣封裝以后，做圖時使用這個 tab 組件就能縱享絲滑。

「問題探討 1」沒做任何設置，為什么 tab 項下方這個線條也會跟隨變長？

答：因為輸入自適應時，sketch 會自動控制好元素和元素之間的間距，線條到容器的邊距會保持不變。（自動推移間距固定）

「問題探討 2」徽標數字和下方底色需要編成一組嗎？不編組會不會錯位？

答：在這個案例中，編不編都可以，因為 symbol 內所有元素都會遵守 symbol 的方向屬性、而 sketch 又會自動控制好元素和元素之間的間距，編不編組的效果是一樣的。編組對自適應效果會有一定影響，如果是 symbol 內元素很多，可以進行編組。（編組）

「問題探討 3」：之間提到過內容自適應模式下，Sketch 會默認幫我們固定好元素之間的間距。那間距是 0 的時候，可以實現自適應效果嗎？間距是-1 的時候也可以嗎？

答：間距必須大于等于 0，元素和元素之間不能疊在一塊兒。（元素間距）
原理補充：內容想要推移另一個內容，那內容間距必須不能小于 0。容器間距、橫向間距、縱向間距，都是如此。PS：邊框屬性的設置會影響到內容之間的間距。

②縱向 tab

首先，確認想要實現的效果。第一，垂直 tab 不需要設置水平方向的內容推移內容，文字左對齊就能實現，所以對單個 tab 選項也不需要設置自適應效果。第二，縱向上需要實現減少一個 tab 項后的自適應，則我們要設置整個組件的方向是垂直向下變化的。

接著，先將各個不同狀態的單個 tab 選項創建成 symbol，然后將整個垂直 tab 創建一個新的 symbol，設置方向為垂直向下。

2. 垂直方向自適應：氣泡框

首先，明確一下想要實現的自適應效果：隨著內容文字變多，氣泡框自動撐高高度（寬度不變）。

我們首先需要設置好固定布局。

然后再設置一下組件整體的自適應方向。需要注意氣泡框的箭頭，箭頭如果在上方，最好設置成垂直向下推移內容；如果是在下方，那最好設置成垂直向上推移內容。如果在中間，最好設置成垂直居中。

「問題探討 1」這個氣泡框能不能既自動變高又自動變寬嗎?

答：不能，還沒那么智能。想讓組件變寬，只能去拖動寬度，但拖動后組件的高度不會變。個人認為是因為已經自動撐高的高度，只能通過減少內容，通過內容自適應去減小高度，否則不會再自動變化。或者我們只能手動拉伸，去減小高度。

「問題探討 2」隨文字撐高后，這個氣泡高度太高了，我想適當調整一下寬度，讓寬高比例協調，該怎么操作？

*小妙招介紹：這里教大家另一種方法：我們還是先把氣泡框拉到合適的寬度，實際上此時的這個 symbol 依然具有自動撐高高度的自適應屬性。我們剪切一下文字內容試試，可以發現組件恢復了預設的文字，并且實現了高度自適應，然后我們再把文字復制進去，可以發現組件在已拉伸寬度下，實現了高度自適應。總結一下就是，組件拉伸后仍具有自適應屬性，通過剪切文字重置一下自適應功能，就又能自動實現高度自適應。只需要剪切文字然后重新粘貼就可以了。

「問題探討 3」多行文本，可以實現水平方向的自適應嗎？還是只能實現垂直方向自適應？

答：不能實現水平方向的推移，只能實現垂直方向自適應。多行文本的文字對齊方式默認是自動高度，已經是垂直方向屬性。文字對齊方式是文字內容最基礎最根本的方向屬性。（文本方向屬性）

3. 彈窗（按鈕組）

以彈窗為例，分別展示固定布局和方向布局原理。

確定一下彈窗組件預期的自適應效果。首先要實現拉伸自適應，拉伸時各個元素（標題、關閉圖標、內容文字、線條、按鈕組）不錯位不變形。其次要實現輸入自適應，內容文字輸入后彈窗自動撐高，底部按鈕輸入文字后自動水平向左推移。

第一步，設置固定布局。

第二步，設置方向布局。我們既可以給整個 symbol 設置方向，也可以給 symbol 內的編組設定方向。我們將這個彈窗創建控件，然后分別給整體 symbol 和按鈕組編組設置方向。

（1）給彈窗整體設置方向為垂直向下，其中的內容文字也會遵守整體方向，實現輸入后垂直向下推移。

（2）設定按鈕組的方向布局屬性。同樣需要先從設置單個按鈕的自適應開始，單個按鈕本身需要實現內容自適應。將單個按鈕選中創建 symbol，并設定自適應方向為水平向右。盡量設置為使用單個按鈕時最常用的推移方向，不僅要設置主按鈕，其他類型的按鈕如次按鈕、普通按鈕都需要進行這一波操作。（按照封裝組件的正常流程，按鈕是最基礎的元素，做組件時最先會封裝好，那在這里其實只要去調用封裝好的按鈕組件就可以了，不用重新再去設置單個按鈕的方向布局了。）其次，實現整個編組的自適應。只需將這兩個按鈕編組，然后給這個編組設置方向為水平向左。

「問題探討 1」組內子級編組的自適應方向和整體的自適應方向，可以設置成不一樣的嗎？最終實現效果是什么樣？

答：不需要，里層 symbol 不需要和頂層 symbol 保持一致的方向屬性。一方面，自適應效果是一層一層的疊加形成的。另一方面，各個類型的按鈕 symbol，本體只有一個，我們會在各個組件引用它。當你改變了 symbol 本體的方向布局，全局都改變了。

總結：第一種拉伸自適應的場景里，需要我們自己去固定位置和固定尺寸，也可以通過設置多個元素固定邊緣，來實現元素之間的間距固定。如果不設置固定布局，sketch 會默認按照百分比縮放內容和間距。第二種輸入自適應里，內容自動推移時，Sketch 會默認幫我們固定好元素之間的間距。

4. 設計中處處可以使用 symbol

當然需要封裝自適應效果的不止本文所舉例的這些組件，也并非所有組件都需要實現自適應效果。有些組件是不需要做自適應的，例如單選、復選組件，只需要簡單替換文字內容就可以。并且有些組件一開始定義的視覺樣式，很難去封裝自適應效果（具體后面有機會分享），主要是因為在定義樣式的階段，很少為后期做自適應效果而考慮。

最重要的是，只要我們掌握了 symbol 封裝和自適應原理，作圖中處處都可以運用。symbol 可以運用在可視化組件、海報、運營專題頁、插畫、用戶體驗地圖等各種地方，通通都可以幫助我們提效。