滚动视图 (ScrollView)

ScrollView 在可滚动区域内显示其内容。将内容添加到__ ScrollView__ 时，内容将添加到 ScrollView 的内容容器 (#unity-content-container)。

创建 ScrollView

您可以使用__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary Builder、UXML 或 C# 创建 ScrollView。以下 C# 示例将创建具有水平和垂直滚动功能的 ScrollView，其中包含一个标题标签和多个 Toggle 元素：

var scrollView = new ScrollView(ScrollViewMode.VerticalAndHorizontal);
scrollView.style.width = 250;
scrollView.style.height = 400;

scrollView.Add(new Label("List of checkboxes:"));

for (int i = 0; i < 100; ++i)
{
    var toggle = new UnityEngine.UIElements.Toggle()
    { text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." };
    scrollView.Add(toggle);
}

管理滚动条可见性

您可以指定滚动条的移动方向，是否显示水平或垂直滚动条，并控制滚动条的速度。

要在 UI Builder 中设置滚动条移动的方向，请在滚动视图 (ScrollView) 的检视面板 (Inspector) 窗口中为模式 (Mode) 选择以下选项之一：

• 垂直（默认）
• 水平
• 垂直和水平

要在 UI Builder 中设置滚动条的可见性，请在滚动视图 (ScrollView) 的检视面板 (Inspector) 窗口中，选择以下选项之一来设置水平滚动条可见性 (Horizontal Scroller Visibility) 或垂直滚动条可见性 (Vertical Scroller Visibility)：

• 自动（默认）
• 始终可见
• 隐藏

控制滚动速度

要控制滚动速度，请在 UI Builder、UXML 或 C# 代码中调整以下属性的值。该值越大，滚动速度越快。

• horizontal-page-size 控制使用键盘或屏幕上的滚动条按钮（箭头和控制柄）时的水平滚动速度。速度的计算方法是将页面大小乘以指定值。例如，值为 2 表示每次滚动移动的距离等于页面宽度的两倍。
• vertical-page-size 控制使用键盘或屏幕上的滚动条按钮（箭头和控制柄）时的垂直滚动速度。速度的计算方法是将页面大小乘以指定值。例如，值为 2 表示每次滚动移动的距离等于页面长度的两倍。
• mouse-wheel-scroll-size 控制使用鼠标滚轮时的滚动速度。速度的计算方法是将指定值除以 18，对应于默认的 18px 线高度。例如，如果将值设置为 36，则每次滚动移动的距离相当于两行内容。

注意：还可以通过覆盖 USS 内置变量 –unity-metrics-single_line-height 来控制使用鼠标滚轮时的滚动速度。mouse-wheel-scroll-size 属性优先于 –unity-metrics-single_line-height USS 变量。

ScrollView 中的换行元素

您可以将视觉元素放入 ScrollView 中，这样元素会按行显示。如果一行已满，元素会继续显示在下一行。

要在 ScrollView 中让元素的文本内容自动换行，请将 ScrollView 的内容容器 flex-direction 设置为 row，并将 flex-wrap 设置为 wrap。

在 USS 中：

.unity-scroll-view__content-container {
    flex-direction: row;
    flex-wrap: wrap;
}

在 C# 中：

scrollview.contentContainer.style.flexDirection = FlexDirection.Row;
scrollview.contentContainer.style.flexWrap = Wrap.Wrap;

在 ScrollView 中让元素的文本内容换行

要在 ScrollView 中让元素的文本内容换行，例如 Label 元素的文本，请执行以下操作：

1. 使用以下任意方法设置 Label 元素的样式：
   • 在 UI Builder 的 Label 的检视面板 (Inspector) 窗口中，选择文本 (Text) > 换行 (Wrap) > 普通 (normal)。
   • 将样式 white-space: normal; 应用于 USS、UXML 或 C# 中的 Label 元素。
2. 在 ScrollView 中创建一个 VisualElement 作为容器。ScrollView 中的原始容器元素没有设置边界（大小无限），因此文本无法正确换行。此容器 VisualElement 为文本提供了一个大小有限的空间，使文本能够在其中换行。
3. 将 Label 添加到 VisualElement 容器。

示例

• 在 ScrollView 中让文本换行此示例将演示如何使用样式将内容放在滚动视图中。

C# 类和命名空间

C# 类：ScrollView
命名空间：UnityEngine.UIElements
基类：VisualElement

成员 UXML 属性

此元素具有以下成员属性：

继承 UXML 属性

此元素从其基类继承以下属性：

此元素还从 VisualElement 继承以下属性：

USS 类

下表列出了所有 C# 公共属性名称及其相关的 USS 选择器。

还可以使用检视器中的匹配选择器 (Matching Selectors) 部分或 UI 工具包调试器来查看哪些 USS 选择器在其层级视图的每个级别上影响 VisualElement 的组件。

其他资源

• ListView
• Scroller