版本：2023.2+
选项卡菜单在视频游戏和应用程序__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary 中广泛应用于组织和呈现内容。Tab 和 TabView 是强大的控件，可简化创建选项卡式菜单的过程。
此示例演示了如何在示例场景和自定义 Editor 窗口中创建选项卡式菜单。菜单有三个选项卡。每个选项卡都显示某些内容。当您选择一个选项卡时，会显示与该选项卡关联的内容。此示例还使用视图数据键来保留 Editor 窗口的选项卡顺序。
您可以在此 GitHub 代码仓库中找到此示例创建的完整文件。
本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发者。在开始之前，请熟悉以下内容：
创建 UI 文档并向其中添加 TabView。
使用任何模板在 Unity 中创建项目。
在 Assets 文件夹中，创建一个名为 TabbedMenu.uxml 的 UI 文档。
双击 TabbedMenu.uxml 可在 UI Builder 中将其打开。
将 TabView 从库 (Library) 拖到层级视图 (Hierarchy) 面板上。
在 TabView 的检视 (Inspector) 面板中，执行以下操作：
TabbedMenu。将三个选项卡添加到 TabView。对于每个选项卡，添加标签作为子元素，以显示选项卡内容。
在 TabView 下，添加三个选项卡。
在每个选项卡的检视 (Inspector) 面板中，将标签 (Label) 设置为以下值：
London
Paris
Ottawa
将视图数据键 (View Data Key) 设置为以下值：
LondonTab
ParisTab
OttawaTab
在层级视图 (Hierarchy) 面板的每个选项卡下，添加一个标签。
在每个标签的检视 (Inspector) 面板中，将文本 (Text) 设置为以下值：
London is the capital city of England
Paris is the capital of France
Ottawa is the capital of Canada
使用 USS 定义选项卡和选项卡内容的布局。可以按喜欢的方式设置选项卡和选项卡内容的样式。此示例为所选选项卡添加背景颜色并隐藏选项卡标题下划线。
在 Assets 文件夹中，创建一个名为 TabbedMenu.uss 的样式表。
打开 TabbedMenu.uss 并添加以下样式规则：
/* Style for tabs */
.unity-tab__header {
background-color: rgb(229, 223, 223);
-unity-font-style: bold;
font-size: 14px;
}
/* Adds background color for the selected tab */
.unity-tab__header:checked {
background-color: rgb(173, 166, 166);
}
/* Style for tabContent */
.tab-content {
background-color: rgb(255, 255, 255);
font-size: 20px;
}
/* By default, each tab header has an underline. This hides the header underline */
.unity-tab__header-underline {
opacity: 0; /* or rgba(0, 0, 0, 0); */
}
双击 TabbedMenu.uxml 可在 UI Builder 中打开。
在 StyleSheets 面板中，选择 + > 添加现有的 USS (Add Existing USS)。
选择先前创建的 USS 文件。
将 .tab-content 应用于 Tab 下的每个标签。
完成的 TabbedMenu.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="False">
/* Your src might look different. If you save your UXML in UI Builder, USS file is referenced by the file location, fileID and guid. */
<Style src="TabbedMenu.uss" />
<ui:TabView reorderable="true" view-data-key="TabbedMenu">
<ui:Tab label="London" view-data-key="LondonTab">
<ui:Label text="London is the capital city of England" class="tab-content"/>
</ui:Tab>
<ui:Tab label="Paris" view-data-key="ParisTab">
<ui:Label text="Paris is the capital of France" class="tab-content"/>
</ui:Tab>
<ui:Tab label="Ottawa" view-data-key="OttawaTab">
<ui:Label text="Ottawa is the capital of Canada" class="tab-content"/>
</ui:Tab>
</ui:TabView>
</ui:UXML>
在 SampleScene 中创建一个 UIDocument 游戏对象，并将 UI 文档添加为源资源。创建一个 MonoBehaviour 脚本，将选项卡式菜单附加到游戏。
在 SampleScene 中，选择游戏对象 (GameObject) > UI 工具箱 (UI Toolkit) > UI 文件 (UI Document)。
在 Assets 文件夹中，创建一个名称为 TabbedMenu.cs 并包含以下内容的 C# 脚本：
using UnityEngine;
using UnityEngine.UIElements;
//Inherits from class `MonoBehaviour`. This makes it attachable to a game object as a component.
public class TabbedMenu : MonoBehaviour
{
private void OnEnable()
{
UIDocument menu = GetComponent<UIDocument>();
VisualElement root = menu.rootVisualElement;
}
}
在 SampleScene 中选择 UIDocument。
在检视面板 (Inspector) 窗口中，从源资源 (Source Asset) 列表中选择 TabbedMenu.uxml。
从添加组件 (Add Component) 列表中选择 TabbedMenu.cs。
进入播放模式。
选择不同的选项卡可以查看不同的内容。
拖动选项卡可重新排序。
创建自定义 Editor 窗口，并在其中加入选项卡式菜单。可以拖动选项卡来重新排序。关闭并重新打开 Editor 窗口时会保存选项卡顺序。
在 Assets 文件夹中，创建一个名为 Editor 的文件夹。
在 Editor 文件夹中，创建一个名为 TabbedMenuEditorWindow.cs 并包含以下内容的 C# 脚本：
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public class TabbedMenuEditorWindow : EditorWindow
{
[MenuItem("Window/Tabbed Menu")]
public static void ShowExample()
{
TabbedMenuEditorWindow wnd = GetWindow<TabbedMenuEditorWindow>();
wnd.titleContent = new GUIContent("Tabbed Menu");
}
public void OnEnable()
{
VisualElement root = rootVisualElement;
// Import UXML
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/TabbedMenu.uxml");
VisualElement tabbedMenuUXML = visualTree.Instantiate();
root.Add(tabbedMenuUXML);
}
}
在编辑器中，选择窗口 (Window) > 选项卡式菜单 (Tabbed Menu)。
选择不同的选项卡可以查看不同的内容。
拖动选项卡可重新排序。
关闭 Editor 窗口并重新打开。选项卡订单已保存。