效果展示
难点
处理输入框和下拉框的优先级显示问题,做到二者无缝衔接。当下拉框选中某一项时,输入框内容清空且变透明;当输入框有文本输入时,下拉框选中默认项(空白项)且变透明
实现
- 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;
}
}