创建选项卡式菜单

版本： 2023.2+

选项卡式菜单广泛用于视频游戏和应用程序 UI 中，用于组织和呈现内容。Tab 和 TabView 是功能强大的控件，可简化创建选项卡式菜单的过程。

示例概述

此示例演示如何在示例中创建选项卡式菜单场景场景包含游戏的环境和菜单。将每个唯一的场景文件视为一个独特的关卡。在每个场景中，你放置你的环境、障碍物和装饰品，基本上是将你的游戏设计和构建成碎片。更多信息
请参阅术语表和自定义编辑器窗口。该菜单有三个选项卡。每个选项卡都显示某些内容。选择选项卡时，将显示与该选项卡关联的内容。该示例还使用视图数据键来保留“编辑器”窗口的 Tab 键顺序。

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

先决条件

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

• 选项卡视图
• 标签
• USS
• UI 生成器
• UXML的

创建 TabView

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

1. 使用任何模板在 Unity 中创建项目。

2. 在Assets文件夹中，创建一个名为TabbedMenu.uxml.

3. 双击TabbedMenu.uxml在 UI Builder 中打开它。

4. 将 TabView 从“库”拖动到“层次结构”面板。

5. 在检查器一个 Unity 窗口，显示有关当前选定游戏对象、资产或项目设置的信息，允许您检查和编辑值。更多信息
   请参阅术语表面板中，执行以下作：

   • 将视图数据键设置为TabbedMenu.
   • 选中“可重新排序”复选框。

添加选项卡和选项卡内容

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

1. 在 TabView 下，添加三个选项卡。

2. 在每个选项卡的“检查器”面板中，将“标签”设置为以下值：

   • London对于第一个选项卡
   • Paris对于第二个选项卡
   • Ottawa对于第三个选项卡

3. 将视图数据键设置为以下值：

   • LondonTab对于第一个选项卡
   • ParisTab对于第二个选项卡
   • OttawaTab对于第三个选项卡

4. 在“层次结构”面板的每个选项卡下，添加一个“标签”。

5. 在每个标签的“检查器”面板中，将“文本”设置为以下值：

   • London is the capital city of England对于第一个标签
   • Paris is the capital of France对于第二个标签
   • Ottawa is the capital of Canada对于第三个标签

定义选项卡式菜单样式

使用 USS 定义选项卡和选项卡内容的布局。您可以按照自己喜欢的方式设置选项卡和选项卡内容的样式。此示例为所选选项卡添加背景颜色并隐藏选项卡标题下划线。

1. 在Assets文件夹中，创建一个名为TabbedMenu.uss.

2. 打开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); */
   }
   

3. 双击TabbedMenu.uxml在 UI Builder 中打开它。

4. 在“样式表”面板中，选择“+”>“添加现有 USS”。

5. 选择您之前创建的 USS 文件。

6. 应用.tab-content到选项卡下的每个标签。

完成的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>

在游戏中使用选项卡式菜单

创建 UIDocument游戏对象Unity 场景中的基本对象，可以表示角色、道具、风景、相机、航路点等。游戏对象的功能由附加到它的组件定义。更多信息
请参阅术语表，并将UI文档添加为源资产。创建一个 MonoBehaviour 脚本，将选项卡式菜单附加到游戏。

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

2. 在Assets文件夹中，创建一个名为TabbedMenu.cs内容如下：

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

3. 在 SampleScene 中选择 UIDocument。

4. 在 检查器（Inspector） 窗口中，从 源资产（Source Asset） 列表中选择 TabbedMenu.uxml。

5. 选择TabbedMenu.cs从“添加元件”列表中。

6. 进入播放模式。

7. 选择不同的选项卡以查看不同的内容。

8. 拖动选项卡以重新排序它们。

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

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

1. 在Assets文件夹中，创建一个名为Editor.

2. 在Editor文件夹中，创建一个名为TabbedMenuEditorWindow.cs内容如下：

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

3. 在编辑器中，选择 窗口（Window） > 选项卡式菜单（Tabbbed Menu）。

4. 选择不同的选项卡以查看不同的内容。

5. 拖动选项卡以重新排序它们。

6. 关闭编辑器窗口并重新打开它。保存选项卡顺序。

其他资源

• 运行时 UI 入门
• 支持编辑器UI
• 查看数据持久性