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

效果展示

难点

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

实现

• 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;
    }
}