「Unity3D」TextMeshPro使用TMP_InputField实现,输入框高度自动扩展与收缩

先看实现效果:

要实现这个效果,有三个方面的问题需要解决:

第一,输入框的高度扩展,内部子元素会随着锚点,拉伸变形------要解决这个问题,需要将内部元素改变父类,然后增加父类高度,再恢复父类,这样内部元素(如图中两个按钮),就不会随着高度增加,而拉伸变形。类似代码如下:

cs 复制代码
private void ChangeInputHeight(float heightChange)
{
    // disable the effect of parent size changes on child layouts
    this.finishRecordRT.SetParent(null);
    this.recordRT      .SetParent(null);

    if (heightChange != 0.0f)
    {
        this.inputFieldRT.SetRelativeSizeY(heightChange);
        this.inputBarHeightChange += heightChange;
    }
    else 
    {
        this.inputFieldRT.SetRelativeSizeY(-this.inputBarHeightChange);
        this.inputBarHeightChange = 0.0f;
    }

    this.finishRecordRT.SetParent(this.inputBarRT);
    this.recordRT      .SetParent(this.inputBarRT);
}

第二,注册inputField.onValueChanged 去监听,输入框的文本变化,并通过inputField.textComponent.textInfo的行变化,去判断换行发生。

cs 复制代码
private void OnInputFieldValueChanged(string text)
{
    var textInfo  = this.inputField.textComponent.textInfo;
    var lineCount = textInfo.lineCount;

    if (this.inputFieldPreTextLineCount != lineCount)
    {
        this.ChangeInputHeight(this.inputFieldLineHeight * (lineCount - this.inputFieldPreTextLineCount));
        this.inputFieldPreTextLineCount = lineCount;
    }
}

这里需要记录之前的行数,即inputFieldPreTextLineCount,然后对比变化后的行数,就可以知道是否换行,以及换了几行。

第三,InputField换行后(输入换行符),无法直接触发行数变化,需要输入一个字符后才行,所以需要自行判断,键入了换行符。但删除换行符后,就会触发行数变化,这个删除逻辑就是需要的。

cs 复制代码
    if (this.inputFieldPreTextLineCount != lineCount)
    {
        this.ChangeInputHeight(this.inputFieldLineHeight * (lineCount - this.inputFieldPreTextLineCount));
        this.inputFieldPreTextLineCount = lineCount;
    }
    else
    {
        // inputField.text equal to text, not equal to inputField.textComponent.text (textInfo)
        // when adds    chars, the textInfo.characterCount equal to the text.Length
        // when removes chars, the textInfo.characterCount is more than text.Length (because adds extra space \u200B)
        if (textInfo.characterCount == text.Length && text[^1] == '\n')
        {
            this.ChangeInputHeight(this.inputFieldLineHeight);
            ++this.inputFieldPreTextLineCount;
        }
    }

这里增加的逻辑就是:当行数没变的时候,需要检测text的最后一个字符,是否是换行符------如果是,就增加高度,而删除则可以通过行数变化处理,包括一次删除多行。

为什么要加一个textInfo.characterCount == text.Length的判断?

因为,只有在输入字符的时候,才会成立------而删除字符的时候不成立,这样就会剔除,删除换行符是最后一个,但还没删除它,此时行数也没变化。

而之所以,删除字符的时候不成立------是因为,在删除字符的时候,InputField 的代码显示,会增加看不见的标识字符,即**\u200B** ------因此,inputField.textComponent.text(textInfo) 与**text(inputField.text)**的内容会不一致。

相关推荐
仙魁XAN3 小时前
Flutter 学习之旅 之 flutter 有时候部分手机【TextField】无法唤起【输入法软键盘】的一些简单整理
flutter·unity·华为手机·textfield·键盘唤不起
米芝鱼5 小时前
Unity URPShader:实现和PS一样的色相/饱和度调整参数效果(修复)
游戏·unity·游戏引擎·图形渲染·opengl·着色器
大飞pkz1 天前
【Unity】MVC的简单分享以及一个在UI中使用的例子
unity·c#·mvc·框架·ui框架·商业级ui框架
Tatalaluola1 天前
unity在编辑器模式调试音频卡顿电流声
unity·游戏引擎
DanmF--1 天前
详解UnityWebRequest类
网络·unity·c#·游戏引擎·游戏程序
大模型铲屎官1 天前
Unity C# 与 Shader 交互入门:脚本动态控制材质与视觉效果 (含 MaterialPropertyBlock 详解)(Day 38)
c语言·unity·c#·交互·游戏开发·材质·shader
暴走约伯1 天前
【虚幻5蓝图Editor Utility Widget:创建高效模型材质自动匹配和资产管理工具,从3DMax到Unreal和Unity引擎_系列第二篇】
unity·ue5·游戏引擎·虚幻·材质
一颗橘子宣布成为星球2 天前
Unity AI-使用Ollama本地大语言模型运行框架运行本地Deepseek等模型实现聊天对话(一)
人工智能·unity·语言模型·游戏引擎
一个程序员(●—●)2 天前
漫反射实现+逐像素漫反射+逐像素漫反射实现
unity·着色器