烂翻译系列之MAUI——Shell 概述

.NET Multi-platform App UI (.NET MAUI) Shell reduces the complexity of app development by providing the fundamental features that most apps require, including:

.NET 多平台应用程序用户界面(.NET MAUI) Shell 通过提供大多数应用程序所需的基本功能，降低了应用程序开发的复杂性，包括:

• A single place to describe the visual hierarchy of an app.  描述应用程序视觉层次结构的单一位置。
• A common navigation user experience.  常见的导航用户体验。
• A URI-based navigation scheme that permits navigation to any page in the app.  基于 URI 的导航方案，允许导航到应用程序中的任何页面。
• An integrated search handler.  集成的搜索处理程序。

App visual hierarchy

应用视觉对象层次结构

In a .NET MAUI Shell app, the visual hierarchy of the app is described in a class that subclasses the Shell class. This class can consist of three main hierarchical objects:

在一个.NET MAUI Shell 应用程序，应用程序的视觉层次结构是在子Shell 类中描述的。此类可以包含三个主要的层次结构对象：

1. FlyoutItem or TabBar. A FlyoutItem represents one or more items in the flyout, and should be used when the navigation pattern for the app requires a flyout. A TabBar represents the bottom tab bar, and should be used when the navigation pattern for the app begins with bottom tabs and doesn't require a flyout.  FlyoutItem或TabBar。FlyoutItem 代表弹出中的一个或多个项目，应该在应用程序的导航模式需要弹出时使用。TabBar 表示底部选项卡栏，应该在应用程序的导航模式以底部选项卡开始并且不需要弹出时使用。
2. Tab, which represents grouped content, navigable by bottom tabs.  Tab表示分组内容，可通过底部选项卡导航。
3. ShellContent, which represents the ContentPage objects for each tab.  ShellContent表示每个选项卡的 ContentPage 对象。

These objects don't represent any user interface, but rather the organization of the app's visual hierarchy. Shell will take these objects and produce the navigation user interface for the content.

这些对象并不表示任何用户界面，而是应用程序视觉层次结构的组织。Shell 将获取这些对象并为内容生成导航用户界面。

---

 Note  备注

Pages are created on demand in Shell apps, in response to navigation.

页面在 Shell 应用中按需创建，以响应导航。

---

For more information, see Create a .NET MAUI Shell app.

有关详细信息，请参阅 创建 .NET MAUI Shell 应用。

Navigation user experience

导航用户体验

The navigation experience provided by .NET MAUI Shell is based on flyouts and tabs. The top level of navigation in a Shell app is either a flyout or a bottom tab bar, depending on the navigation requirements of the app. The following example shows an app where the top level of navigation is a flyout:

.NET MAUI Shell 提供的导航体验基于浮出控件和选项卡。 Shell 应用程序的顶层导航可以是浮出式的，也可以是底部的选项卡栏，这取决于应用程序的导航要求。以下示例演示一个应用，其顶部导航是浮出控件： 

 

In this example, some flyout items are duplicated as tab bar items. However, there are also items that can only be accessed from the flyout. Selecting a flyout item results in the bottom tab that represents the item being selected and displayed:

在此示例中，一些弹出项被复制为选项卡栏项。然而，也有一些项目只能从浮出控件访问。选择一个弹出项会在底部的选项卡中显示正在选择和显示的项目：

 

---

Note  备注

When the flyout isn't open the bottom tab bar can be considered to be the top level of navigation in the app.

当浮出控件未打开时，可以将底部选项卡栏视为应用中的顶级导航。

---

Each tab on the tab bar displays a ContentPage. However, if a bottom tab contains more than one page, the pages are navigable by the top tab bar:

选项卡栏上的每个选项卡都显示一个 ContentPage。但是，如果底部选项卡包含多个页面，则页面可通过顶部选项卡栏进行导航：

 

 

Within each tab, additional ContentPage objects that are known as detail pages, can be navigated to:

在每个选项卡中，可以导航到称为详细信息页的其他 ContentPage 对象：

 

Shell uses a URI-based navigation experience that uses routes to navigate to any page in the app, without having to follow a set navigation hierarchy. In addition, it also provides the ability to navigate backwards without having to visit all of the pages on the navigation stack. For more information, see .NET MAUI Shell navigation.

Shell 使用基于 URI 的导航体验，它使用路由导航到应用程序中的任何页面，而无需遵循一组导航层次结构。此外，它还能够向后导航，不必访问导航堆栈上的所有页面。 有关详细信息，请参阅 .NET MAUI Shell 导航。

Search

搜索

.NET MAUI Shell includes integrated search functionality that's provided by the SearchHandler class. Search capability can be added to a page by adding a subclassed SearchHandler object to it. This results in a search box being added at the top of the page. When data is entered into the search box, the search suggestions area is populated with data:

.NET MAUI Shell 包含由 SearchHandler 类提供的集成搜索功能。 可以通过向页面添加 SearchHandler  的子类对象来向其添加搜索功能。 这会将搜索框添加到页面顶部。 将数据输入到搜索框后，数据将填充搜索建议区域：

 

 

 

Then, when a result is selected from the search suggestions area, custom logic can be executed such as navigating to a detail page.

然后，当从搜索建议区域中选中某结果时，可以执行自定义逻辑，例如导航到详细信息页面。

For more information, see .NET MAUI Shell search.

有关详细信息，请参阅 .NET MAUI Shell 搜索。