Unity3D ：在滚动视图中环绕内容
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生
在滚动视图中环绕内容
版本： 2021.3+
此示例演示如何使用样式在滚动视图中环绕内容。出于演示目的，本指南适用于编辑器用户界面
.但是，有关设置滚动视图样式的说明也适用于运行时 UI。
示例概述
本示例创建一个具有两个滚动视图的自定义编辑器窗口：
- 一个里面有一个标签。标签的文本显示在一行中，如果该行已满，则显示到下一行。
- 一个里面有15个按钮。按钮显示在一行中，如果该行已满，则显示在下一行。
若要在滚动视图中换行标签的文本，请将样式应用于 Label 控件，并使用可视元素来保留标签。
要将元素换行在滚动视图中，请将样式应用于滚动视图的内容容器。
您可以在此 GitHub 存储库中找到此示例创建的已完成文件。
先决条件
本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容：
- 用户体验
- 美国航空母舰
- 用户界面生成器
- 滚动视图
创建自定义编辑器窗口
若要尝试该示例，请首先创建一个包含一些默认内容的自定义编辑器窗口。
- 使用任何模板创建 Unity 项目。
- 在“项目”窗口中右键单击，然后选择“创建> UI 工具包>编辑器窗口”。
- 在“UI 工具包编辑器窗口创建程序”窗口的“C#”框中，输入 。
ScrollViewExample - 选择“确认”。这将创建三个文件：、 和 。
ScrollViewExample.csScrollViewExample.uxmlScrollViewExample.uss
创建滚动视图
在 UI 文档（UXML 文件）中定义基本的滚动视图结构，设置视觉元素
，并在 C# 脚本的第二个滚动视图中添加 15 个按钮。
- 将 的内容替换为以下内容：
ScrollViewExample.uxml
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="True">
ui:ScrollView
ui:VisualElement
<ui:Label text="ScrollView Wrapping Example" />
</ui:VisualElement>
</ui:ScrollView>
<ui:ScrollView name="scroll-view-wrap-example" />
</ui:UXML>
2. 将 的内容替换为以下内容：ScrollViewExample.uss
Label {
font-size: 20px;
-unity-font-style: bold;
color: rgb(68, 138, 255);
/* Style to wrap text of the label */
white-space: normal;
}
/* Style to wrap elements inside the scroll view */
scroll-view-wrap-example .unity-scroll-view__content-container {
flex-direction: row;
flex-wrap: wrap;
}
Button {
width: 50px;
height: 50px;
}
3. 将 的内容替换为以下内容：ScrollViewExample.cs
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;
public class ScrollViewExample : EditorWindow
{
[MenuItem("Example/ScrollView Wrapping Example")]
public static void ShowExample()
{
var wnd = GetWindow
}
public void CreateGUI()
{
// Each editor window contains a root VisualElement object.
VisualElement root = rootVisualElement;
// Import UXML.
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/ScrollViewExample.uxml");
VisualElement ScrollViewExample = visualTree.Instantiate();
root.Add(ScrollViewExample);
// Find the scroll view by name.
VisualElement scrollview = root.Query<ScrollView>("scroll-view-wrap-example");
// Add 15 buttons inside the scroll view.
for (int i = 0; i < 15; i++)
{
Button button = new Button();
button.text = "Button";
scrollview.Add(button);
}
}
}
4. 要测试滚动视图换行，请从菜单中选择“示例”>“滚动视图环绕示例”。
由3D建模学习工作室整理翻译，转载请注明出处！