Unity 为UGUI InputField添加滑动条

前排高能提醒：这是个深坑！！！！！！！

研究过程：
一开始以为InputField添加个滑动条是一个不太难的功能，可是百度搜搜，谷歌搜搜，竟然没有一个靠谱的答案。
只有下面两个答案稍微靠谱一点：
1.把InputField作为Scroll View的子物体进行拖拽，https://blog.csdn.net/u010511043/article/details/106870079
2.使用Textmeshpro插件，TMP自带这个功能

首先TMP有一些问题（比如角标无法正常显示）等，暂时不考虑插件实现。
而上述方案一又是拖拽整个InputField，而非仅拖拽移动文字部分，也不太符合我的实现思路。

沉下心研究了一下InputField的全部API内容，竟然发现没有直接的接口。

而InputField用于展示的text则不支持ContentSizeFitter根据字符自动撑满。

仔细看了一下InputField输入大量文字时，选中文字可以进行拖拽，而他的实现方式竟然是修改显示的那个子物体Text的内容，而不是修改Text的位置。
也就是说：m_InputField.text（输入的字）和m_InputField.textComponent.text（用户实际看到的字）的文字内容是不相等的，后者仅仅有显示部分的字。

于是我先考虑是否可以调整显示这部分字的内容，先找到了m_InputField.caretPosition（光标位置），通过动态修改光标位置，再调用一下刷新渲染(m_InputField.ForceLabelUpdate();)，确实可以通过光标移动实现文字的移动，但是问题是无法实现光标上下移动仅能左右n个字符n个字符移动。如果某一行只有一个字，一下子跳10个字符的话可能会到N行以外，即便把数据和拖拽条绑定，实现效果也并不会好。

然后发现键盘的上下键可以直接上下行移动光标，接近我想要的效果，但是！Unity居然没有开放相关的api调用！除非我去修改ugui的源码，再编译打包进来，才能实现想要的效果（太麻烦了，太难了）。

于是研究回到起点，写这么多只是想告诉你们这是真的坑。

---

下面开始曲线救国，首先没看过这篇https://www.jianshu.com/p/463447cc8c73的先去做一遍熟悉一下。
这次我们在这篇基础上稍微加一些东西。不过还是从头开始讲步骤，所以上一篇不看也行～
一、首先创建一个Scroll View，把横向拖拽条删掉，其他的根据喜好自己设定

image.png

Scroll View设置要修改一下，否则子物体位置会有问题

image.png

二、在Content下创建一个InputField再把它撑满设置得很长

image.png

三、把两个子物体也撑满，防止位置有问题

image.png

四、设置InputField为多行并且回车可换行

image.png

五、最精彩的来了，给Content添加Text组建和ContentSizeFitter，并且Text的参数要和InputField用于子物体的Text参数一样。简单说就是InputField无法字适应，我们用一个看不到的Text自适应用来给Scroll View拖拽。而把InputField设置的非常长（也可以写代码根据需求动态修改）。

image.png

六、最后我们要写一个小脚本，让InputField的输入value改变时实时传到Content的Text，如下：

using UnityEngine;
using UnityEngine.UI;

public class InputFieldToContent : MonoBehaviour
{
    private static readonly string no_breaking_space = "\u00A0";

    InputField m_InputField;
    Text m_Text;
    void Start()
    {
        m_InputField = GetComponent();
        m_Text = transform.parent.GetComponent();
        m_InputField.onValueChanged.AddListener((value) =>
       {
           //替换空格编码格式
           m_InputField.text = m_InputField.text.Replace(" ", no_breaking_space);

           m_Text.text = m_InputField.text;
       });
    }
}

脚本内容太简单了就不解释了，拖到InputField上。

over～ 运行，可以拖拽InputField了

image.png

其他的优化项可以参考这篇的后半部分https://www.jianshu.com/p/463447cc8c73

没错！能想到这么搞的我就是个天才，给我点个赞吧～

链接: https://pan.baidu.com/s/10BYt64XHXoi--NNuhylKOw 提取码: 3uku