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().color = new Color(1, 1, 1, 1);
                // 输入框透明,防止遮挡
                cityInput.GetComponent().color = new Color(1, 1, 1, 0);
            }
            break;

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

你可能感兴趣的:(Unity)