创建选项卡菜单

版本 2023.2+

选项卡菜单广泛用于视频游戏和应用程序UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。更多信息
参见术语表以组织和呈现内容。Tab 和 TabView 是强大的控件，可以简化创建选项卡菜单的过程。

示例概述

此示例演示如何在示例场景场景包含游戏环境和菜单。可以将每个唯一的场景文件视为一个唯一的关卡。在每个场景中，您可以放置环境、障碍物和装饰，从本质上讲，将游戏分块设计和构建。更多信息
参见术语表和自定义编辑器窗口中创建选项卡菜单。该菜单有三个选项卡。每个选项卡都显示特定的内容。选择选项卡时，将显示与该选项卡关联的内容。该示例还使用视图数据键来保留编辑器窗口的选项卡顺序。

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

先决条件

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

创建 TabView

创建一个 UI 文档并向其中添加一个 TabView。

在 Unity 中使用任何模板创建一个项目。
在Assets文件夹中，创建一个名为TabbedMenu.uxml的 UI 文档。
双击TabbedMenu.uxml在 UI 构建器中打开它。
从库中将一个 TabView 拖到层次结构面板。
在TabView 的检查器一个 Unity 窗口，显示有关当前选定 GameObject、资产或项目设置的信息，允许您检查和编辑值。更多信息
参见术语表面板中，执行以下操作
- 将视图数据键设置为TabbedMenu。
- 选中可重新排序复选框。

添加选项卡和选项卡内容

向 TabView 添加三个选项卡。对于每个选项卡，添加一个标签作为其子元素，显示选项卡内容。

在 TabView 下，添加三个 Tab。
在每个 Tab 的检查器面板中，将标签设置为以下值
- 第一个 Tab 为London
- 第二个 Tab 为Paris
- 第三个 Tab 为Ottawa
将视图数据键设置为以下值
- 第一个 Tab 为LondonTab
- 第二个 Tab 为ParisTab
- 第三个 Tab 为OttawaTab
在层次结构面板中，在每个 Tab 下添加一个 Label。
在每个 Label 的检查器面板中，将文本设置为以下值
- 第一个 Label 为London is the capital city of England
- 第二个 Label 为Paris is the capital of France
- 第三个 Label 为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 构建器中打开它。
在样式表面板中，选择+ > 添加现有 USS。
选择您之前创建的 USS 文件。
将.tab-content应用到每个 Tab 下的 Label。

完成的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游戏对象Unity 场景中的基本对象，可以表示角色、道具、场景、摄像机、路点等。游戏对象的函数由附加到它的组件定义。更多信息
参见术语表，并将 UI 文档作为源资产添加。创建一个 MonoBehaviour 脚本，将选项卡菜单附加到游戏中。

在 SampleScene 中，选择游戏对象 > UI 工具包 > UI 文档。

在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。
在检查器窗口中，从源资产列表中选择TabbedMenu.uxml。
从添加组件列表中选择TabbedMenu.cs。
进入播放模式。
选择不同的选项卡以查看不同的内容。
拖动选项卡以重新排序它们。

在编辑器窗口中使用选项卡菜单

创建一个自定义编辑器窗口并将选项卡菜单添加到其中。您可以拖动选项卡以重新排序它们。当您关闭并重新打开编辑器窗口时，选项卡顺序将被保存。

在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);
    }
}

在编辑器中，选择窗口 > 选项卡菜单。
选择不同的选项卡以查看不同的内容。
拖动选项卡以重新排序它们。
关闭编辑器窗口并重新打开它。选项卡顺序已保存。

其他资源

将内容包装在滚动视图中

创建弹出窗口

Unity 手册

创建选项卡菜单

示例概述

先决条件

创建 TabView

添加选项卡和选项卡内容

定义选项卡菜单样式

在游戏中使用选项卡菜单

在编辑器窗口中使用选项卡菜单

其他资源