【UGUI】踩坑填坑——DropDown

本文探讨了在使用Unity UGUI DropDown组件时遇到的问题,当Canvas Render Mode设置为Screen Space--Camera,将组件移至屏幕边缘导致下拉列表坐标不合法并造成界面卡死。为了解决这个问题,作者决定自定义下拉组件,采用Toggle来控制点击,并实现了无限循环列表。同时,详细说明了如何配置下拉选项,包括文本、图片和选中状态的定制。文章还提及利用之前关于UGUI无限列表的技术来实现滚动效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在使用UGUI的 DropDown 时, Canvas 的 Render Mode 选择了 Screen Space--Camera, 此时遇到一个小bug, 当我把这个下拉组件放到屏幕中间附近时, 下拉列表显示是正常的。当我把组件整体移到边缘,突然出现下拉列表的 Content 的坐标 不合法,由于 ugui 的点击关闭处理是在 Canvas 的子节点最下方又生成一个 全屏的 遮罩 来保证实现 "点击关闭",所以此时整个界面卡死..........翻遍源码断点我也没找到问题..

中间:边缘


另外,他的下拉列表实现, 不适合多个数据,假如有百十个就生成百十个下来的子菜单,这明显是不合理的,所以,把下拉改成 无限循环 列表是必须的。

于是,开始自己动手造轮子:

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

/// <summary>
/// Introduction: GDropDown
/// Author: 	Cheng
/// Time: 
/// </summary>
[AddComponentMenu("UI/GDropdown", 100)]
[RequireComponent(typeof(RectTransform))]
public class GDropDown : MonoBehaviour
{

    [Tooltip("Button of Whole Component")]
    [SerializeField]
    private Toggle m_CaptionToggle;
    /// <summary>
    /// Button of Whole Component
    /// </summary>
    public Toggle CaptionToggle { get { return m_CaptionToggle; } set { SetCaptionButton(value);} }

    [Tooltip("Display Text of Selected Item")]
    [SerializeField]
    private Text m_CaptionText;
    /// <summary>
    /// Display Text of Selected Item
    /// </summary>
    public Text CaptionText { get { return m_CaptionText; } set { m_CaptionText = value; } }

    [Tooltip("Display Image of Selected Item")]
    [SerializeField]
    private Image m_CaptionImage;
    /// <summary>
    /// Display Image of Selected Item
    /// </summary>
    public Image CaptionImage { get { return m_CaptionImage; } set { m_CaptionImage = value; } }

    [Space]

    [Tooltip("Drop List")]
    [SerializeField]
    private ScrollRect m_ScrollRect;
    /// <summary>
    /// Drop List 
    /// </summary>
    public ScrollRect ScrollRect { get { return m_ScrollRect; } set { m_ScrollR
### Unity UGUI Dropdown 事件处理 #### 创建并配置 Dropdown 组件 在 Unity 中创建 Dropdown 组件的方法是在 Hierarchy 视图中选择 `Create -> UI -> Dropdown`[^3]。 #### 添加事件监听器 为了响应用户的交互操作,可以为 Dropdown 的选项变化添加监听器。这通常通过脚本实现: ```csharp using UnityEngine; using UnityEngine.UI; public class DropdownHandler : MonoBehaviour { public Dropdown myDropdown; void Start() { // 注册 OnValueChanged 事件监听器 myDropdown.onValueChanged.AddListener(OnDropdownValueChanged); } void OnDropdownValueChanged(int index) { Debug.Log("Selected option: " + index); string selectedOption = myDropdown.options[index].text; Debug.Log("Text of the selected item is: " + selectedOption); } } ``` 此代码片段展示了如何定义一个简单的监听函数来捕获用户的选择改变,并打印所选项目的索引及其文本内容到控制台[^1]。 #### 获取当前选定项 除了监听值的变化外,有时还需要主动查询当前被选中的项目。可以通过访问 `dropdown.value` 属性获取当前选中的索引位置;而要得到对应的显示文字,则应读取 `dropdown.captionText.text` 或者遍历 `dropdown.options` 列表找到对应条目[^2]。 #### 动态更新选项列表 如果希望动态修改可用的选项集合,可利用如下方式向现有 Dropdown 增加新选项或完全替换整个选项集: ```csharp // 向现有的下拉菜单增加新的选项 myDropdown.AddOptions(new List<string>() { "New Option 1", "New Option 2" }); // 完全重置下拉菜单的所有选项 List<Dropdown.OptionData> newOptions = new List<Dropdown.OptionData>(); newOptions.Add(new Dropdown.OptionData() { text = "Option A" }); newOptions.Add(new Dropdown.OptionData() { text = "Option B" }); myDropdown.ClearOptions(); myDropdown.AddOptions(newOptions); ``` 上述代码说明了两种不同的场景——一种是追加更多选项至已有列表之后;另一种则是清空原有数据后再填充一组全新的选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值