今天我們來聊聊組件的動態(tài)響應(yīng)性，這是搭建組件庫的重中之重，也是搭建組件庫系列的最終章！

先前的評論：

不過，這里有一個大綱：

什么是動態(tài)響應(yīng)

響應(yīng)式想必大家都很熟悉，說得更專業(yè)一點(diǎn)，就是指系統(tǒng)對不同介質(zhì)（運(yùn)行網(wǎng)頁的設(shè)備）和窗口（顯示網(wǎng)頁的瀏覽器窗口）的自適應(yīng)變化。

做跨設(shè)備響應(yīng)的朋友接觸的會比較多，從大屏（PC）、中屏（平板）到小屏（移動端），為了適配不同的設(shè)備，需要制作至少三種斷點(diǎn)設(shè)計方案。

AntD() 在全局響應(yīng)度方面是目前市場上數(shù)一數(shù)二的，大家可以去官網(wǎng)體驗(yàn)一下 Ant 是如何實(shí)現(xiàn) media 和 完美響應(yīng)的。

回到正題，組件響應(yīng)式和頁面響應(yīng)式本質(zhì)上是一樣的，都是元素跟隨父元素做出的自適應(yīng)變化。區(qū)別在于組件的父元素可以是群組，也可以是頁面。

讓組件具有響應(yīng)性非常重要，就拿上篇文章中的產(chǎn)品卡片為例，如果我們不對其進(jìn)行任何適配，它在調(diào)整大小時會是這樣的：

圖像和間距被扭曲，整個組件被毀壞，效果非常令人失望。

但如果我們調(diào)整這些組件，一切都會變得非常自然和順利：

在 中，實(shí)現(xiàn)動態(tài)響應(yīng)效果的函數(shù)為（以下統(tǒng)一譯為彈性布局）

關(guān)于彈性布局

所謂彈性布局，就是讓元素自適應(yīng)父組或畫板尺寸的變化，對應(yīng)右側(cè)面板的功能，包括 Pin to Edge、Fix Size 和 （預(yù)覽）。（請忽略中文版截圖翻譯的不好。）

不過需要注意的是，彈性布局需要引用來實(shí)現(xiàn)大小和位置的控制，所以只有當(dāng)元素有父級關(guān)系時才會出現(xiàn)彈性布局面板，這里的父級包括group和，如果元素沒有任何父級關(guān)系包裹，只在一個頁面中，則不會出現(xiàn)彈性布局功能。

以產(chǎn)品卡片為例，起初這張卡片是存在于一個畫板中的，也就是說它是作為子級存在于父畫板之下的，所以就會出現(xiàn)彈性布局的功能。

但是當(dāng)我們移除畫板，讓它獨(dú)立存在于頁面上時，你會發(fā)現(xiàn)彈性布局功能消失了。這是因?yàn)楫a(chǎn)品卡片現(xiàn)在缺少父級關(guān)系，無法使用引用來控制其大小和位置。

但是當(dāng)我們對它們進(jìn)行分組時，彈性布局又會出現(xiàn)，因?yàn)楫a(chǎn)品卡又有了父關(guān)系，不過這次父級從畫板變成了組。

固定邊緣

Pin to Edge，即將元素內(nèi)部間距固定于邊緣。

無論我怎么伸展，我都一動不動。

以商品標(biāo)簽為例，當(dāng)邊緣沒有固定好的時候，拉伸會直接破壞組件內(nèi)的間距，這顯然不是我們想要的。

我們希望內(nèi)容和左邊緣周圍的填充保持不變，我們該怎么做呢？

很簡單，只需要進(jìn)入源組件頁面，將內(nèi)容固定到右側(cè)彈性布局面板的左邊緣即可。

回到標(biāo)簽組件，你會發(fā)現(xiàn)無論我們?nèi)绾卫焖?，?nèi)容始終固定在左邊緣。

關(guān)于固定尺寸

固定大小是指元素本身的大小是固定的。

以產(chǎn)品圖片為例，如果沒有固定尺寸，拉伸后就會變形。

我們希望產(chǎn)品圖片尺寸不隨著群組或者畫板尺寸而改變，所以我們選擇固定圖片的寬度和高度。

無論我們?nèi)绾芜M(jìn)行分組，1982 年拉菲的尺寸始終保持不變。

關(guān)于預(yù)覽

選中某個屬性之后，我們可以在右側(cè)窗口實(shí)時預(yù)覽效果，幫助我們判斷是否是我們想要的。注意，點(diǎn)擊之后預(yù)覽動畫只會播放一次，如果想再次觀看效果，需要將鼠標(biāo)懸停在預(yù)覽窗口上~

但在很多組件中，固定邊和固定尺寸經(jīng)常會一起使用，而且使用次數(shù)比較多，下面我們通過一些實(shí)際應(yīng)用來鞏固一下。

實(shí)踐課程

仍然使用我們的產(chǎn)品卡片，我們的目標(biāo)是讓卡片中的所有元素適應(yīng)任何尺寸，包括不同的寬度和高度。

第一步，確定參照物。

我們確定整個商品卡片組件為響應(yīng)式引用，所有后續(xù)子元素都必須隨著其尺寸變化而變化。

第二步，確定應(yīng)對策略。

這一步我們確定卡片中所有元素的位置關(guān)系和尺寸規(guī)則。

首先我們需要商品標(biāo)題、商品價格和標(biāo)簽下方和左側(cè)保持固定的，同時保持它們的尺寸固定（從左到右的自適應(yīng)規(guī)則已經(jīng)提前建立好）所以我們固定左下角的和寬高。

由于標(biāo)簽是嵌套在產(chǎn)品卡組件中的，所以我們需要在標(biāo)簽組件內(nèi)部做彈性布局，固定左邊緣和寬高即可。

我們希望保持產(chǎn)品圖片的尺寸不變，所以我們固定了它的寬度和高度。產(chǎn)品圖片背景需要在四個方向上保持一致的間距，所以我們固定了頂部、底部、左側(cè)和右側(cè)邊緣。

最后，這里是對靈活布局的概述。

第三步，響應(yīng)效果測試。

現(xiàn)在到了令人興奮的測試部分！嗯，它看起來很完美。它可以輕松容納任何尺寸。

當(dāng)然，如果這一步的效果不如預(yù)期，我們就需要回頭檢查各個元素的彈性布局到底是哪里出了問題，比如文字的對齊方式，父子關(guān)系等等，反復(fù)debug。

彈性布局的嵌套

布局靈活，可以嵌套。

比如我對A使用了彈性布局，那么A的父級B也可以使用彈性布局。通過層層嵌套，就可以處理那些復(fù)雜頁面的響應(yīng)性。但是嵌套的調(diào)試和適配比較麻煩，而且很容易忽略某個環(huán)節(jié)。

這里我借鑒了101三位大師使用的方法，將有父子關(guān)系的元素逐層分解，并在每一層制定靈活的布局規(guī)則。

比如這個頁面包含很多層級，如果草草地做彈性布局會很麻煩，不合邏輯的做法也是低效的，正確的做法是逐步拆開，然后再一層層展開。

為了方便閱讀和理解，下面將各層的章節(jié)和元素抽象成骨架圖。

第一層靈活布局

首先從整個布局的角度，我們確定整個畫板作為響應(yīng)式參考，內(nèi)容區(qū)域需要保持恒定的安全邊距。所以我們直接在四個方向固定內(nèi)容區(qū)域的邊緣。

第二層靈活布局

接下來我們拆解一下內(nèi)容區(qū)域，現(xiàn)在我們的彈性布局對象就變成了拆開的四個部分，參照物依然是整個畫板。我們希望搜索框的高度和頂部間距保持不變，所以我們固定了高度和頂部邊緣。商品部分的寬度和高度可以自由變化，所以只固定了頂部邊緣。

第三層靈活布局

最后我們把每個版塊再拆開，大部分都拆成了最小的顆粒，這時候彈性布局的子對象就變成了這些更細(xì)分的元素，比如隱藏提示、圖標(biāo)、大標(biāo)題、折扣標(biāo)簽等，響應(yīng)引用就變成了元素依附的父級，比如搜索框就是隱藏提示和圖標(biāo)元素的父級sketch控件庫，搜索框則是文本、按鈕和圖片的父級。最終的布局規(guī)則如下，具體邏輯就不贅述了~

基于這個拆解步驟，我們就可以清晰的在每一層進(jìn)行分層彈性布局了~

我們看一下骨架圖的響應(yīng)效果，沒有任何問題。

我們來看看界面的響應(yīng)效果吧~

終于

組件庫搭建系列就到此結(jié)束了。從組件搭建，到組件的動態(tài)適配，再到組件的動態(tài)響應(yīng)，這三個環(huán)節(jié)缺一不可。不過很多東西我還在摸索中，所以文章不可能面面俱到。如果以后大家有什么問題或者建議sketch控件庫，歡迎留言。

希望本文對您有所幫助。

如有侵權(quán)請聯(lián)系刪除！