Unity UGUI实现可编辑下拉框（dropdown）

输入框与下拉框无缝衔接

最新推荐文章于 2025-07-16 17:03:44 发布

LemonXQ

最新推荐文章于 2025-07-16 17:03:44 发布

阅读量6.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Unity 文章标签： unity UGUI 可编辑下拉框 dropdown

本文链接：https://blog.youkuaiyun.com/LemonXQ/article/details/78810248

Unity 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在Unity中实现输入框与下拉框无缝衔接的方法，通过监听两者值的变化，确保用户交互流畅且视觉效果良好。当下拉框选中时，输入框自动清空并变透明；当输入框有文本输入时，下拉框自动选择默认项并变透明。

效果展示

难点

　　处理输入框和下拉框的优先级显示问题，做到二者无缝衔接。当下拉框选中某一项时，输入框内容清空且变透明；当输入框有文本输入时，下拉框选中默认项（空白项）且变透明

实现

dropdown上添加一个Input Field组件，调整长度使其不覆盖下拉箭头
代码中监听dropdown和Input Field的ValueChanged事件，这里用0和1区分是dropdown还是Input Field引起的函数调用，代码如下：

public void Start()
{
    // 设置下拉框和输入框的值变化监听
    cityDropdown.onValueChanged.AddListener(delegate { OnCityValueChanged(0); });
    cityInput.onValueChanged.AddListener(delegate {OnCityValueChanged(1);});
}

// 事件处理函数
void OnCityValueChanged(int type)
{
    switch (type)
    {
        case 0:// 下拉框
            // 获取选中项的值
            pressCity = cityDropdown.options[cityDropdown.value].text;
            // 只处理不等于0的情况，即下拉框选中的不是默认值
            if (cityDropdown.value != 0)
            {
                // 清空输入框的值
                cityInput.text = "";
                // 下拉框不透明
                cityDropdown.GetComponent<Image>().color = new Color(1, 1, 1, 1);
                // 输入框透明，防止遮挡
                cityInput.GetComponent<Image>().color = new Color(1, 1, 1, 0);
            }
            break;

        case 1:// 输入框
            // 获取输入框的值
            pressCity = cityInput.text;
            // 只处理输入框文本不为空的情况
            if (cityInput.text != "")
            {
                // 下拉框选中默认值（空白）
                cityDropdown.value = 0;
                // 下拉框透明    
                cityDropdown.GetComponent<Image>().color = new Color(1, 1, 1, 0);
                // 输入框不透明，使输入框文本内容置顶
                cityInput.GetComponent<Image>().color = new Color(1, 1, 1, 1);
            }
            break;
    }
}