【Unity3D】UI Toolkit容器

1 前言

UI Toolkit简介 中介绍了 UI Builder、样式属性、UQuery、Debugger,本文将介绍 UI Toolkit 中的容器,主要包含 VisualElement、ScrollView、ListView、GroupBox,官方介绍详见→UXML elements reference

2 VisualElement(空容器)

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

1)属性介绍

  • 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 容器

cs 复制代码
VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;

3 ScrollView(滚动容器)

1)属性介绍

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

  • 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 元素下面,如下。

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

cs 复制代码
VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;
ScrollView scrollview = rootVisualElement.Q<ScrollView>();
scrollview.Add(new Label("LabelContent"));

4 ListView(列表)

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

1)属性介绍

  • 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

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,显示如下。

打印日志如下。

5 GroupBox(分组盒子)

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

1)属性介绍

  • Text: 分组标题。

2)GroupBox 的使用

GroupBoxDemo.cs

cs 复制代码
using UnityEngine;
using UnityEngine.UIElements;

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

    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 < choiceTitle.Length; i++) {
            AddChoice(i);
        }
    }

    private void AddChoice(int index) { // 添加单选项
        RadioButton choice = new RadioButton(choiceTitle[index]);
        choice.style.fontSize = 50;
        choice.style.flexDirection = FlexDirection.RowReverse;
        VisualElement ve = choice.Query<VisualElement>().AtIndex(2);
        ve.style.flexGrow = 0;
        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,显示如下。

打印日志如下。

相关推荐
微小冷2 天前
WPF中ListView控件详解
c#·wpf·数据绑定·listview·bingding
NRatel2 个月前
Unity 中实现首尾无限循环的 ListView
unity·listview·无限循环·首尾循环
sitelist4 个月前
comctl32!ListView_OnSetItem函数分析LISTSUBITEM结构中的image表示图标位置
image·listview·comctl32·onsetitem·listsubitem
江上清风山间明月5 个月前
一周掌握Flutter开发--3、布局与 UI 组件
flutter·column·listview·flex·gridview·row·layoutbuilder
rollingman8 个月前
WPF 学习《一》
学习·wpf·listview
茜茜西西CeCe10 个月前
移动技术开发:ListView水果列表
android·java·安卓·android-studio·listview·移动技术开发
且听真言1 年前
Flutter ListView控件
flutter·builder·controller·listview·listview原理
代码的奴隶(艾伦·耶格尔)1 年前
javafx的ListView代入项目的使用
服务器·listview
大熊猫侯佩1 年前
SwiftUI 5.0(iOS 17)滚动视图的滚动目标行为(Target Behavior)解惑和实战
滚动·scrollview·swiftui 5.0·ios 17·target behavior·惰性容器·滚动对齐
foxgod1 年前
qml 实现一个listview
前端·qml·listview