1. 項目概述為什么UI框的動態擴容如此重要在Unity UI開發中我們經常會遇到一個看似簡單卻影響深遠的細節問題一個固定寬度的文本框當里面的文字內容增加時如何讓它的高度自動、平滑地增長以完美包裹所有文本行這個需求在聊天框、物品描述、任務日志、動態生成的提示信息等場景中無處不在。新手開發者可能會直接使用Content Size Fitter組件但這常常帶來性能隱患和布局失控。而一個有經驗的開發者則會深入理解Unity UI的布局系統構建一個既高效又穩定的動態擴容方案。這個項目的核心就是在固定寬度的約束下實現UI框通常是Image作為背景的Text組件根據文本行數進行“智能”的高度自適應。它不僅僅是調用一個API更涉及到對RectTransform、Canvas渲染、布局計算以及性能邊界的綜合考量。一個優秀的動態擴容方案能確保UI在不同分辨率、不同字體、不同語言環境下都保持視覺一致性和操作流暢性是提升產品專業度的關鍵一環。2. 核心思路與方案選型告別簡單的Content Size Fitter當我們拿到“固定寬度動態高度”的需求時腦海里第一個蹦出來的可能是Unity自帶的Content Size Fitter組件。把它掛在Text的父物體上設置Vertical Fit為Preferred Size看起來就完成了。但為什么我們不推薦直接這么做呢這背后有深刻的性能與可控性原因。2.1 剖析Content Size Fitter的潛在問題Content Size Fitter屬于Unity的布局組Layout Group系統。它的工作原理是在布局計算階段通常是幀末檢測子物體的“偏好尺寸”Preferred Size然后根據設置調整自身的RectTransform尺寸。這個過程會觸發布局的“臟標記”Dirty導致局部的甚至全局的布局重建。主要問題有三點性能開銷布局重建是CPU密集型操作。如果一個UI元素頻繁更新文本如實時日志Content Size Fitter會導致每一幀都進行布局計算在低端設備或復雜UI界面中可能成為性能瓶頸。上文搜索資料中“盡可能避免布局組”的建議正是基于此。控制力弱Content Size Fitter是一個黑盒我們很難介入其計算過程。例如我們無法方便地為其增加高度補白Padding或者在高度變化時觸發自定義的動畫效果。布局耦合如果這個動態文本框處于一個復雜的布局組如Vertical Layout Group中它自身尺寸的變化會“鏈式”地導致整個布局組重新計算所有子項的位置開銷呈指數級增長。2.2 我們的方案基于Text.preferredHeight的手動計算因此更優的方案是繞過自動布局組采用手動計算并設置尺寸的方式。核心武器就是UnityEngine.UI.Text組件或TextMeshProUGUI的preferredHeight屬性。這個方案的原理是Text組件在內部會根據當前的文本內容、字體、字號、行間距以及當前矩形區域的寬度計算出一個理想的高度值這個值就是完整顯示所有文本所需的最小高度。preferredHeight正是這個計算結果的暴露接口。我們的操作流程將是確保Text組件的RectTransform寬度是固定的通過錨點或直接設置sizeDelta.x。在文本內容發生改變后例如調用textComponent.text “新內容”立即或在一幀內訪問textComponent.preferredHeight。將這個preferredHeight值加上我們需要的上下邊距Padding設置為父級背景框RectTransform的sizeDelta.y或height。可選如果需要同時調整Text組件自身的RectTransform高度使其與背景框匹配。這個方案將布局控制的主動權完全掌握在開發者手中計算時機可控性能開銷遠低于自動布局并且可以輕松集成自定義邏輯如動畫、邊距、最大高度限制等。3. 詳細實現步驟與代碼解析下面我們將從一個空白UI元素開始一步步構建這個動態擴容系統。我們將創建一個名為DynamicHeightText的組件來封裝所有邏輯。3.1 基礎UI結構搭建首先在Unity編輯器中創建UI結構創建一個Image作為背景框命名為“MessageBox”。在“MessageBox”下創建一個Text或TextMeshProUGUI組件命名為“ContentText”。設置“MessageBox”的錨點Anchors為左上角Top-Left或水平拉伸、頂部對齊Horizontally Stretch, Top。這里以左上角錨點為例便于理解坐標計算。設置其PosY為0PosX為某個值并固定其Width例如300像素。設置“ContentText”的錨點Anchors為拉伸至全父級Stretch并設置其四周的偏移Left, Right, Top, Bottom為需要的邊距值例如各10像素。這樣文本內容會始終在背景框的內邊距區域內。3.2 編寫核心控制腳本創建一個C#腳本DynamicHeightText.cs并將其掛載到“MessageBox”游戲對象上。using UnityEngine; using UnityEngine.UI; // 如果是TextMeshPro使用TMPro命名空間 [RequireComponent(typeof(RectTransform))] public class DynamicHeightText : MonoBehaviour { [Header(文本組件)] [SerializeField] private Text targetText; // 拖拽賦值 // 如果使用TextMeshPro改為 // [SerializeField] private TMPro.TextMeshProUGUI targetText; [Header(布局設置)] [SerializeField] private float verticalPadding 20f; // 上下總邊距 [SerializeField] private float minHeight 50f; // 背景框最小高度 [SerializeField] private float maxHeight 500f; // 背景框最大高度可選用于滾動視圖 private RectTransform _rectTransform; private RectTransform _textRectTransform; private void Awake() { _rectTransform GetComponentRectTransform(); if (targetText ! null) { _textRectTransform targetText.GetComponentRectTransform(); } else { Debug.LogError(DynamicHeightText: 請指定目標Text組件。, this); } } // 在Start中初始化一次確保UI狀態正確 private void Start() { RefreshHeight(); } /// summary /// 刷新背景框高度的核心方法 /// /summary public void RefreshHeight() { if (targetText null || _rectTransform null) return; // 1. 獲取Text在當前寬度下的理想高度 float preferredHeight targetText.preferredHeight; // 2. 計算背景框的新高度文本理想高度 上下邊距 float newHeight preferredHeight verticalPadding; // 3. 應用高度限制 newHeight Mathf.Clamp(newHeight, minHeight, maxHeight); // 4. 設置背景框的高度 // 注意這里假設錨點是Top-Left通過sizeDelta設置高度。 // 如果錨點是Stretch則需要調整offsetMax/offsetMin或sizeDelta。 Vector2 newSize _rectTransform.sizeDelta; newSize.y newHeight; _rectTransform.sizeDelta newSize; // 5. 可選同步調整Text組件的高度使其填滿內邊距區域 if (_textRectTransform ! null) { // 假設Text的錨點是Stretch則設置其Top和Bottom的偏移為負的邊距一半對稱 // 更通用的做法是Text的高度 新高度 - verticalPadding Vector2 textOffsetMin _textRectTransform.offsetMin; Vector2 textOffsetMax _textRectTransform.offsetMax; textOffsetMin.y verticalPadding * 0.5f; // 下邊距 textOffsetMax.y -verticalPadding * 0.5f; // 上邊距因為錨點在頂部所以是負值 _textRectTransform.offsetMin textOffsetMin; _textRectTransform.offsetMax textOffsetMax; } } /// summary /// 設置文本并自動刷新高度最常用的接口 /// /summary /// param namenewText新的文本內容/param public void SetText(string newText) { if (targetText ! null) { targetText.text newText; // 立即刷新高度 RefreshHeight(); } } }3.3 關鍵代碼邏輯深度解析preferredHeight的獲取時機必須在targetText.text被賦值之后調用。preferredHeight是一個屬性其內部會實時計算。我們在SetText方法中先賦值文本再調用RefreshHeight()邏輯順序正確。sizeDeltavsSetSizeWithCurrentAnchors我們使用sizeDelta來設置高度。sizeDelta是RectTransform相對于其錨點定義的“中心”大小的差值。當錨點不是拉伸Stretch時sizeDelta直接對應Width和Height。這種方式比SetSizeWithCurrentAnchors更靈活兼容不同的錨點預設。如果你使用的是拉伸錨點則需要計算offsetMin和offsetMax代碼會稍復雜一些。邊距Padding的處理verticalPadding是我們為背景框頂部和底部預留的空間總和。在計算新高度時直接加上。在調整子Text組件時我們通過修改其offsetMin.y和offsetMax.y來實現在父框內的上下邊距。這是一種常見的實現內邊距的方法。高度限制ClampMathf.Clamp確保了背景框高度不會無限制增長或縮小這對于集成到滾動視圖ScrollView中非常重要。當文本內容超過maxHeight時背景框停止增高此時需要配合滾動視圖的顯示。3.4 編輯器配置與測試在Unity編輯器中將“ContentText”拖拽到DynamicHeightText組件的Target Text字段。調整Vertical Padding、Min Height等參數到合適的值。你可以創建一個測試腳本在Start或通過按鈕事件調用SetText方法傳入不同長度的字符串。// 測試腳本示例 public class TestDynamicText : MonoBehaviour { public DynamicHeightText dynamicText; public string[] testMessages; private int index 0; void Start() { if (dynamicText ! null testMessages.Length 0) { dynamicText.SetText(testMessages[0]); } } // 假設此方法由UI按鈕調用 public void OnNextMessageClicked() { index (index 1) % testMessages.Length; dynamicText.SetText(testMessages[index]); } }運行游戲觀察背景框是否隨著文本行數的增加/減少而平滑地改變高度。4. 高級優化與功能擴展基礎功能實現后我們可以從性能、體驗和健壯性方面進行增強。4.1 性能優化避免每幀重建如果文本內容更新非常頻繁例如每秒多次的日志輸出即使手動計算頻繁設置RectTransform的尺寸也可能觸發不必要的Canvas重建。我們可以引入一個簡單的“臟標記”和延遲更新機制。using UnityEngine; using UnityEngine.UI; public class DynamicHeightTextOptimized : MonoBehaviour { // ... 字段聲明與Awake同上 ... private bool _isDirty false; private float _lastTextHash; // 用于簡單判斷文本是否真的改變 public void SetTextOptimized(string newText) { if (targetText null) return; int newHash newText.GetHashCode(); if (newHash ! _lastTextHash) { targetText.text newText; _lastTextHash newHash; _isDirty true; } } private void LateUpdate() { if (_isDirty) { RefreshHeight(); _isDirty false; } } }優化點解析臟標記Dirty Flag只在文本內容實際發生變化時標記需要更新避免無謂的計算。延遲到LateUpdate將高度刷新的操作集中到一幀的末尾。如果同一幀內有多次文本設置雖然不常見它們只會觸發一次最終的高度計算合并了更新操作。哈希值比較使用GetHashCode()快速判斷文本是否相同比直接字符串比較更高效。注意哈希碰撞概率極低在此場景下可接受。4.2 體驗優化添加平滑縮放動畫生硬的高度跳變會影響用戶體驗。我們可以使用UnityEngine.Coroutine或DOTween等插件來實現平滑的過渡動畫。以下是使用協程的簡單實現using System.Collections; using UnityEngine; using UnityEngine.UI; public class DynamicHeightTextWithAnimation : DynamicHeightText // 繼承自基礎類 { [Header(動畫設置)] [SerializeField] private float animationDuration 0.2f; private Coroutine _currentAnimation; public void SetTextWithAnimation(string newText) { if (targetText ! null) { targetText.text newText; float targetHeight CalculateTargetHeight(); StartHeightAnimation(targetHeight); } } private float CalculateTargetHeight() { float preferredHeight targetText.preferredHeight; return Mathf.Clamp(preferredHeight verticalPadding, minHeight, maxHeight); } private void StartHeightAnimation(float targetHeight) { if (_currentAnimation ! null) { StopCoroutine(_currentAnimation); } _currentAnimation StartCoroutine(AnimateHeightCoroutine(targetHeight)); } private IEnumerator AnimateHeightCoroutine(float targetHeight) { RectTransform rt GetComponentRectTransform(); float startHeight rt.sizeDelta.y; float elapsedTime 0f; while (elapsedTime animationDuration) { elapsedTime Time.deltaTime; float t Mathf.Clamp01(elapsedTime / animationDuration); // 使用緩動函數使動畫更自然這里使用Quadratic Out t 1f - (1f - t) * (1f - t); float currentHeight Mathf.Lerp(startHeight, targetHeight, t); Vector2 newSize rt.sizeDelta; newSize.y currentHeight; rt.sizeDelta newSize; yield return null; // 等待下一幀 } // 確保最終尺寸準確 Vector2 finalSize rt.sizeDelta; finalSize.y targetHeight; rt.sizeDelta finalSize; _currentAnimation null; } }4.3 集成到滾動視圖ScrollView這是非常常見的需求當聊天記錄或日志條目增多時整個容器需要滾動。我們的動態文本框需要成為ScrollView下Content的子物體。關鍵步驟將“MessageBox”的錨點設置為水平拉伸Stretch、頂部對齊Top。這樣它的寬度會適應Content的寬度而它的頂部位置是固定的。在DynamicHeightText腳本的RefreshHeight方法末尾需要通知父級的Content可能是一個Vertical Layout Group或自定義布局腳本其尺寸已變化以便重新排列后續的條目或更新ScrollRect的可滾動區域。通常這可以通過調用LayoutRebuilder.ForceRebuildLayoutImmediate(父級RectTransform)來實現但需謹慎使用因為它會強制重建指定矩形變換及其所有子項的布局可能帶來性能開銷。更好的做法是如果Content使用了Vertical Layout Group我們的高度變化會自動被它檢測到因為子物體尺寸變了但前提是Content Size Fitter或Layout Group的Child Controls Size屬性設置正確。更高效的自定義滾動列表通常會自己管理子項的位置。一個簡單的通知方案public void RefreshHeight() { // ... 原有的高度計算和設置代碼 ... // 通知可能的父級布局系統謹慎使用 RectTransform parentRT _rectTransform.parent as RectTransform; if (parentRT ! null) { // 方法1標記父布局為臟如果父對象有LayoutGroup LayoutGroup lg parentRT.GetComponentLayoutGroup(); if (lg ! null) { LayoutRebuilder.MarkLayoutForRebuild(parentRT); } // 方法2如果父級是ScrollRect的Content可能需要更新ScrollRect的視圖 ScrollRect scrollRect parentRT.GetComponentInParentScrollRect(); if (scrollRect ! null scrollRect.content parentRT) { // 確保Content的布局更新 Canvas.ForceUpdateCanvases(); // 這是一個比較重的操作酌情使用 // 或者如果ScrollRect有彈性或需要滾動到底部可以在這里處理 // scrollRect.verticalNormalizedPosition 0f; // 滾動到底部 } } }5. 常見問題、排查技巧與實操心得在實際項目中應用此方案你可能會遇到以下幾個典型問題5.1 問題高度計算不準確文本顯示不全或被裁剪排查步驟檢查Text組件的設置確保ContentText的Alignment不是“Overflow”相關模式。通常使用UpperLeft、UpperCenter等對齊方式。檢查Horizontal Overflow和Vertical Overflow設置對于動態高度Vertical Overflow應設置為Overflow或Truncate如果你希望限制最大行數。檢查RectTransform的錨點和軸心Text組件的錨點應設置為拉伸Stretch以填充父級的邊距區域或者至少寬度與父級關聯。如果Text的寬度是固定的preferredHeight的計算可能基于錯誤的寬度。驗證邊距計算在RefreshHeight方法中打印preferredHeight和計算后的newHeight。確認verticalPadding的值是否符合預期。有時邊距可能被計算了兩次例如在父級和子級都設置了偏移。字體與行間距不同字體、字號和行間距Line Spacing會影響preferredHeight。確保測試時使用了項目最終會用的字體資源。5.2 問題在ScrollView中新增條目后布局混亂或滾動位置不對解決方案禁用Content的自動布局對于頻繁動態添加/刪除的列表使用Vertical Layout GroupContent Size Fitter性能較差。建議使用自定義位置計算。你可以禁用Content上的Vertical Layout Group在代碼中手動計算每個DynamicHeightText的位置。批量更新后統一刷新如果需要一次性添加多條消息不要在每條消息添加后立即刷新布局。可以先將所有消息的文本設置好此時高度還未更新然后遍歷所有消息條目調用RefreshHeight()最后再根據所有條目的總高度來設置Content的高度和子項位置。這能減少布局重建次數。控制滾動位置在添加新條目到末尾時如果希望自動滾動到底部可以在所有布局更新完成后例如在Canvas.ForceUpdateCanvases()之后的一幀設置ScrollRect.verticalNormalizedPosition 0。5.3 問題使用TextMeshPro時preferredHeight行為不同注意事項TextMeshProUGUI的對應屬性是preferredHeight但它是float類型且計算方式略有不同。TMP的功能更強大支持富文本、字距調整等這些都會影響最終的高度計算。務必在賦值文本后調用TMP_Text.ForceMeshUpdate()或設置text屬性時會自動觸發來確保布局信息是最新的然后再獲取preferredHeight。// 針對TextMeshPro的RefreshHeight修改 public void RefreshHeightTMP() { if (tmpText null) return; // 確保網格和布局更新 tmpText.ForceMeshUpdate(); float preferredHeight tmpText.preferredHeight; // ... 后續高度計算與設置相同 ... }5.4 實操心得與性能要點畫布拆分正如搜索資料中強調的將頻繁變化的動態UI元素如這個聊天框放在一個獨立的子畫布Sub-Canvas上。這樣當這個文本框高度變化時只會導致這個子畫布重建而不會臟化整個UI界面的主畫布性能提升顯著。避免在Update中頻繁調用絕對不要在Update中持續調用RefreshHeight()。只在文本內容確實改變時調用。對象池如果這是一個列表中的一項如聊天記錄務必使用對象池來復用MessageBox游戲對象而不是頻繁地Instantiate和Destroy。創建和銷毀UI元素的開銷巨大且會產生內存碎片。字體紋理重建動態改變文本內容可能導致字體紋理重建如果使用了動態字體。對于更新極其頻繁的UI如實時數據儀表考慮使用靜態字體或者確保所有可能用到的字符提前被生成到字體紋理中例如通過設置Font的Character集合。通過以上從原理到實現從基礎到高級從功能到性能的全面拆解這個“UI框固定寬度動態擴容高度”的功能就不再是一個簡單的需求點而是一個體現了對Unity UI系統深度理解的綜合性解決方案。它平衡了功能、性能和可維護性是構建健壯、高效UI系統的基石之一。 Unity UI動態高度自適應：基于Text.preferredHeight的高性能實現方案
1. 項目概述為什么UI框的動態擴容如此重要在Unity UI開發中我們經常會遇到一個看似簡單卻影響深遠的細節問題一個固定寬度的文本框當里面的文字內容增加時如何讓它的高度自動、平滑地增長以完美包裹所有文本行這個需求在聊天框、物品描述、任務日志、動態生成的提示信息等場景中無處不在。新手開發者可能會直接使用Content Size Fitter組件但這常常帶來性能隱患和布局失控。而一個有經驗的開發者則會深入理解Unity UI的布局系統構建一個既高效又穩定的動態擴容方案。這個項目的核心就是在固定寬度的約束下實現UI框通常是Image作為背景的Text組件根據文本行數進行“智能”的高度自適應。它不僅僅是調用一個API更涉及到對RectTransform、Canvas渲染、布局計算以及性能邊界的綜合考量。一個優秀的動態擴容方案能確保UI在不同分辨率、不同字體、不同語言環境下都保持視覺一致性和操作流暢性是提升產品專業度的關鍵一環。2. 核心思路與方案選型告別簡單的Content Size Fitter當我們拿到“固定寬度動態高度”的需求時腦海里第一個蹦出來的可能是Unity自帶的Content Size Fitter組件。把它掛在Text的父物體上設置Vertical Fit為Preferred Size看起來就完成了。但為什么我們不推薦直接這么做呢這背后有深刻的性能與可控性原因。2.1 剖析Content Size Fitter的潛在問題Content Size Fitter屬于Unity的布局組Layout Group系統。它的工作原理是在布局計算階段通常是幀末檢測子物體的“偏好尺寸”Preferred Size然后根據設置調整自身的RectTransform尺寸。這個過程會觸發布局的“臟標記”Dirty導致局部的甚至全局的布局重建。主要問題有三點性能開銷布局重建是CPU密集型操作。如果一個UI元素頻繁更新文本如實時日志Content Size Fitter會導致每一幀都進行布局計算在低端設備或復雜UI界面中可能成為性能瓶頸。上文搜索資料中“盡可能避免布局組”的建議正是基于此。控制力弱Content Size Fitter是一個黑盒我們很難介入其計算過程。例如我們無法方便地為其增加高度補白Padding或者在高度變化時觸發自定義的動畫效果。布局耦合如果這個動態文本框處于一個復雜的布局組如Vertical Layout Group中它自身尺寸的變化會“鏈式”地導致整個布局組重新計算所有子項的位置開銷呈指數級增長。2.2 我們的方案基于Text.preferredHeight的手動計算因此更優的方案是繞過自動布局組采用手動計算并設置尺寸的方式。核心武器就是UnityEngine.UI.Text組件或TextMeshProUGUI的preferredHeight屬性。這個方案的原理是Text組件在內部會根據當前的文本內容、字體、字號、行間距以及當前矩形區域的寬度計算出一個理想的高度值這個值就是完整顯示所有文本所需的最小高度。preferredHeight正是這個計算結果的暴露接口。我們的操作流程將是確保Text組件的RectTransform寬度是固定的通過錨點或直接設置sizeDelta.x。在文本內容發生改變后例如調用textComponent.text “新內容”立即或在一幀內訪問textComponent.preferredHeight。將這個preferredHeight值加上我們需要的上下邊距Padding設置為父級背景框RectTransform的sizeDelta.y或height。可選如果需要同時調整Text組件自身的RectTransform高度使其與背景框匹配。這個方案將布局控制的主動權完全掌握在開發者手中計算時機可控性能開銷遠低于自動布局并且可以輕松集成自定義邏輯如動畫、邊距、最大高度限制等。3. 詳細實現步驟與代碼解析下面我們將從一個空白UI元素開始一步步構建這個動態擴容系統。我們將創建一個名為DynamicHeightText的組件來封裝所有邏輯。3.1 基礎UI結構搭建首先在Unity編輯器中創建UI結構創建一個Image作為背景框命名為“MessageBox”。在“MessageBox”下創建一個Text或TextMeshProUGUI組件命名為“ContentText”。設置“MessageBox”的錨點Anchors為左上角Top-Left或水平拉伸、頂部對齊Horizontally Stretch, Top。這里以左上角錨點為例便于理解坐標計算。設置其PosY為0PosX為某個值并固定其Width例如300像素。設置“ContentText”的錨點Anchors為拉伸至全父級Stretch并設置其四周的偏移Left, Right, Top, Bottom為需要的邊距值例如各10像素。這樣文本內容會始終在背景框的內邊距區域內。3.2 編寫核心控制腳本創建一個C#腳本DynamicHeightText.cs并將其掛載到“MessageBox”游戲對象上。using UnityEngine; using UnityEngine.UI; // 如果是TextMeshPro使用TMPro命名空間 [RequireComponent(typeof(RectTransform))] public class DynamicHeightText : MonoBehaviour { [Header(文本組件)] [SerializeField] private Text targetText; // 拖拽賦值 // 如果使用TextMeshPro改為 // [SerializeField] private TMPro.TextMeshProUGUI targetText; [Header(布局設置)] [SerializeField] private float verticalPadding 20f; // 上下總邊距 [SerializeField] private float minHeight 50f; // 背景框最小高度 [SerializeField] private float maxHeight 500f; // 背景框最大高度可選用于滾動視圖 private RectTransform _rectTransform; private RectTransform _textRectTransform; private void Awake() { _rectTransform GetComponentRectTransform(); if (targetText ! null) { _textRectTransform targetText.GetComponentRectTransform(); } else { Debug.LogError(DynamicHeightText: 請指定目標Text組件。, this); } } // 在Start中初始化一次確保UI狀態正確 private void Start() { RefreshHeight(); } /// summary /// 刷新背景框高度的核心方法 /// /summary public void RefreshHeight() { if (targetText null || _rectTransform null) return; // 1. 獲取Text在當前寬度下的理想高度 float preferredHeight targetText.preferredHeight; // 2. 計算背景框的新高度文本理想高度 上下邊距 float newHeight preferredHeight verticalPadding; // 3. 應用高度限制 newHeight Mathf.Clamp(newHeight, minHeight, maxHeight); // 4. 設置背景框的高度 // 注意這里假設錨點是Top-Left通過sizeDelta設置高度。 // 如果錨點是Stretch則需要調整offsetMax/offsetMin或sizeDelta。 Vector2 newSize _rectTransform.sizeDelta; newSize.y newHeight; _rectTransform.sizeDelta newSize; // 5. 可選同步調整Text組件的高度使其填滿內邊距區域 if (_textRectTransform ! null) { // 假設Text的錨點是Stretch則設置其Top和Bottom的偏移為負的邊距一半對稱 // 更通用的做法是Text的高度 新高度 - verticalPadding Vector2 textOffsetMin _textRectTransform.offsetMin; Vector2 textOffsetMax _textRectTransform.offsetMax; textOffsetMin.y verticalPadding * 0.5f; // 下邊距 textOffsetMax.y -verticalPadding * 0.5f; // 上邊距因為錨點在頂部所以是負值 _textRectTransform.offsetMin textOffsetMin; _textRectTransform.offsetMax textOffsetMax; } } /// summary /// 設置文本并自動刷新高度最常用的接口 /// /summary /// param namenewText新的文本內容/param public void SetText(string newText) { if (targetText ! null) { targetText.text newText; // 立即刷新高度 RefreshHeight(); } } }3.3 關鍵代碼邏輯深度解析preferredHeight的獲取時機必須在targetText.text被賦值之后調用。preferredHeight是一個屬性其內部會實時計算。我們在SetText方法中先賦值文本再調用RefreshHeight()邏輯順序正確。sizeDeltavsSetSizeWithCurrentAnchors我們使用sizeDelta來設置高度。sizeDelta是RectTransform相對于其錨點定義的“中心”大小的差值。當錨點不是拉伸Stretch時sizeDelta直接對應Width和Height。這種方式比SetSizeWithCurrentAnchors更靈活兼容不同的錨點預設。如果你使用的是拉伸錨點則需要計算offsetMin和offsetMax代碼會稍復雜一些。邊距Padding的處理verticalPadding是我們為背景框頂部和底部預留的空間總和。在計算新高度時直接加上。在調整子Text組件時我們通過修改其offsetMin.y和offsetMax.y來實現在父框內的上下邊距。這是一種常見的實現內邊距的方法。高度限制ClampMathf.Clamp確保了背景框高度不會無限制增長或縮小這對于集成到滾動視圖ScrollView中非常重要。當文本內容超過maxHeight時背景框停止增高此時需要配合滾動視圖的顯示。3.4 編輯器配置與測試在Unity編輯器中將“ContentText”拖拽到DynamicHeightText組件的Target Text字段。調整Vertical Padding、Min Height等參數到合適的值。你可以創建一個測試腳本在Start或通過按鈕事件調用SetText方法傳入不同長度的字符串。// 測試腳本示例 public class TestDynamicText : MonoBehaviour { public DynamicHeightText dynamicText; public string[] testMessages; private int index 0; void Start() { if (dynamicText ! null testMessages.Length 0) { dynamicText.SetText(testMessages[0]); } } // 假設此方法由UI按鈕調用 public void OnNextMessageClicked() { index (index 1) % testMessages.Length; dynamicText.SetText(testMessages[index]); } }運行游戲觀察背景框是否隨著文本行數的增加/減少而平滑地改變高度。4. 高級優化與功能擴展基礎功能實現后我們可以從性能、體驗和健壯性方面進行增強。4.1 性能優化避免每幀重建如果文本內容更新非常頻繁例如每秒多次的日志輸出即使手動計算頻繁設置RectTransform的尺寸也可能觸發不必要的Canvas重建。我們可以引入一個簡單的“臟標記”和延遲更新機制。using UnityEngine; using UnityEngine.UI; public class DynamicHeightTextOptimized : MonoBehaviour { // ... 字段聲明與Awake同上 ... private bool _isDirty false; private float _lastTextHash; // 用于簡單判斷文本是否真的改變 public void SetTextOptimized(string newText) { if (targetText null) return; int newHash newText.GetHashCode(); if (newHash ! _lastTextHash) { targetText.text newText; _lastTextHash newHash; _isDirty true; } } private void LateUpdate() { if (_isDirty) { RefreshHeight(); _isDirty false; } } }優化點解析臟標記Dirty Flag只在文本內容實際發生變化時標記需要更新避免無謂的計算。延遲到LateUpdate將高度刷新的操作集中到一幀的末尾。如果同一幀內有多次文本設置雖然不常見它們只會觸發一次最終的高度計算合并了更新操作。哈希值比較使用GetHashCode()快速判斷文本是否相同比直接字符串比較更高效。注意哈希碰撞概率極低在此場景下可接受。4.2 體驗優化添加平滑縮放動畫生硬的高度跳變會影響用戶體驗。我們可以使用UnityEngine.Coroutine或DOTween等插件來實現平滑的過渡動畫。以下是使用協程的簡單實現using System.Collections; using UnityEngine; using UnityEngine.UI; public class DynamicHeightTextWithAnimation : DynamicHeightText // 繼承自基礎類 { [Header(動畫設置)] [SerializeField] private float animationDuration 0.2f; private Coroutine _currentAnimation; public void SetTextWithAnimation(string newText) { if (targetText ! null) { targetText.text newText; float targetHeight CalculateTargetHeight(); StartHeightAnimation(targetHeight); } } private float CalculateTargetHeight() { float preferredHeight targetText.preferredHeight; return Mathf.Clamp(preferredHeight verticalPadding, minHeight, maxHeight); } private void StartHeightAnimation(float targetHeight) { if (_currentAnimation ! null) { StopCoroutine(_currentAnimation); } _currentAnimation StartCoroutine(AnimateHeightCoroutine(targetHeight)); } private IEnumerator AnimateHeightCoroutine(float targetHeight) { RectTransform rt GetComponentRectTransform(); float startHeight rt.sizeDelta.y; float elapsedTime 0f; while (elapsedTime animationDuration) { elapsedTime Time.deltaTime; float t Mathf.Clamp01(elapsedTime / animationDuration); // 使用緩動函數使動畫更自然這里使用Quadratic Out t 1f - (1f - t) * (1f - t); float currentHeight Mathf.Lerp(startHeight, targetHeight, t); Vector2 newSize rt.sizeDelta; newSize.y currentHeight; rt.sizeDelta newSize; yield return null; // 等待下一幀 } // 確保最終尺寸準確 Vector2 finalSize rt.sizeDelta; finalSize.y targetHeight; rt.sizeDelta finalSize; _currentAnimation null; } }4.3 集成到滾動視圖ScrollView這是非常常見的需求當聊天記錄或日志條目增多時整個容器需要滾動。我們的動態文本框需要成為ScrollView下Content的子物體。關鍵步驟將“MessageBox”的錨點設置為水平拉伸Stretch、頂部對齊Top。這樣它的寬度會適應Content的寬度而它的頂部位置是固定的。在DynamicHeightText腳本的RefreshHeight方法末尾需要通知父級的Content可能是一個Vertical Layout Group或自定義布局腳本其尺寸已變化以便重新排列后續的條目或更新ScrollRect的可滾動區域。通常這可以通過調用LayoutRebuilder.ForceRebuildLayoutImmediate(父級RectTransform)來實現但需謹慎使用因為它會強制重建指定矩形變換及其所有子項的布局可能帶來性能開銷。更好的做法是如果Content使用了Vertical Layout Group我們的高度變化會自動被它檢測到因為子物體尺寸變了但前提是Content Size Fitter或Layout Group的Child Controls Size屬性設置正確。更高效的自定義滾動列表通常會自己管理子項的位置。一個簡單的通知方案public void RefreshHeight() { // ... 原有的高度計算和設置代碼 ... // 通知可能的父級布局系統謹慎使用 RectTransform parentRT _rectTransform.parent as RectTransform; if (parentRT ! null) { // 方法1標記父布局為臟如果父對象有LayoutGroup LayoutGroup lg parentRT.GetComponentLayoutGroup(); if (lg ! null) { LayoutRebuilder.MarkLayoutForRebuild(parentRT); } // 方法2如果父級是ScrollRect的Content可能需要更新ScrollRect的視圖 ScrollRect scrollRect parentRT.GetComponentInParentScrollRect(); if (scrollRect ! null scrollRect.content parentRT) { // 確保Content的布局更新 Canvas.ForceUpdateCanvases(); // 這是一個比較重的操作酌情使用 // 或者如果ScrollRect有彈性或需要滾動到底部可以在這里處理 // scrollRect.verticalNormalizedPosition 0f; // 滾動到底部 } } }5. 常見問題、排查技巧與實操心得在實際項目中應用此方案你可能會遇到以下幾個典型問題5.1 問題高度計算不準確文本顯示不全或被裁剪排查步驟檢查Text組件的設置確保ContentText的Alignment不是“Overflow”相關模式。通常使用UpperLeft、UpperCenter等對齊方式。檢查Horizontal Overflow和Vertical Overflow設置對于動態高度Vertical Overflow應設置為Overflow或Truncate如果你希望限制最大行數。檢查RectTransform的錨點和軸心Text組件的錨點應設置為拉伸Stretch以填充父級的邊距區域或者至少寬度與父級關聯。如果Text的寬度是固定的preferredHeight的計算可能基于錯誤的寬度。驗證邊距計算在RefreshHeight方法中打印preferredHeight和計算后的newHeight。確認verticalPadding的值是否符合預期。有時邊距可能被計算了兩次例如在父級和子級都設置了偏移。字體與行間距不同字體、字號和行間距Line Spacing會影響preferredHeight。確保測試時使用了項目最終會用的字體資源。5.2 問題在ScrollView中新增條目后布局混亂或滾動位置不對解決方案禁用Content的自動布局對于頻繁動態添加/刪除的列表使用Vertical Layout GroupContent Size Fitter性能較差。建議使用自定義位置計算。你可以禁用Content上的Vertical Layout Group在代碼中手動計算每個DynamicHeightText的位置。批量更新后統一刷新如果需要一次性添加多條消息不要在每條消息添加后立即刷新布局。可以先將所有消息的文本設置好此時高度還未更新然后遍歷所有消息條目調用RefreshHeight()最后再根據所有條目的總高度來設置Content的高度和子項位置。這能減少布局重建次數。控制滾動位置在添加新條目到末尾時如果希望自動滾動到底部可以在所有布局更新完成后例如在Canvas.ForceUpdateCanvases()之后的一幀設置ScrollRect.verticalNormalizedPosition 0。5.3 問題使用TextMeshPro時preferredHeight行為不同注意事項TextMeshProUGUI的對應屬性是preferredHeight但它是float類型且計算方式略有不同。TMP的功能更強大支持富文本、字距調整等這些都會影響最終的高度計算。務必在賦值文本后調用TMP_Text.ForceMeshUpdate()或設置text屬性時會自動觸發來確保布局信息是最新的然后再獲取preferredHeight。// 針對TextMeshPro的RefreshHeight修改 public void RefreshHeightTMP() { if (tmpText null) return; // 確保網格和布局更新 tmpText.ForceMeshUpdate(); float preferredHeight tmpText.preferredHeight; // ... 后續高度計算與設置相同 ... }5.4 實操心得與性能要點畫布拆分正如搜索資料中強調的將頻繁變化的動態UI元素如這個聊天框放在一個獨立的子畫布Sub-Canvas上。這樣當這個文本框高度變化時只會導致這個子畫布重建而不會臟化整個UI界面的主畫布性能提升顯著。避免在Update中頻繁調用絕對不要在Update中持續調用RefreshHeight()。只在文本內容確實改變時調用。對象池如果這是一個列表中的一項如聊天記錄務必使用對象池來復用MessageBox游戲對象而不是頻繁地Instantiate和Destroy。創建和銷毀UI元素的開銷巨大且會產生內存碎片。字體紋理重建動態改變文本內容可能導致字體紋理重建如果使用了動態字體。對于更新極其頻繁的UI如實時數據儀表考慮使用靜態字體或者確保所有可能用到的字符提前被生成到字體紋理中例如通過設置Font的Character集合。通過以上從原理到實現從基礎到高級從功能到性能的全面拆解這個“UI框固定寬度動態擴容高度”的功能就不再是一個簡單的需求點而是一個體現了對Unity UI系統深度理解的綜合性解決方案。它平衡了功能、性能和可維護性是構建健壯、高效UI系統的基石之一。