Detailed explanation of the use of the Dropdown drop-down menu component of Unity UGUI

1. What is the Dropdown component?

Dropdown is a common component in Unity UGUI. It is used to display a drop-down menu when the user clicks or selects, providing multiple options for users to choose.

2. How the Dropdown component works

The Dropdown component consists of two parts: a clickable button and a drop-down menu.

When the user clicks a button, the drop-down menu expands to display all options.

Users can select by clicking on options.

3. Common properties of Dropdown components

Options: List of options in the drop-down menu.
Caption Text: Text displayed on the button.
Template: Template for the drop-down menu.
Item Text: Text of options in the drop-down menu.
On Value Changed: Event triggered when the selected value changes.

4. Common functions of Dropdown components

ClearOptions(): Clear the options in the drop-down menu.
AddOptions(List<string> options): Add options to the drop-down menu.
SetValueWithoutNotify(int value): Set the currently selected value, but does not trigger the event.

5. Sample code

Example 1: Create a simple drop-down menu

using UnityEngine;
using ;
public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;
    void Start()
    {
        ();
        (new List<string> { "Option 1", "Option 2", "Option 3" });
    }
}

Operation steps：

Create an empty object and add the Dropdown component to the object.
Add the DropdownExample script to the object.
In the Inspector panel, drag and drop the reference of the Dropdown component onto the dropdown field of the DropdownExample script.
When running the game, the drop-down menu will display three options: "Option 1", "Option 2" and "Option 3".

Things to note：

Add options in the Start function to make sure the drop-down menu is initialized at the start of the game.

Example 2: Get the currently selected value

using UnityEngine;
using ;
public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;
    void Start()
    {
        ();
        (new List<string> { "Option 1", "Option 2", "Option 3" });
    }
    public void OnDropdownValueChanged(int value)
    {
        ("Selected option: " + [value].text);
    }
}

Operation steps：

Create an empty object and add the Dropdown component to the object.
Add the DropdownExample script to the object.
In the Inspector panel, drag and drop the reference of the Dropdown component onto the dropdown field of the DropdownExample script.
In the DropdownExample script, create a public method OnDropdownValueChanged and bind it to the On Value Change event of the Dropdown component.
Run the game, select the option in the drop-down menu, and the console will output the text of the selected option.

Things to note：

The parameter value of the OnDropdownValueChanged method represents the currently selected index.

Example 3: Dynamically add options

using UnityEngine;
using ;
public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;
    public InputField inputField;
    void Start()
    {
        ();
        (new List<string> { "Option 1", "Option 2", "Option 3" });
    }
    public void AddOption()
    {
        string newOption = ;
        (new (newOption));
        ();
    }
}

Operation steps：

Create an empty object and add the Dropdown component to the object.
Add the DropdownExample script to the object.
In the Inspector panel, drag and drop the reference of the Dropdown component onto the dropdown field of the DropdownExample script.
Create an InputField component and drag its reference to the inputField field of the DropdownExample script.
In the DropdownExample script, create a public method AddOption and bind it to the OnClick event of a button.
Run the game, enter the text of a new option, click the button, and a new option will be added to the drop-down menu.

Things to note：

The AddOption method gets the text of the new option through inputField and uses the method to add the new option.
After adding a new option, you need to call the method to refresh the display of the drop-down menu.

Example 4: Set default options

using UnityEngine;
using ;
public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;
    void Start()
    {
        ();
        (new List<string> { "Option 1", "Option 2", "Option 3" });
        (1);
    }
}

Operation steps：

Create an empty object and add the Dropdown component to the object.
Add the DropdownExample script to the object.
In the Inspector panel, drag and drop the reference of the Dropdown component onto the dropdown field of the DropdownExample script.
In the Start function, use methods to set the index of the default options.
Run the game, the second option will be selected by default in the drop-down menu.

Things to note：

The SetValueWithoutNotify method is used to set the currently selected value, but does not trigger the On Value Change event.

Example 5: Custom drop-down menu template

using UnityEngine;
using ;
public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;
    public GameObject customTemplate;
    void Start()
    {
        ();
        (new List<string> { "Option 1", "Option 2", "Option 3" });
         =  as RectTransform;
    }
}

Operation steps：

Create an empty object and add the Dropdown component to the object.
Create an empty object as a custom template and set its layout and style.
Add the DropdownExample script to the first object.
In the Inspector panel, drag and drop the reference of the Dropdown component onto the dropdown field of the DropdownExample script.
Drag and drop the reference of the custom template onto the customTemplate field of the DropdownExample script.
Run the game and the drop-down menu will be displayed using a custom template.

Things to note：

The custom template needs to be a RectTransform component.

References

Unity official documentation:Dropdown

The above is the detailed explanation of the use of the Dropdown dropdown menu component of Unity UGUI. For more information about the Unity UGUI Dropdown dropdown menu, please pay attention to my other related articles!