1. 項(xiàng)目概述從“亂跑”的UI說(shuō)起做Unity UI開(kāi)發(fā)尤其是涉及到動(dòng)態(tài)列表、自適應(yīng)布局的時(shí)候最讓人頭疼的莫過(guò)于“控件亂跑”。你精心設(shè)計(jì)的按鈕在運(yùn)行時(shí)莫名其妙地?cái)D成一團(tuán)或者間距忽大忽小又或者父級(jí)容器大小一變子物體就“放飛自我”了。這種體驗(yàn)相信每個(gè)Unity開(kāi)發(fā)者都經(jīng)歷過(guò)。問(wèn)題的根源往往不在于代碼邏輯而在于對(duì)UI布局核心組件——LayoutGroup的理解不夠透徹。LayoutGroup是Unity UGUI布局系統(tǒng)的基石它負(fù)責(zé)自動(dòng)排列其子物體。但真正決定排列“行為”的是它下面三個(gè)看似簡(jiǎn)單的復(fù)選框Control Child Size、Child Scale Factor和Child Force Expand。很多開(kāi)發(fā)者包括一些有經(jīng)驗(yàn)的同行對(duì)這三個(gè)選項(xiàng)的理解都停留在“試一下看看效果”的層面知其然不知其所以然。這就導(dǎo)致了在復(fù)雜UI需求面前只能靠反復(fù)調(diào)整參數(shù)、打補(bǔ)丁的方式來(lái)勉強(qiáng)實(shí)現(xiàn)效果代碼難以維護(hù)效率低下。本文的目的就是徹底拆解這三個(gè)選項(xiàng)背后的布局邏輯。我不會(huì)僅僅告訴你每個(gè)選項(xiàng)是干什么的而是會(huì)結(jié)合引擎底層的計(jì)算原理通過(guò)大量對(duì)比實(shí)驗(yàn)讓你明白在何種場(chǎng)景下應(yīng)該勾選哪個(gè)以及它們之間組合會(huì)產(chǎn)生什么化學(xué)反應(yīng)。最終你將能像搭積木一樣精準(zhǔn)地控制UI元素的排列告別“玄學(xué)調(diào)參”實(shí)現(xiàn)穩(wěn)定、可預(yù)期的布局效果。無(wú)論你是剛接觸Unity UI的新手還是被布局問(wèn)題困擾已久的老手這篇指南都將為你提供一套清晰的“避坑”地圖和實(shí)戰(zhàn)工具箱。2. LayoutGroup核心三劍客原理深度拆解在深入每個(gè)選項(xiàng)之前我們必須建立一個(gè)核心認(rèn)知LayoutGroup的布局過(guò)程是一個(gè)兩階段計(jì)算。第一階段它根據(jù)子物體的“理想”大小由ILayoutElement組件如LayoutElement、Text、Image等提供和自身的布局約束如Content Size Fitter來(lái)計(jì)算布局空間。第二階段它在這個(gè)布局空間內(nèi)根據(jù)我們勾選的這三個(gè)選項(xiàng)決定最終如何分配空間給每個(gè)子物體。理解了這個(gè)兩階段模型就理解了所有混亂的根源。2.1 Control Child Size誰(shuí)說(shuō)了算這個(gè)選項(xiàng)的名字直譯為“控制子物體尺寸”但它控制的是哪個(gè)維度答案是它控制的是與當(dāng)前LayoutGroup排列方向平行的那個(gè)維度。對(duì)于Horizontal Layout Group水平布局組Control Child Size控制的是寬度Width。對(duì)于Vertical Layout Group垂直布局組Control Child Size控制的是高度Height。對(duì)于Grid Layout Group網(wǎng)格布局組它同時(shí)控制寬度和高度因?yàn)榫W(wǎng)格有固定的Cell Size。它的工作原理是什么當(dāng)勾選Control Child Size后LayoutGroup會(huì)在布局的第二階段強(qiáng)制覆蓋子物體在該維度上的preferredWidth/Height首選尺寸。LayoutGroup會(huì)根據(jù)自己的計(jì)算邏輯考慮間距、邊距、Expand等為每個(gè)子物體分配一個(gè)“強(qiáng)制”的尺寸并直接設(shè)置到子物體的RectTransform上。此時(shí)子物體自身的LayoutElement組件設(shè)置的Preferred Width/Height將完全失效。什么情況下應(yīng)該勾選當(dāng)你希望子物體的大小嚴(yán)格由布局組來(lái)統(tǒng)一管理和分配而不是由子物體自身內(nèi)容決定時(shí)。典型的場(chǎng)景是制作一個(gè)等寬按鈕欄、一個(gè)高度統(tǒng)一的列表項(xiàng)或者網(wǎng)格布局中每個(gè)格子大小嚴(yán)格一致。什么情況下不應(yīng)該勾選當(dāng)子物體的大小需要根據(jù)其內(nèi)容動(dòng)態(tài)變化時(shí)。例如一個(gè)水平排列的標(biāo)簽列表每個(gè)標(biāo)簽的文本長(zhǎng)度不一你希望每個(gè)標(biāo)簽的寬度剛好包裹住文本。這時(shí)如果勾選所有標(biāo)簽會(huì)被拉成一樣的寬度造成空間浪費(fèi)或文本被壓縮。實(shí)操心得你可以把Control Child Size理解為“布局組奪權(quán)”。勾選則布局組掌權(quán)子物體失去大小自主權(quán)不勾選則子物體自治布局組只負(fù)責(zé)排列它們不改變它們的大小。決策的關(guān)鍵在于你需要的是一支“整齊劃一”的軍隊(duì)還是一群“各有特色”的個(gè)體2.2 Child Scale Factor縮放的影響因子這個(gè)選項(xiàng)的官方名稱(chēng)是“Use Child Scale”它關(guān)注的是子物體的局部縮放LocalScale是否應(yīng)該參與到布局尺寸的計(jì)算中。它的工作原理是什么布局計(jì)算的第一階段需要獲取子物體的“理想尺寸”。默認(rèn)情況下引擎使用子物體RectTransform的sizeDelta對(duì)于UI元素或Bounds對(duì)于非UI元素經(jīng)過(guò)其localScale縮放后的結(jié)果作為其布局尺寸。如果你勾選了Use Child Scale那么計(jì)算時(shí)就會(huì)乘以這個(gè)縮放系數(shù)。如果不勾選則忽略localScale直接使用原始尺寸進(jìn)行計(jì)算。這聽(tīng)起來(lái)有點(diǎn)繞我們看一個(gè)例子假設(shè)一個(gè)Image的原始尺寸是100x100它的localScale是(2, 1, 1)。如果不勾選Use Child Scale布局組認(rèn)為它寬100如果勾選布局組則認(rèn)為它寬200。為什么這個(gè)選項(xiàng)很重要因?yàn)樵赨I動(dòng)畫(huà)中我們經(jīng)常通過(guò)改變localScale來(lái)實(shí)現(xiàn)點(diǎn)擊放大、懸停效果等。如果你不勾選此選項(xiàng)但子物體被縮放布局組會(huì)“假裝”它還是原來(lái)大小去排列導(dǎo)致實(shí)際渲染的物體變大了與布局計(jì)算的空間沒(méi)變大產(chǎn)生重疊或間距錯(cuò)誤。什么情況下應(yīng)該勾選當(dāng)你的子物體會(huì)進(jìn)行非均勻縮放Scale值在X/Y軸上不同并且你希望布局能實(shí)時(shí)響應(yīng)這種縮放重新調(diào)整排列時(shí)。例如一個(gè)水平排列的卡片列表點(diǎn)擊某張卡片時(shí)它橫向放大ScaleX變大你希望旁邊的卡片能自動(dòng)讓出空間。什么情況下保持不勾選當(dāng)縮放僅用于視覺(jué)效果如整體放大縮小且你不希望布局因?yàn)橐曈X(jué)縮放而被打亂時(shí)?；蛘弋?dāng)所有子物體的縮放一致時(shí)勾不勾選影響不大因?yàn)橄鄬?duì)比例不變。注意事項(xiàng)這是一個(gè)極易被忽略但后果嚴(yán)重的選項(xiàng)。我曾在一個(gè)項(xiàng)目中發(fā)現(xiàn)列表項(xiàng)的選中動(dòng)畫(huà)Scale略微放大導(dǎo)致整個(gè)列表頻繁跳動(dòng)排查良久才發(fā)現(xiàn)是Grid Layout Group沒(méi)有勾選Use Child Scale布局計(jì)算和實(shí)際渲染尺寸脫節(jié)。如果你的UI有涉及Scale的動(dòng)畫(huà)請(qǐng)務(wù)必檢查這個(gè)設(shè)置。2.3 Child Force Expand充滿(mǎn)空間的野心這是三個(gè)選項(xiàng)中最具“侵略性”的一個(gè)。Child Force Expand的作用是在布局的第二階段當(dāng)所有子物體按照其首選尺寸排列后如果父級(jí)容器在布局方向上還有剩余空間是否強(qiáng)制每個(gè)子物體擴(kuò)張以填滿(mǎn)這些空間。它的工作原理是什么計(jì)算完所有子物體的“基礎(chǔ)尺寸”考慮Control和Scale后和間距后LayoutGroup會(huì)算出在布局方向上用了多少空間。然后用父容器的可用空間減去已用空間得到“剩余空間”。如果勾選了Child Force Expand那么這筆剩余空間將被平均分配給每一個(gè)子物體作為額外的“擴(kuò)張尺寸”。每個(gè)子物體的最終尺寸 基礎(chǔ)尺寸 (剩余空間 / 子物體數(shù)量)。關(guān)鍵點(diǎn)在于“Force”強(qiáng)制即使子物體自身的LayoutElement設(shè)置了Flexible Width/Height為0表示不想擴(kuò)張只要這里勾選了它依然會(huì)被強(qiáng)制擴(kuò)張。與Content Size Fitter的優(yōu)先級(jí)關(guān)系這是一個(gè)非常重要的實(shí)戰(zhàn)點(diǎn)。如果父容器上掛了Content Size Fitter并設(shè)置為Preferred Size那么父容器會(huì)去適應(yīng)子物體的總尺寸。此時(shí)通常不會(huì)產(chǎn)生剩余空間因此Child Force Expand的效果也就無(wú)從談起了。Content Size Fitter的優(yōu)先級(jí)高于Child Force Expand的空間分配邏輯。什么情況下應(yīng)該勾選當(dāng)你需要子物體均分父容器的寬度或高度時(shí)。經(jīng)典場(chǎng)景一個(gè)標(biāo)簽頁(yè)標(biāo)題欄無(wú)論有幾個(gè)標(biāo)簽都希望它們均勻地鋪滿(mǎn)整個(gè)標(biāo)題欄的寬度?；蛘咭粋€(gè)垂直列表在內(nèi)容較少時(shí)希望列表項(xiàng)能拉伸以填充容器避免底部留白。什么情況下不應(yīng)該勾選當(dāng)子物體需要保持其自然尺寸或者你希望剩余空間以其他方式處理比如留給某個(gè)特定的“彈性”元素或者直接留空時(shí)。例如一個(gè)工具條左邊是圖標(biāo)按鈕固定大小右邊是搜索框希望拉伸這時(shí)就不應(yīng)該在整個(gè)水平布局組上勾選Expand而是應(yīng)該通過(guò)為搜索框單獨(dú)設(shè)置Flexible Width來(lái)實(shí)現(xiàn)。避坑技巧Child Force Expand和Control Child Size經(jīng)常需要配合使用。如果你勾選了Expand希望均分空間但沒(méi)勾選Control那么子物體自身較大的Preferred Size可能會(huì)優(yōu)先被滿(mǎn)足導(dǎo)致“均分”效果不生效或很奇怪。通常ExpandControl是一對(duì)黃金組合用于實(shí)現(xiàn)嚴(yán)格的等分布局。3. 組合拳實(shí)戰(zhàn)典型場(chǎng)景與參數(shù)配置理解了單個(gè)選項(xiàng)的原理我們來(lái)看看它們?nèi)绾谓M合解決實(shí)際的UI布局問(wèn)題。下面通過(guò)幾個(gè)高頻場(chǎng)景來(lái)演示。3.1 場(chǎng)景一等寬按鈕欄如底部導(dǎo)航欄需求3個(gè)按鈕水平排列嚴(yán)格等寬并填滿(mǎn)父容器的寬度。方案使用Horizontal Layout Group。Control Child Size (Width):勾選。這是關(guān)鍵剝奪按鈕自身對(duì)寬度的控制權(quán)。Child Force Expand (Width):勾選。確保在父容器寬度內(nèi)剩余空間被平均分配給每個(gè)按鈕實(shí)現(xiàn)等寬。Use Child Scale: 通常不勾選除非按鈕有特殊的縮放動(dòng)畫(huà)。配置詳解創(chuàng)建一個(gè)空物體添加Horizontal Layout Group組件。設(shè)置好Padding內(nèi)邊距和Spacing間距比如左右各留20像素按鈕間距10像素。勾選Control Child Size下的Width和Child Force Expand下的Width。創(chuàng)建三個(gè)按鈕作為其子物體。此時(shí)無(wú)論按鈕里的文字是“確定”還是“取消并返回上一級(jí)”它們的寬度都會(huì)完全一致。父容器的寬度變化時(shí)三個(gè)按鈕的寬度會(huì)自動(dòng)同步調(diào)整始終保持等寬且填滿(mǎn)。為什么這樣可行布局組先根據(jù)Control和Expand計(jì)算出每個(gè)按鈕應(yīng)該分得的寬度然后強(qiáng)制設(shè)置給每個(gè)按鈕的RectTransform。按鈕自身的LayoutElement或Text的Preferred Width被完全忽略。3.2 場(chǎng)景二自適應(yīng)高度的垂直列表項(xiàng)需求一個(gè)聊天消息列表每條消息是一個(gè)預(yù)制體。消息氣泡的高度需要根據(jù)文本內(nèi)容自適應(yīng)同時(shí)所有消息在容器中垂直排列。方案使用Vertical Layout Group。Control Child Size (Height):不勾選。必須讓消息氣泡的高度由內(nèi)部的Text組件決定。Child Force Expand (Height):不勾選。我們不希望消息在容器里被強(qiáng)制拉伸變高。Use Child Scale: 不勾選。配置詳解列表容器添加Vertical Layout Group和Content Size Fitter。Vertical Layout Group的Control Child Size的Height一定不能勾選。Child Force Expand的Height也不勾選。Content Size Fitter的Vertical Fit設(shè)置為Preferred Size這樣容器的高度會(huì)自動(dòng)適應(yīng)所有子項(xiàng)的總高度。每個(gè)消息預(yù)制體的根節(jié)點(diǎn)需要添加Layout Element組件可以不設(shè)置具體值或者將Preferred Height設(shè)為-1自動(dòng)。預(yù)制體內(nèi)部應(yīng)有Text組件和背景ImageText的Best Fit或Content Size Fitter可以確保文本區(qū)域自適應(yīng)。這樣每添加一條新消息容器會(huì)自動(dòng)變高新消息被添加在底部每條消息的高度都恰好包裹內(nèi)容。核心要點(diǎn)在這個(gè)場(chǎng)景中布局組只做了一件事——垂直排列。它沒(méi)有也不能去控制子項(xiàng)的高度高度的決定權(quán)完全下放給了子項(xiàng)自身的內(nèi)容。3.3 場(chǎng)景三帶縮放動(dòng)畫(huà)的網(wǎng)格相冊(cè)需求一個(gè)圖片網(wǎng)格如3x3點(diǎn)擊某張圖片時(shí)該圖片輕微放大Scale變大并且周?chē)膱D片要自動(dòng)調(diào)整位置避免重疊。方案使用Grid Layout Group。Control Child Size:勾選Grid Layout Group默認(rèn)勾選且不可取消因?yàn)樗仨毧刂艭ell Size。Child Force Expand: 通常不勾選我們希望網(wǎng)格保持固定的單元格大小。Use Child Scale:必須勾選這是實(shí)現(xiàn)動(dòng)畫(huà)不影響布局的關(guān)鍵。配置詳解創(chuàng)建網(wǎng)格容器添加Grid Layout Group設(shè)置Cell Size如200x200和Spacing。確保Use Child Scale被勾選。為每個(gè)圖片子物體編寫(xiě)點(diǎn)擊動(dòng)畫(huà)腳本在動(dòng)畫(huà)中修改其transform.localScale例如從1放大到1.2。由于勾選了Use Child Scale當(dāng)某個(gè)圖片的Scale變大時(shí)Grid Layout Group在下一幀布局計(jì)算中會(huì)感知到這個(gè)圖片的“占用空間”變大了200 * 1.2 240。它會(huì)重新計(jì)算所有單元格的位置為這個(gè)變大的圖片騰出更多空間周?chē)膱D片位置會(huì)自動(dòng)調(diào)整從而避免重疊。如果沒(méi)勾選Use Child Scale會(huì)怎樣布局組會(huì)一直認(rèn)為每個(gè)圖片只占200x200的空間盡管它視覺(jué)上已經(jīng)放大到240x240結(jié)果就是放大的圖片會(huì)與相鄰圖片發(fā)生視覺(jué)上的重疊布局徹底混亂。3.4 場(chǎng)景四混合布局固定邊欄彈性?xún)?nèi)容區(qū)需求一個(gè)經(jīng)典的左右結(jié)構(gòu)左側(cè)是固定寬度的導(dǎo)航欄右側(cè)是占據(jù)剩余所有寬度的內(nèi)容區(qū)。方案這需要兩個(gè)Layout Group配合或者使用Layout Element的靈活寬度。方法A使用兩個(gè)布局組最外層是一個(gè)Horizontal Layout GroupControl Child Size和Child Force Expand都不勾選。創(chuàng)建兩個(gè)子物體Sidebar和Content。為Sidebar物體添加Layout Element組件將其Preferred Width設(shè)置為固定值比如200。為Content物體添加Layout Element組件將其Flexible Width設(shè)置為一個(gè)大于0的值比如1。這意味著它愿意填充剩余空間。外層的Horizontal Layout Group會(huì)看到Sidebar希望200寬Content希望填充剩余空間。于是它分配200給Sidebar把所有剩余寬度給Content。方法B使用一個(gè)布局組Expand最外層Horizontal Layout GroupControl Child Size (Width)勾選Child Force Expand (Width)也勾選。兩個(gè)子物體Sidebar和Content。為Sidebar添加Layout Element設(shè)置Preferred Width為200但關(guān)鍵是將其Flexible Width設(shè)置為0。為Content添加Layout Element將其Flexible Width設(shè)置為1或任何正數(shù)。布局組計(jì)算勾選了Control和Expand它會(huì)嘗試給兩個(gè)子物體分配相同的“擴(kuò)張權(quán)重”。但由于Sidebar的Flexible Width0它拒絕了額外的擴(kuò)張空間最終只獲得其Preferred Width200。而Content的Flexible Width1它接受了所有剩余的擴(kuò)張空間從而實(shí)現(xiàn)了彈性填充。兩種方法對(duì)比方法A更直觀邏輯清晰。方法B利用了Flexible Width對(duì)Child Force Expand的抵抗稍微繞一點(diǎn)但也是完全有效的方案。理解這兩種方法你對(duì)布局優(yōu)先級(jí)的掌握就更深了一層。4. 高級(jí)技巧與性能考量掌握了基礎(chǔ)組合我們來(lái)看看一些能提升效率和穩(wěn)定性的高級(jí)技巧。4.1 嵌套布局組的優(yōu)先級(jí)與沖突解決復(fù)雜的UI往往是多層LayoutGroup嵌套的結(jié)果。例如一個(gè)水平排列的卡牌每張卡牌內(nèi)部又是垂直排列的文字和圖標(biāo)。理解嵌套時(shí)的計(jì)算順序至關(guān)重要。計(jì)算順序是“由外向內(nèi)”還是“由內(nèi)向外”答案是由內(nèi)向外。Unity UI的布局重建Canvas.BuildBatch過(guò)程會(huì)先從葉子節(jié)點(diǎn)最內(nèi)層的布局元素開(kāi)始計(jì)算其Preferred和Flexible尺寸然后將結(jié)果傳遞給父級(jí)父級(jí)再基于子級(jí)的信息進(jìn)行自己的布局計(jì)算依次向上傳遞。這意味著什么內(nèi)層布局組擁有“首倡權(quán)”內(nèi)層LayoutGroup計(jì)算出的尺寸是外層LayoutGroup計(jì)算的輸入。如果內(nèi)層LayoutGroup通過(guò)Control Child Size強(qiáng)制了尺寸外層LayoutGroup必須尊重這個(gè)結(jié)果除非外層也Control但控制的是不同方向。沖突的典型場(chǎng)景一個(gè)垂直布局組父包含一個(gè)水平布局組子。父垂直組勾選了Control Child Size (Height)想控制子水平組的高度。但子水平組內(nèi)部可能因?yàn)閮?nèi)容太多計(jì)算出一個(gè)很大的Preferred Height。此時(shí)父垂直組的Control會(huì)強(qiáng)制一個(gè)高度可能導(dǎo)致子水平組的內(nèi)容被裁剪。你需要判斷在這個(gè)場(chǎng)景下到底應(yīng)該由誰(shuí)來(lái)決定高度。解決沖突的原則明確每一層布局組的職責(zé)。通常外層負(fù)責(zé)宏觀排列和容器尺寸內(nèi)層負(fù)責(zé)微觀排列和內(nèi)容尺寸。盡量避免內(nèi)外層對(duì)同一個(gè)維度都進(jìn)行“強(qiáng)制控制”Control。4.2 Layout Element的精準(zhǔn)調(diào)控Layout Element組件是你與LayoutGroup溝通的“協(xié)議”。它允許你覆蓋或提供子物體的布局參數(shù)。Min Width/Height最小尺寸。布局組分配的空間不會(huì)小于此值。Preferred Width/Height首選尺寸。布局組會(huì)優(yōu)先嘗試滿(mǎn)足這個(gè)尺寸。Flexible Width/Height彈性尺寸。當(dāng)有剩余空間時(shí)此值越大分到的額外空間比例越高。設(shè)置為0表示拒絕擴(kuò)張。如何用Layout Element對(duì)抗Child Force Expand如前文場(chǎng)景四所示如果你不希望某個(gè)子物體被強(qiáng)制擴(kuò)張即使父布局組勾選了Expand你也可以通過(guò)在該子物體上設(shè)置Layout Element并將其Flexible Width/Height設(shè)為0來(lái)實(shí)現(xiàn)。Flexible0的優(yōu)先級(jí)高于父級(jí)的Force Expand。動(dòng)態(tài)修改Layout Element你可以在運(yùn)行時(shí)通過(guò)代碼修改LayoutElement的preferredWidth等屬性然后調(diào)用LayoutRebuilder.ForceRebuildLayoutImmediate(rectTransform)來(lái)立即觸發(fā)布局重建。這是實(shí)現(xiàn)動(dòng)態(tài)UI如可拖拽改變大小的面板的關(guān)鍵。4.3 性能優(yōu)化避免頻繁的布局重建LayoutGroup的自動(dòng)布局雖然方便但計(jì)算有成本。頻繁改變布局屬性或子物體狀態(tài)會(huì)導(dǎo)致連續(xù)的Canvas.SendWillRenderCanvases和布局重建在移動(dòng)設(shè)備或復(fù)雜UI上可能引起卡頓。常見(jiàn)性能陷阱在循環(huán)中逐幀修改UI屬性例如每幀更新一個(gè)計(jì)數(shù)器的文本。文本長(zhǎng)度變化會(huì)觸發(fā)其Preferred Width改變進(jìn)而可能觸發(fā)父布局組重建。激活/禁用大量帶布局的子物體每次激活/禁用都會(huì)觸發(fā)所在父布局組的完整重建。嵌套過(guò)深一個(gè)10層的嵌套布局最底層一個(gè)文本變化會(huì)觸發(fā)上面9層依次重建。優(yōu)化策略節(jié)流更新對(duì)于頻繁變化的數(shù)據(jù)不要每幀直接更新UI。使用協(xié)程或InvokeRepeating以較低頻率如0.1秒一次批量更新。分離動(dòng)態(tài)與靜態(tài)部分將頻繁變化的部分放在獨(dú)立的Canvas或嵌套層級(jí)較淺的位置。例如一個(gè)復(fù)雜的列表項(xiàng)可以將頻繁變化的文本單獨(dú)放在一個(gè)子物體里這個(gè)子物體的布局變化不會(huì)影響到列表項(xiàng)其他靜態(tài)部分的重建。謹(jǐn)慎使用Content Size FitterContent Size Fitter是“布局重建觸發(fā)器”的大戶(hù)因?yàn)樗蕾?lài)于子物體尺寸子物體一變它就得變。如果可能用固定尺寸或通過(guò)代碼計(jì)算并設(shè)置尺寸是更好的選擇。使用RectTransform. SetSizeWithCurrentAnchors對(duì)于簡(jiǎn)單的尺寸調(diào)整有時(shí)直接操作RectTransform的sizeDelta或SetSizeWithCurrentAnchors并手動(dòng)計(jì)算位置比依賴(lài)布局組更高效。Profiler是你的朋友使用Unity Profiler的UI模塊觀察Canvas.BuildBatch和Canvas.SendWillRenderCanvases的耗時(shí)定位是哪個(gè)Canvas或哪個(gè)UI元素導(dǎo)致了性能瓶頸。5. 常見(jiàn)問(wèn)題排查與調(diào)試實(shí)錄即使理解了原理實(shí)際開(kāi)發(fā)中還是會(huì)遇到各種詭異問(wèn)題。下面是我在項(xiàng)目中遇到的一些典型案例和排查思路。5.1 問(wèn)題控件大小或位置在運(yùn)行時(shí)閃爍、跳動(dòng)可能原因及排查布局計(jì)算順序沖突檢查是否有動(dòng)畫(huà)或代碼在Update或LateUpdate中修改UI尺寸/位置這與布局系統(tǒng)的自動(dòng)重建發(fā)生在Canvas.willRenderCanvases事件中順序可能沖突。嘗試將你的修改代碼放在Canvas.willRenderCanvases事件之后例如使用Coroutine并yield return new WaitForEndOfFrame()。Use Child Scale設(shè)置錯(cuò)誤如果子物體有縮放動(dòng)畫(huà)但Use Child Scale未勾選會(huì)導(dǎo)致布局計(jì)算尺寸和實(shí)際渲染尺寸不一致每幀布局都在“糾正”一個(gè)它認(rèn)為錯(cuò)誤但視覺(jué)上正確的狀態(tài)從而產(chǎn)生跳動(dòng)。請(qǐng)立即檢查這個(gè)選項(xiàng)。父級(jí)Canvas的渲染模式如果Canvas是Screen Space - Camera或World Space且相機(jī)或物體本身在移動(dòng)UI的世界坐標(biāo)變化會(huì)被反饋到布局計(jì)算中可能造成循環(huán)。確保UI的錨點(diǎn)設(shè)置正確避免依賴(lài)父級(jí)變換。5.2 問(wèn)題Child Force Expand勾選了但沒(méi)效果可能原因及排查父容器沒(méi)有額外空間最常見(jiàn)的原因。檢查父容器是否有Content Size Fitter且設(shè)置為Preferred Size。如果是父容器會(huì)收縮以適應(yīng)子物體總尺寸根本沒(méi)有剩余空間來(lái)“Expand”。你需要決定是讓父容器固定大小提供剩余空間還是去掉Content Size Fitter或者改用Min Size。子物體Flexible Width/Height為0如4.2節(jié)所述子物體上的LayoutElement如果設(shè)置了Flexible 0它會(huì)拒絕來(lái)自父級(jí)Child Force Expand的擴(kuò)張指令。檢查子物體組件。同時(shí)勾選了Control Child Size嗎如果沒(méi)勾選Control子物體可能會(huì)堅(jiān)持自己的Preferred Size導(dǎo)致Expand分配的空間無(wú)法被應(yīng)用。嘗試同時(shí)勾選Control。5.3 問(wèn)題文本被裁剪或Content Size Fitter失效可能原因及排查布局層級(jí)中存在Control Child Size沖突例如一個(gè)垂直列表項(xiàng)其父垂直布局組勾選了Control Child Size (Height)但列表項(xiàng)內(nèi)部的文本又希望通過(guò)Content Size Fitter來(lái)變高。父級(jí)的Control會(huì)強(qiáng)制一個(gè)高度可能裁剪內(nèi)部文本。需要重新規(guī)劃布局層級(jí)將高度控制權(quán)交給某一層。Preferred Size計(jì)算錯(cuò)誤Text組件的Preferred Width/Height是基于當(dāng)前文本內(nèi)容、字體、字號(hào)等計(jì)算的。如果文本在計(jì)算后才被賦值或者字體資源加載延遲可能導(dǎo)致計(jì)算不準(zhǔn)確。確保在文本內(nèi)容設(shè)置完成后再手動(dòng)調(diào)用一次LayoutRebuilder.ForceRebuildLayoutImmediate。Min/Max Size限制檢查L(zhǎng)ayoutElement或其它可能限制尺寸的組件如Aspect Ratio Fitter是否設(shè)置了不合理的Min或Max值阻止了Preferred Size的生效。5.4 調(diào)試工具與技巧編輯器實(shí)時(shí)預(yù)覽在Scene視圖將2D模式打開(kāi)并選擇Canvas。當(dāng)你修改LayoutGroup參數(shù)時(shí)可以實(shí)時(shí)看到UI布局的變化這是最直接的調(diào)試方式。RectTool手柄選中UI元素使用Unity的矩形工具RectTool查看和修改其RectTransform的藍(lán)線定義矩形和錨點(diǎn)。觀察布局計(jì)算后RectTransform的最終值是否與你預(yù)期一致。添加調(diào)試色塊給復(fù)雜的布局容器臨時(shí)添加一個(gè)帶有純色I(xiàn)mage的子物體并設(shè)置其錨點(diǎn)到拉伸這樣能清晰看到該容器的實(shí)際占用區(qū)域幫助理解空間分配。打印布局信息編寫(xiě)一個(gè)簡(jiǎn)單的調(diào)試腳本在Start或Update中打印關(guān)鍵UI元素的rectTransform.rect.width/height、preferredWidth等屬性觀察其變化過(guò)程。掌握這三個(gè)復(fù)選框本質(zhì)上是掌握了Unity UI布局系統(tǒng)的“權(quán)力分配”邏輯空間由誰(shuí)決定Control如何看待物體Scale以及如何分配剩余空間Expand。理解了這套邏輯再?gòu)?fù)雜的UI布局也不過(guò)是這些基本規(guī)則的組合與嵌套。下次當(dāng)你的UI控件又開(kāi)始“亂跑”時(shí)別急著抓狂靜下心來(lái)從這三個(gè)勾選框開(kāi)始排查你一定能找到問(wèn)題的鑰匙。