unity dropdown 界面设计

心已赠人 2022-06-15 12:49 273阅读 0赞

摆界面的时候 遇到这种界面 需要下拉列表框  记录一下经过 使用unity里自带的 dropdown  在Hierarchy界面创建一个Dropdown 这个是基础这里就不多讲了

![Center][]最终功能：点击下拉列表，出现离开房间，解散房间，游戏设置文字和响应的图标。dropdown设置如下

![Center 1][]跟默认的dropdown稍微删掉了一些不用的东西，比如首选项的文字我不需要。Dropdown我不想要背面的白色背景，将他的透明度改为了0，Arrow 是首个图标，选一个你想替换的icon.调节大小，这些自己试试就会了。

![Center 2][]主要是这的配置，

Caption Text和Caption Image是作为首选项的文字和图片显示

Item Text和Item Image是作为下拉列表中每个item的文字和图片显示，

Value值会随着下拉列表选项的不同而变化,默认是0，选择下拉列表的第一个，我这里不需要这样，就将他设计成一个不用的数字。

Options里面的第一个框是下拉列表中的文字，第二个是图片。

提示：这里的item Image 使用hierarchy视图里你你创建的item Image。不知道的话看这个博客的第二张图上能找到。这是一种通过摆界面的方式实现的。下面我们说一下通过代码实现，参考别人的。

public string\[\] showText;  
    public Sprite\[\] sprite;  
    Dropdown dropDownItem;  
    List<string> temoNames;  
    List<Sprite> sprite\_list;  
    void Start()  
    \{  
        dropDownItem = this.GetComponent<Dropdown>();  
        temoNames = new List<string>();  
        sprite\_list = new List<Sprite>();  
  
  
        AddNames();  
        UpdateDropDownItem(temoNames);  
  
  
    \}  
    void UpdateDropDownItem(List<string> showNames)  
    \{  
        dropDownItem.options.Clear();  
        Dropdown.OptionData temoData;  
        for (int i = 0; i < showNames.Count; i++)  
        \{  
            temoData = new Dropdown.OptionData();  
            temoData.text = showNames\[i\];  
            temoData.image = sprite\_list\[i\];  
            dropDownItem.options.Add(temoData);  
        \}  
          
        dropDownItem.captionText.text = showNames\[0\];  
         
    \}  
  
    void AddNames()  
    \{  
        for (int i = 0; i < showText.Length; i++)  
        \{  
            temoNames.Add(showText\[i\]);  
        \}  
        for (int i = 0; i < sprite.Length; i++)  
        \{  
            sprite\_list.Add(sprite\[i\]);  
        \}  
    \}  
\}

![Center 3][]

dropDownItem.value == 0 判断选择的下拉列表框。

mydrop.value返回的是当前值所在list中的位置，位置是从0开始算起的。

dropdownItem.options.Clear(); 清空数据

dropdownItem.options.Add(tempData); 添加数据 dropdown.addoptions（“放入要显示的list数据”）方法显示要显示的内容 mydrop.options.RemoveAt(“要移除的数据”)方法 来移除当前选中的内容 mydrop.options[0].text; 获取第一个下拉列表框的文本内容

[Center]: /images/20220615/e06cf29dba594f478b4a1d6fab228b42.png
[Center 1]: /images/20220615/e0194c18627d4fdf98f8bcc09c5f2011.png
[Center 2]: /images/20220615/b621e58cc2464fb3bb19909931670da5.png
[Center 3]: /images/20220615/8d415b9ba556459090c9379713fe37e4.png