Unity功能篇：文本框随文字内容动态调整

瑞瑞小安2026-04-18 8:53

一、通常的UI层级

二、给Text添加组件

选中TextMeshProUGUI，添加组件：

1、Content Size Fitter

Horizontal Fit：Preferred Size

Vertical Fit：Preferred Size（通常只需要高度自适应）

2、Layout Element

PreferredWidth

勾选PreferredHeight（通常只需要高度自适应）

3、TextMeshProUGUI 设置

TextMeshProUGUI 锚点设置

image跟text的Pivot的y都设置为1。

三、脚本添加

Image 挂载脚本TextBackgroundAutoSize.cs，把 Text 拖进 textTmp 字段，调整 Padding 数值，控制文字和边框的间距。

cs 复制代码

using UnityEngine;
using TMPro;

public class TextBackgroundAutoSize : MonoBehaviour
{
    [Header("文字")]
    public TextMeshProUGUI textTmp;

    [Header("边距")]
    public float paddingLeft = 20;
    public float paddingRight = 20;
    public float paddingTop = 20;
    public float paddingBottom = 20;

    private RectTransform bgRect;

    void Awake()
    {
        bgRect = GetComponent<RectTransform>();
    }

    void Update()
    {
        AutoResizeBackground();
    }

    void AutoResizeBackground()
    {
        if (!textTmp) return;

        // 强制刷新文本计算
        textTmp.ForceMeshUpdate();

        // 获取文本实际大小
        Vector2 textSize = textTmp.GetRenderedValues(false);

        // 背景大小 = 文本大小 + 内边距
        bgRect.sizeDelta = new Vector2(textSize.x + paddingLeft + paddingRight,textSize.y + paddingTop + paddingBottom);
    }
}