将内容包裹在滚动视图中

版本: 2021.3+

此示例演示了如何使用样式将内容包裹在滚动视图中。为了演示目的，本指南适用于编辑器 UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。 更多信息
参见 词汇表。但是，有关滚动视图样式的说明也适用于运行时 UI。

示例概述

此示例创建一个带有两个滚动视图的自定义编辑器窗口

• 其中一个包含一个标签。标签的文本在一行中显示，如果行已满，则会显示到下一行。
• 其中一个包含 15 个按钮。按钮以一行显示，如果行已满，则会显示到下一行。

要包裹滚动视图内标签的文本，将样式应用于 Label 控件，并使用 VisualElement 来持有标签.

要包裹滚动视图内的元素，将样式应用于滚动视图的内容容器.

您可以在此 GitHub 存储库 中找到此示例创建的完整文件。

先决条件

本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容

• UXML
• USS
• UI 生成器
• ScrollView一个 UI 控件，它在一个可视区域中显示一组大型控件，您可以使用滚动条查看这些控件。 更多信息
  参见 词汇表

创建自定义编辑器窗口

要尝试此示例，首先创建一个具有某些默认内容的自定义编辑器窗口。

1. 使用任何模板创建一个 Unity 项目。
2. 在“项目”窗口中右键单击，然后选择“创建”>“UI 工具包”>“编辑器窗口”。
3. 在“UI 工具包编辑器窗口创建器”窗口的“C#”框中，输入 ScrollViewExample。
4. 选择“确认”。这将创建三个文件：ScrollViewExample.cs、ScrollViewExample.uxml 和 ScrollViewExample.uss。

创建滚动视图

在 UI 文档（UXML 文件）中定义基本滚动视图结构，在 USS 文件中设置 视觉元素一个视觉树的节点，它实例化或派生自 C# VisualElement 类。您可以设置外观、定义行为，并将其作为 UI 的一部分显示在屏幕上。 更多信息
参见 词汇表 的样式，并在 C# 脚本中向第二个滚动视图中添加 15 个按钮。

1. 将 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">
       <Style src="ScrollViewExample.uss" />
       <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<ScrollViewExample>();
       }
   
       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. 要测试滚动视图包裹，从菜单中选择“示例”>“滚动视图包裹示例”。

其他资源

• UQuery
• ScrollView