TabView

您可以在 TabView 元素中对多个 Tab 元素进行分组，从而创建基于 Tab 的导航系统。

创建 TabView

您可以使用__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary Builder、UXML 或 C# 创建 TabView。

要使用 C# 创建 TabView，请创建一个 TabView 对象的新实例，然后向其添加 Tab 元素。例如：

var tabView = new TabView("Title text");
var tab1 = new Tab("Tab 1");
var tab2 = new Tab("Tab 2");
var tab3 = new Tab("Tab 3");
tabView.Add(tab1);
tabView.Add(tab2);
tabView.Add(tab3);

使选项卡可重新排序

要使选项卡可通过 TabView 重新排序，请将 reorderable 属性设置为 true。

要在编辑器 UI 中保留 TabView 的 Tab 顺序，请为 TabView 及其包含的 Tab 元素分配唯一 view-data-key。view-data-key 可存储选项卡的状态。如果将 view-data-key 留空，则重新加载文档时选项卡状态不会持续存在。有关更多信息，请参阅 View Data 持久性。

示例

以下 UXML 示例将使用 Tab 创建 TabView：

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <TabView>
       <Tab label="UXML Tab A">
           <Label text="UXML tab: This is some content for the first Tab." />
       </Tab>
       <Tab label="UXML Tab B">
           <Label text="UXML tab: This is some content for the second Tab." />
       </Tab>
    </TabView>
</UXML>

以下 C# 示例说明了 TabView 及其 Tab 的一些可自定义功能：

/// <sample>
// Create a TabView with Tabs that only contains a label.
var csharpTabViewWithLabels = new TabView() { style = { marginTop = 15 } }; // marginTop not required, only for demonstration purposes.
var tabOne = new Tab("One");
tabOne.Add(new Label("Tab with labels only: This is some content for the first Tab.") { style = { marginTop = 10 } });
csharpTabViewWithLabels.Add(tabOne);
var tabTwo = new Tab("Two");
tabTwo.Add(new Label("Tab with labels only: This is some content for the second Tab.") { style = { marginTop = 10 } });
csharpTabViewWithLabels.Add(tabTwo);
container.Add(csharpTabViewWithLabels);

// Create a TabView with Tabs that only contains an icon.
var csharpTabViewWithIcons = new TabView() { style = { marginTop = 15 } }; // marginTop not required, only for demonstration purposes.
var tabIconConnect = new Tab(EditorGUIUtility.FindTexture("CloudConnect"));
tabIconConnect.Add(new Label("Tab with icons only: This is some content for the first Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIcons.Add(tabIconConnect);
var tabIconStore = new Tab(EditorGUIUtility.FindTexture("Asset Store"));
tabIconStore.Add(new Label("Tab with icons only: This is some content for the second Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIcons.Add(tabIconStore);
container.Add(csharpTabViewWithIcons);

// Create a TabView with Tabs that only contains an icon and a label.
var csharpTabViewWithIconsAndLabels = new TabView() { style = { marginTop = 15 } }; // marginTop not required, only for demonstration purposes.
var tabConnect = new Tab("Connect", EditorGUIUtility.FindTexture("CloudConnect"));
tabConnect.Add(new Label("Tab with an icon and a labels: This is some content for the first Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIconsAndLabels.Add(tabConnect);
var tabStore = new Tab("Store", EditorGUIUtility.FindTexture("Asset Store"));
tabStore.Add(new Label("Tab with an icon and a labels: This is some content for the second Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIconsAndLabels.Add(tabStore);
container.Add(csharpTabViewWithIconsAndLabels);

// Create a TabView that allows re-ordering of the tabs.
var csharpReorderableTabView = new TabView() { reorderable = true, style = { marginTop = 10 } }; // marginTop not required, only for demonstration purposes.
var tabA = new Tab("Tab A");
tabA.Add(new Label("Reorderable tabs: This is some content for Tab A") { style = { marginTop = 10 } });
csharpReorderableTabView.Add(tabA);
var tabB = new Tab("Tab B");
tabB.Add(new Label("Reorderable tabs: This is some content for Tab B") { style = { marginTop = 10 } });
csharpReorderableTabView.Add(tabB);
var tabC = new Tab("Tab C");
tabC.Add(new Label("Reorderable tabs: This is some content for Tab C") { style = { marginTop = 10 } });
csharpReorderableTabView.Add(tabC);
container.Add(csharpReorderableTabView);

// Create a TabView with closeable tabs.
var closeTabInfoLabel = new Label($"Last tab closed: None");
void UpdateLabel(string newLabel) => closeTabInfoLabel.text = $"Last tab closed: {newLabel}";
var cSharpCloseableTabs = new TabView() { style = { marginTop = 10 } }; // marginTop not required, only for demonstration purposes.
var closeableTabA = new Tab("Title A") { closeable = true };
closeableTabA.closed += (tab) => { UpdateLabel(tab.label); };
closeableTabA.Add(new Label("Closeable tabs: This is some content for Tab A") { style = { marginTop = 10 } });
cSharpCloseableTabs.Add(closeableTabA);
var closeableTabB = new Tab("Title B") { closeable = true };
closeableTabB.closed += (tab) => { UpdateLabel(tab.label); };
closeableTabB.Add(new Label("Closeable tabs: This is some content for Tab B") { style = { marginTop = 10 } });
cSharpCloseableTabs.Add(closeableTabB);
var closeableTabC = new Tab("Title C") { closeable = true };
closeableTabC.closed += (tab) => { UpdateLabel(tab.label); };
closeableTabC.Add(new Label("Closeable tabs: This is some content for Tab C") { style = { marginTop = 10 } });
cSharpCloseableTabs.Add(closeableTabC);
container.Add(cSharpCloseableTabs);
container.Add(closeTabInfoLabel);

// Create a TabView and apply custom styling to specific areas of their tabs.
var csharpCustomStyledTabView = new TabView() { style = { marginTop = 15 }, classList = { "some-styled-class" }}; // marginTop not required, only for demonstration purposes.
var customStyledTabOne = new Tab("One");
customStyledTabOne.Add(new Label("Custom styled tabs: This is some content for the first Tab."));
csharpCustomStyledTabView.Add(customStyledTabOne);
var customStyledTabTwo = new Tab("Two");
customStyledTabTwo.Add(new Label("Custom styled tabs: This is some content for the second Tab."));
csharpCustomStyledTabView.Add(customStyledTabTwo);
container.Add(csharpCustomStyledTabView);
/// </sample>

要在 Unity 中实时试用此示例，请转到窗口 (Window) > UI 工具包 (UI Toolkit) > 示例 (Samples)。

有关更多示例，请参阅以下内容：

-创建选项卡式菜单。

C# 基类和命名空间

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

成员 UXML 属性

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

名称	类型	描述
`reorderable`	`boolean`	为选项卡添加拖动支持的属性。默认值为 `false`。将此值设置为 `true` 可允许用户在选项卡视图中重新对选项卡进行排序。

继承 UXML 属性

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

名称	类型	描述
`focusable`	`boolean`	如果元素可以聚焦，则为 true。
`tabindex`	`int`	用于对焦点环中可获得焦点的元素排序的整数。必须大于或等于零。

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

名称	类型	描述
`content-container`	`string`	向其添加子元素，通常与元素本身相同。
`data-source`	`Object`	为此 VisualElement 分配一个数据源，此数据源将覆盖任何已继承的数据源。此数据源由所有子项继承。
`data-source-path`	`string`	从数据源到值的路径。
`data-source-type`	`System.Type`	可分配给此 VisualElement 的可能数据源的类型。仅当在设计时无法指定有效数据源时，UI Builder 才使用此信息作为补全数据源路径字段的提示。
`language-direction`	`UIElements.LanguageDirection`	指示元素文本的方向性。该值将传播到元素的子项。将 languageDirection 设置为 RTL，即可通过反转文本、处理换行和单词自动换行的方式，提供对从右到左 (RTL) 语言的基本支持。但是，它不提供全面的 RTL 支持，因为这需要文本整形（包括字符重新排序）和 OpenType 字体功能支持。未来更新计划提供全面的 RTL 支持，这将涉及额外的 API 来处理语言、脚本和字体功能规范。要增强此属性的 RTL 功能，用户可以在 Unity 资源商店中探索可用的第三方插件，并使用 `ITextElementExperimentalFeatures.renderedText`
`name`	`string`	此 VisualElement 的名称。使用此属性可编写针对特定元素的 USS 选择器。标准做法是为元素指定唯一名称。
`picking-mode`	`UIElements.PickingMode`	确定是否可以在 mouseEvents 或 `IPanel.Pick` 查询期间选择此元素。
`style`	`string`	设置 `VisualElement` 样式值。
`tooltip`	`string`	用户将光标悬停在元素上一小段时间后信息框内显示的文本。仅在编辑器 UI 中受支持。
`usage-hints`	`UIElements.UsageHints`	用于指定 `VisualElement` 高级预期使用模式的提示值组合。仅当 `VisualElement` 尚未成为 `Panel` 的一部分时，才能设置此属性。一旦成为 `Panel` 的一部分，此属性实际上就变为只读，尝试更改此属性将显示异常。适当的 `UsageHints` 规范会促使系统根据预期的使用模式，做出更好的决策，以处理或加速某些操作。请注意，这些提示不会影响行为或视觉效果，只会影响面板及其元素的整体性能。建议始终考虑指定适当的 `UsageHints`，但请记住，在某些情况下（例如，由于目标平台上的硬件限制），某些 `UsageHints` 可能会在内部被忽略。
`view-data-key`	`string`	用于 View Data 持久性，例如树展开状态、滚动位置或缩放级别。此键用于保存和加载 View Data 存储中的视图数据。如果未设置此键，则会对关联的 `VisualElement` 禁用持久性。有关更多信息，请参阅 View Data 持久性。

USS 类

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

C# 属性	USS 选择器	描述
`ussClassName`	`.unity-tab-view`	此类型元素的 USS 类名称。
`contentContainerUssClassName`	`.unity-tab-view__content-container`	此类型内容容器的 USS 类名称。
`reorderableUssClassName`	`.unity-tab-view__reorderable`	可重新排序选项卡视图的 USS 类名称。
`verticalUssClassName`	`.unity-tab-view__vertical`	垂直选项卡视图的 USS 类名称。
`disabledUssClassName`	`.unity-disabled`	本地被禁用元素的 USS 类名称。

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

其他资源

Tab

TagField

Unity 手册