Обращение содержимого внутри прокрутки

Версия: 2021.3+

В этом примере показано, как использовать стили для перемещения контента внутри прокручиваемого представления. Для демонстрационных целей это руководство предназначено для Редактора UI. Однако инструкции по стилям прокручиваемого представления также применимы к времени выполнения UI.

Примерный обзор

В этом примере создается пользовательское окно Редактора с двумя видами прокрутки:

• Одна из них имеет метку внутри. Текст метки отображается в строке и отображается в следующей строке, если строка полна.
• Один имеет 15 кнопок внутри него. Кнопки отображаются в ряду и отображаются на следующей строке, если ряд полный.

Чтобы перевернуть текст метки внутри прокрутки, применяет стиль к элементу управления Метка, и использует VisualElement для держателя метки.

Чтобы перевернуть элементы внутри прокручиваемого представления, применяет стиль к контейнеру содержимого прокручиваемого представления.

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

• UXML
• USS
• UI Builder
• ScrollView

Создание настраиваемого окна редактора

Чтобы попробовать пример, сначала создайте пользовательское окно Редактора с некоторым стандартным содержимым.

1. Создайте проект Unity с любым шаблоном.
2. Щелкните правой кнопкой мыши окно Project и выберите Создать > UI Toolkit > Окно редактора.
3. В поле C# окна UI Toolkit Редактора Создатель Окна введите ScrollViewExample.
4. Выберите Подтвердите. Это создаст три файла: ScrollViewExample.cs, ScrollViewExample.uxmlи ScrollViewExample.uss.

Создание представления прокрутки

Определите базовую структуру прокрутки в Документе UI (файл UXML), стили визуальных элементов в файле USS и добавьте 15 кнопок внутри второго прокрутки в скрипте C#.

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. Чтобы проверить перенос просмотра прокрутки, в меню выберите Пример > ScrollView Пример переноса.

Дополнительные ресурсы

• UQuery
• ScrollView