“This is the 14th day of my participation in the First Challenge 2022.

@[TOC](Unity UGUI Dropdown component use brief)

The official definition

The official document: docs.unity3d.com/Manual/scri…

From official interpretation: control displays the currently selected option. Once clicked, it opens the list of options so that a new option can be selected. After the new option is selected, the closed list is closed again and the control displays the newly selected option. If the user clicks on the control itself or any other location in the canvas, the list also closes.

---

Example shows

Create a Dropdown component defined by Unity that looks something like this… If you’re careful, you’ll notice that when you run it, you’ll generate a Blocker that fills the current layer, which is why when you click on the dropdown option and click on the blank, the dropdown option automatically closes. Take a look at the Inspector panel of the generated Blocker

---

Code operation

Here is a basic operation for DropDown

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropDownTest : MonoBehaviour {

    public Dropdown dropDown;

	void Start () {

        // Whether to click
        dropDown.interactable = true;

        #regionAdd dropdown options,, and set text and base image
        // Add a drop-down option
        Dropdown.OptionData data = new Dropdown.OptionData();
        data.text = "Plan one";
        //data.image = "specify an image as the background, use the default";
        dropDown.options.Add(data);

        // Another way to add, but not as convenient as the first one,
        List<Dropdown.OptionData> listOptions = new List<Dropdown.OptionData>();       
        listOptions.Add(new Dropdown.OptionData("Plan TWO"));
        listOptions.Add(new Dropdown.OptionData("Plan three"));
        dropDown.AddOptions(listOptions);

        // Set the display font size
        dropDown.captionText.fontSize = 14;
        // dropdown. captionImage = "base ";
        // Set the font size to be copied
        dropDown.itemText.fontSize = 15;
        // dropdown. itemImage = "bottom ";

        //PS: I usually use a loop to add the first form
        #endregion

        #regionOnce added, it's ready to use, so what happens when we want to reuse it? To remove OptionData, each comment opening below is a function
        // Clear all drop-down options directly,
        dropDown.ClearOptions();
        // The parent test is not very useful
        //dropDown.options.Clear(); 

        // If there is a drop down state in the object pool, it will be killed directly. (in the case of extreme click testing)
        if (dropDown.transform.childCount == 3)
        {
            Destroy(dropDown.transform.GetChild(2).gameObject);
        }

        // Remove the specified OptionData parameter
        dropDown.options.Remove(data);
        // Remove the specified position argument: index
        dropDown.options.RemoveAt(0); 
        #endregion

        #regionAdd a Listener function
        // The value changes when clicked (toggle dropdown options)
        dropDown.onValueChanged.AddListener((int v) => OnValueChange(v));
        // If there are more than one, you can pass it as an argument.
        //dropDown.onValueChanged_1.AddListener((int v) => OnValueChange(dropDown.gameobject,v));
        #endregion
    }

    /// <summary>
    ///Value change is triggered when clicked (toggle dropdown options)
    /// </summary>
    /// <param name="v">Is the index of the clicked option under OptionData</param>
    void OnValueChange(int v)
    {
        // Switch options when handling other logic...
        Debug.Log("The index of the click down control is..."+ v); }}Copy the code

---

---

The built-in methods and properties can be viewed on the official website, which is linked at the beginning of this article.