Dans ce chapitre, nous introduisons la liste déroulante (Dropdown). Nous cliquons sur la barre de menu "GameObject"->"UI"->"Dropdown", puis ajustons sa position. L'effet est le suivant
En fait, son essence est une liste déroulante, puis sélectionnez une option dans la liste. Vous devriez pouvoir voir des éléments d'interface utilisateur similaires dans de nombreuses pages Web. Nous visualisons cet objet de jeu dans le panneau de hiérarchie
Nous avons constaté qu'il existe trois objets de jeu enfants "Label", "Arrow" et "Template" sous l'élément Dropdown UI. Et l'objet de sous-jeu "Modèle" continue d'avoir ses objets de sous-jeu. D'après le nom, nous pouvons à peu près comprendre que "Label" est juste le texte d'invite de la liste déroulante, "Flèche" est la flèche et "Modèle" est la liste déroulante qui apparaît après avoir cliqué (le les données correspondantes sont un tableau). Passons à son inspecteur
Décrivons brièvement ces propriétés.
Interactable Indique si l'élément d'interface utilisateur accepte les entrées.
La transition indique l'effet de changement d'état de l'élément d'interface utilisateur et la valeur par défaut est le changement de couleur de teinte de couleur.
Le graphique cible représente le composant Image de l'élément d'interface utilisateur, c'est-à-dire que l'image est utilisée comme arrière-plan de la liste déroulante.
Couleur normale est la couleur de l'état par défaut de la liste déroulante.
Couleur de surbrillance est la couleur de surbrillance de la liste déroulante.
Pressed Color est la couleur lorsque la liste déroulante est cliquée
La couleur sélectionnée est la couleur lorsque la liste déroulante est sélectionnée
Désactiver la couleur est la couleur lorsque la liste déroulante échoue
Color Multiplier est la valeur du multiplicateur de couleur, la valeur par défaut est 1.
La durée du fondu est le temps (en secondes) pour que la couleur de la liste déroulante change.
Navigation et Visualiser représentent les paramètres de navigation de la liste déroulante, que nous ne définissons pas ici.
Le modèle est l'objet de jeu enfant "Modèle" (liste déroulante) que nous avons mentionné ci-dessus.
Le texte de légende est l'objet de sous-jeu "Lable" que nous avons mentionné ci-dessus, et c'est le texte d'invite par défaut de la liste déroulante. Cependant, en général, la liste déroulante utilisera directement le texte de la première option de la liste déroulante.
Légende Image Une image peut être utilisée pour remplacer l'objet de jeu enfant "Lable" ci-dessus.
Le texte de l'objet est l'objet de jeu de l'objet qui apparaît après avoir cliqué sur la liste déroulante.
Item Image peut utiliser une image pour remplacer l'objet de jeu Item Text ci-dessus.
Valeur L'index de l'option actuellement sélectionnée. 0 représente la première option, 1 représente la seconde, et ainsi de suite. La valeur par défaut est 0, ce qui signifie que la liste déroulante utilise la première option de la liste déroulante par défaut.
Alpha Fade Speed est le temps nécessaire à la liste déroulante pour s'estomper.
Options représente une liste déroulante, qui est essentiellement un tableau. Une chaîne de texte ou une image peut être spécifiée pour chaque option, correspondant à un élément du tableau. Nous pouvons utiliser des chaînes de texte ici, comme indiqué ci-dessous
Bien sûr, nous pouvons également utiliser "+" pour ajouter de nouvelles options de liste.
Utilisez du code pour modifier manuellement les options de la liste déroulante.
// 下拉框元素上的 Dropdown 组件
private Dropdown dropDown;
void Start()
{
// 获取输入框UI元素上面的 InputField 组件
inputField = GameObject.Find("InputField").GetComponent<InputField>();
// 获取下拉框元素上的 Dropdown 组件
dropDown = GameObject.Find("Dropdown").GetComponent<Dropdown>();
var options = dropDown.options;
options.Add(new Dropdown.OptionData("杭州"));
options.Add(new Dropdown.OptionData("南京"));
dropDown.options = options;
}
L'effet final est le suivant
Ensuite, continuons à parler des événements de la liste déroulante.
Pour la liste déroulante, l'événement qu'elle peut accepter est l'événement On Value Changed. Nous pouvons utiliser une méthode pour gérer cet événement. Dans cette méthode d'événement, nous imprimons la liste déroulante (Dropdown), qui est le tableau indice.
public void testDropdownChange()
{
Debug.Log("DropdownChange:" + dropDown.value);
}
Ensuite, nous ajoutons la méthode testDropdownChange ci-dessus à l'événement
Ensuite, nous pouvons exécuter l'ensemble du projet pour voir l'effet de la liste déroulante.
Quand on passe du premier "Beijing" (Valeur=0) au deuxième "Shanghai" (Valeur=1)
Notre console indique également que la valeur de la liste déroulante (Dropdown) est 1.
Lorsque nous repassons au troisième "Guangzhou", la console affichera 2.
Le contenu impliqué dans ce cours a été partagé sur Baidu Netdisk : https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id