【Unity3D】UI Toolkit容器

这篇具有很好参考价值的文章主要介绍了【Unity3D】UI Toolkit容器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 前言

        UI Toolkit简介 中介绍了 UI Builder、样式属性、UQuery、Debugger,UI Toolkit元素 中介绍了 Label、Button、TextField、Toggle、Radio Button、Slider、Progress Bar、Dropdown、Foldout 等元素,UI Toolkit样式选择器 中介绍了简单选择器、复杂选择器、伪类选择器等样式选择器,本文将介绍 UI Toolkit 中的容器,主要包含 VisualElement、ScrollView、ListView、GroupBox 等,官方介绍详见→UXML elements reference。

2 VisualElement(空容器)

        VisualElement 是一个空容器,便于组织和管理元素,官方介绍见→UXML element VisualElement。

        1)属性介绍 

uitoolkit,Unity3D,# Unity基础,VisualElement,ScrollView,ListView,GroupBox,UI Toolkit

  • View Data Key:用于视图数据持久化(如:树展开状态、滚动位置、缩放级别),作为视图数据保存 / 加载的键,如果不设置此键将禁用该容器的持久性。
  • Picking Mode:判断是否可以在 mouseEvents 期间选择此容器。
  • Tooltip:鼠标悬停到该容器上时弹出的提示文字。
  • Usage Hints:预期使用模式,便于系统加速某些操作。
  • Tab Index:用于对焦点环中的焦点对象进行排序。
  • Focusable:容器是否能获得焦点。

        说明:View Data Key、Picking Mode、Tooltip、Usage Hints、Tab Index、Focusable 都是基类属性,后文若出现这些属性将不再赘述。 

         2)获取根 VisualElement 容器

VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;

        3)注册事件回调(RegisterCallback)

        RegisterCallbackDemo.cs

using UnityEngine;
using UnityEngine.UIElements;

public class RegisterCallbackDemo : MonoBehaviour {
    private void Awake() {
        VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;
        rootVisualElement.RegisterCallback<MouseDownEvent>(OnClickDown);
        rootVisualElement.RegisterCallback<ClickEvent>(OnClick);
    }

    private void OnClickDown(MouseDownEvent e) { // 鼠标按下时事件回调
        Debug.Log("mousePosition=" + e.mousePosition + ", pressedButtons=" + e.pressedButtons); // 1:左键, 2:右键, 4:中键
    }

    private void OnClick(ClickEvent e) { // 鼠标左键点击时事件回调
        Debug.Log("target=" + e.target);
    }
}

        说明:注册的事件主要有以下几种,官方介绍见→Event reference。

  • MouseDownEvent:鼠标按下时触发的事件。
  • MouseUpEvent:鼠标抬起时触发的事件。
  • ClickEvent:鼠标左键点击时触发的事件。
  • MouseOverEvent:鼠标进入元素时触发的事件。
  • MouseOutEvent:鼠标离开元素时触发的事件。
  • MouseMoveEvent:鼠标移动时触发的事件。
  • MouseEnterEvent:鼠标进入元素或其子元素时触发的事件。
  • MouseLeaveEvent:鼠标离开元素和其所有子元素时触发的事件。
  • MouseCaptureEvent:处理器开始捕获鼠标后触发的事件。
  • MouseCaptureOutEvent:处理器停止捕获鼠标后触发的事件。
  • MouseEnterWindowEvent:鼠标进入窗口时触发的事件。
  • MouseLeaveWindowEvent:鼠标离开窗口时触发的事件。
  • WheelEvent:鼠标滑轮滚动时触发的事件。

        4)添加事件操作器(AddManipulator)

        ManipulatorDemo.cs

using UnityEngine;
using UnityEngine.UIElements;

public class ManipulatorDemo : MonoBehaviour {
    private VisualElement rootVisualElement;

    private void Awake() {
        rootVisualElement = GetComponent<UIDocument>().rootVisualElement;
        Clickable leftClickManipulator = new Clickable(OnCtrlDoubleClicked);
        leftClickManipulator.activators.Clear();
        leftClickManipulator.activators.Add(new ManipulatorActivationFilter() {
            button = MouseButton.LeftMouse, // 鼠标左键
            clickCount = 2, // 点击次数
            modifiers = EventModifiers.Control // 按键
        });
        rootVisualElement.AddManipulator(leftClickManipulator);
    }

    private void OnCtrlDoubleClicked(EventBase e) { // Ctrl+Double Click事件回调
        Debug.Log("OnCtrlDoubleClicked");
    }
}

3 ScrollView(滚动容器)

        1)属性介绍 

        ScrollView 是一个滚动容器,官方介绍见→UXML element ScrollView。

uitoolkit,Unity3D,# Unity基础,VisualElement,ScrollView,ListView,GroupBox,UI Toolkit

  • Mode:控制用户滚动内容的方式,取值有 Vertical(垂直滚动)、Horizontal(水平滚动)、Vertical And Horizontal(垂直和水平滚动)。
  • Nested Interaction Kind:滑动到边界后的行为,取值有 default(反弹)、Stop Scrolling(停止滑动)、Forward Scrolling(继续向前滑动)。
  • Horizontal Scroller Visibility:水平滚动条的可见性,取值有 Auto(仅在内容显示不下时才显示滑动条)、Always Visible(一直可见)、Hidden(一直隐藏)。
  • Vertical Scroller Visibility:垂直滚动条的可见性,取值有 Auto(仅在内容显示不下时才显示滑动条)、Always Visible(一直可见)、Hidden(一直隐藏)。
  • Horizontal Page Size:控制水平滑动的速度。
  • Vertical Page Size:控制垂直滑动的速度。
  • Touch Scroll Type:触摸滑动类型,Unrestricted(不受约束的)、Elastic(弹性的)、Clamped(夹紧的)。
  • Scroll Deceleration Rate:滑动停止时的减速度(速度的导数,为 0 时立刻停止滑动)。
  • Elasticity:滑动到边界时的弹性值。

        2)添加元素

        将元素拖拽到 ScrollView 上,会自动放在其 unity-content-container 元素下面,如下。 

uitoolkit,Unity3D,# Unity基础,VisualElement,ScrollView,ListView,GroupBox,UI Toolkit

        也可以通过以下代码添加元素。

VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;
ScrollView scrollview = rootVisualElement.Q<ScrollView>();
scrollview.Add(new Label("LabelContent"));

4 ListView(列表)

        ListView 是一个列表容器,官方介绍见→UXML element ListView。

        1)属性介绍

uitoolkit,Unity3D,# Unity基础,VisualElement,ScrollView,ListView,GroupBox,UI Toolkit

  • BindingPath:目标属性绑定的路径。
  • Fixed Item Height:列表中 item 的高度,以像素为单位。
  • Virtualization Method:设置 item 高度是固定的还是动态的,取值有 Fixed Height(固定高度)、Dynamic Height(动态高度)。
  • Show Border:是否显示边框。
  • Selection Type:选择类型,取值有 None(禁止选中)、Single(只能选中单个 item)、Multiple(可以选中多个 item)。
  • Show Alternation Row Backgrounds:显示交替行背景,取值有 None(不显示交替行背景)、Content Only(有内容时才显示交替行背景)、All(一直显示交替行背景)。
  • Show Foldout Header:是否显示折叠页眉。
  • Header Title:页眉标题。
  • Show Add Remove Footer:是否显示添加 / 删除页脚,如果显示,在页脚会出现 "+" 和 "-" 按钮。
  • Reorderable:是否允许 item 重排序。
  • Reorder Mode:重排序模式,取值有 Simple(在重排序时显示标准的蓝线拖动器)、Animated(在每个 item 之前添加拖拽句柄,可以用来拖拽单个 item)。
  • Show Bound Collection Size:是否显示 item 数。
  • Horizontal Scrolling:是否可以水平滑动。

        2)ListView 的使用

        ListViewDemo.cs

using UnityEngine;
using UnityEngine.UIElements;
using System.Collections.Generic;

public class ListViewDemo : MonoBehaviour {
    private VisualElement root; // 根容器
    private ListView listView; // 列表
    private string[] itemsTitle = new string[] {"First", "Second", "Third", "Fourth"}; // item的标题
    private int[] itemsData = new int[]{0, 1, 2, 3}; // item的数值

    private void Awake() {
        root = GetComponent<UIDocument>().rootVisualElement;
        listView = root.Q<ListView>();
        listView.fixedItemHeight = 60;
        listView.itemsSource = itemsData;
        listView.makeItem += MakeItem;
        listView.bindItem += BindItem;
        listView.onSelectionChange += OnSelectionChange;
    }

    private VisualElement MakeItem() { // 创建item元素, 这里以Label元素呈现item
        Label label = new Label();
        label.style.fontSize = 50;
        label.style.unityTextAlign = TextAnchor.MiddleLeft;
        return label;
    }

    private void BindItem(VisualElement visualElement, int index) { // 绑定item
        Label label = visualElement as Label;
        label.text = itemsTitle[index];
    }

    private void OnSelectionChange(IEnumerable<object> objs) { // 选中事件回调
        foreach (object item in objs) {
            int data = (int) item;
            Debug.Log(data);
        }
    }
}

        运行后,点击 Second,显示如下。 

uitoolkit,Unity3D,# Unity基础,VisualElement,ScrollView,ListView,GroupBox,UI Toolkit

        打印日志如下。

uitoolkit,Unity3D,# Unity基础,VisualElement,ScrollView,ListView,GroupBox,UI Toolkit

5 GroupBox(分组盒子)

        GroupBox 是一个逻辑分组容器,官方介绍见→UXML element GroupBox。

        1)属性介绍

uitoolkit,Unity3D,# Unity基础,VisualElement,ScrollView,ListView,GroupBox,UI Toolkit

  • Text: 分组标题。

        2)GroupBox 的使用

        GroupBoxDemo.cs

using UnityEngine;
using UnityEngine.UIElements;

public class GroupBoxDemo : MonoBehaviour {
    private VisualElement root; // 根容器
    private GroupBox groupBox; // 分组盒子
    private string[] choiceLabel = new string[] {"First", "Second", "Third", "Fourth"}; // choice的标签

    private void Awake() {
        root = GetComponent<UIDocument>().rootVisualElement;
        groupBox = root.Q<GroupBox>();
        groupBox.text = "GroupBoxDemo";
        groupBox.style.fontSize = 50;
        root.Add(groupBox);
        for (int i = 0; i < choiceLabel.Length; i++) {
            AddChoice(i);
        }
    }

    private void AddChoice(int index) { // 添加单选项
        RadioButton choice = new RadioButton();
        choice.text = choiceLabel[index];
        choice.style.fontSize = 50;
        VisualElement ve = choice.Query<VisualElement>().AtIndex(2);
        ve.style.marginRight = 10;
        choice.RegisterValueChangedCallback(e => OnValueChanged(index, e));
        groupBox.Add(choice);
    }

    private void OnValueChanged(int index, ChangeEvent<bool> e) { // 选项变化回调函数
        Debug.Log("index=" + index + ", previousValue=" + e.previousValue + ", newValue=" + e.newValue);
    }
}

        运行后,点击 Second,显示如下。  

uitoolkit,Unity3D,# Unity基础,VisualElement,ScrollView,ListView,GroupBox,UI Toolkit

        打印日志如下。

uitoolkit,Unity3D,# Unity基础,VisualElement,ScrollView,ListView,GroupBox,UI Toolkit文章来源地址https://www.toymoban.com/news/detail-708836.html

到了这里,关于【Unity3D】UI Toolkit容器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Unity3D】UI Toolkit数据动态绑定

            本文将实现 cvs 表格数据与 UI Toolkit 元素的动态绑定。         如果读者对 UI Toolkit 不是太了解,可以参考以下内容。 UI Toolkit简介 UI Toolkit容器 UI Toolkit元素 UI Toolkit样式选择器 UI Toolkit自定义元素         本文完整资源见→UI Toolkit数据动态绑定。 2.1 UI 搭建

    2024年02月08日
    浏览(59)
  • 【Unity3D小功能】Unity3D中实现点击‘文字’出现‘UI面板’

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 QQ群:398291828 大家好,我是佛系工程师 ☆恬静的小魔龙☆ ,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 宠粉博主又来了,今天有粉丝问我如何实现点击一段文字然后出现的面板在那段文字附近显示: 深入了

    2024年04月13日
    浏览(83)
  • unity3D之UI

    1.canvas介绍 (1)Canvas属于Unity的UGUI,UGUI提供了强大的可视化编辑,大大提高了GUI的开发效率。 (2)Canvas是所有UI组件的父物体,也就是说每一个UI组件都必须在Canvas下,作为Canvas的子物体,当你创建一个UI控件时,如果在Hierarchy下没有Canvas组件的话,Unity会帮你自动创建一个Canva

    2024年02月04日
    浏览(155)
  • 【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 大家好,我是佛系工程师 ☆恬静的小魔龙☆ ,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 使用Unity3D实现UI的擦拭效果、刮刮卡功能的效果实现方式比较多,比如说用Shader、Texture渲染都是可以

    2024年02月04日
    浏览(246)
  • unity3D基础操作之01--unity3d窗口界面介绍

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 1、Scene场景编辑窗口; 2、Game游戏运行窗口; 3、Hierarchy场景物体列表窗口; 4、Project项目资源列表窗口; 5、Inspector属性编辑列表窗口; 6、其他常调节窗口 在屏幕左上方为场景编辑窗口Scene,在场景编

    2024年02月06日
    浏览(80)
  • 使用Unity生成UI预制体 (Unity3D)

    在Unity中,预制体(Prefab)是一种非常有用的工具,用于生成可重复使用的UI元素。预制体使得UI的创建和管理变得更加简单和高效。在本文中,我们将详细介绍如何使用Unity生成UI预制体,并提供相应的源代码示例。 步骤1:创建UI元素 首先,我们需要创建UI元素,例如按钮、

    2024年02月05日
    浏览(63)
  • 【Unity3D】实现UI点击事件穿透

              注意:EventSystem.current.RaycastAll获取到的对象列表是能够接受事件的,假如你的按钮Button自己身上没有Image,而是Button的子物体有,那么你就要给这个子物体也加上标签Tag才能响应到。 如果ExecuteEvents.Execute不管用,可以试试ExecuteEvents.ExecuteHierarchy

    2024年02月04日
    浏览(55)
  • Unity3D学习之UI系统——UGUI

    3.2.1 Screen Space -Overlay 覆盖模式 3.2.2 Screen Space - Camera 摄像机模式 创建专门的摄像机渲染UI 并让主摄像机不渲染UI层 3.2.3 World Space 宽高 * 缩放系数 = UI界面大小 参考分辨率 图片格式要改为Sprite 恒定像素模式计算公式 会根据当前分辨率 和 参考分辨率的比率自动计算UI的缩放量

    2024年02月21日
    浏览(261)
  • Unity3D学习之UI系统——NGUI

    资源商店搜索 学习版自行搜索 导入即可 创建UI 创建NGUI后,挂载在UI Root 和其 子Camera的脚本 分辨率自适应模式的基础 3.1.1 分辨率概念 3.1.2 Root的作用 3.1.3 root脚本各组件 Minimun Height 和 Maximum Height 用于拖动窗口时,如果窗口变得很小了,UI不缩放的话,会挡住游戏,使用Flex

    2024年03月17日
    浏览(86)
  • Unity3D学习之UI系统——GUI

    设置Screen Type和Center Type 最终实现效果: 3.1.1 GUI 共同点 3.1.2 文本控件 可以传图片 在unity中拖入图片 可以把Rect 设置成public 的变量,在控件中设置 文字和图片均显示 toolTip 获取当前选中的空间的附带信息 GUI Style 控制样式 3.1.3 按钮控件 必须要按下并抬起才算被点击 长按按钮

    2024年01月22日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包