介绍

  • 5 分钟

借助 .NET MAUI 版式面板，可在各种设备上为应用程序创建一致的用户界面。

假设你正在构建一个小费计算器应用程序，计划在许多计算机和设备上部署该应用程序。 每个设备的屏幕大小和像素密度可以不同。 目标是使应用程序在所有设备上看起来尽可能相似。 希望避免手动计算每个屏幕尺寸的视图大小和位置。 .NET MAUI 包含一个可执行这些计算的布局管理系统。 可以将视图放在版式面板中，这些面板会自动管理其子视图的大小和位置。 使用面板，可以更轻松地跨不同设备创建一致的用户界面。

在本模块中，你将构建一个在不同设备上看起来相似的 .NET MAUI 应用程序。 首先设置视图的首选大小和位置。 然后，使用 StackLayout 垂直排列视图。 接下来，使用 Grid 将视图放置在行和列中。 该模块结束时，你就会拥有一个在每种设备类型和屏幕大小上看上去一致的 .NET MAUI 应用程序。

学习目标

在本模块中，你将：

  • 在应用中排列用户界面元素并设置其大小。
  • 使用 StackLayout 在垂直或水平列表中显示视图。
  • 使用 Grid 以行和列显示视图。`

先决条件

  • 安装有 .NET MAUI 工作负载的 Visual Studio 2022
  • 可选：安装了 .NET MAUI 扩展的 Visual Studio Code 和安装了 .NET MAUI 工作负载的 .NET SDK
  • 熟悉 C# 和 .NET

.NET MAUI 开发的要求

要使用 .NET 8 创建 .NET MAUI 应用，需要安装已安装以下工作负载的 Visual Studio 版本 17.8 或更高版本：

  • .NET Multi-Platform App UI 开发

此外，如果要生成 .NET MAUI Blazor 应用，必须安装 ASP.NET 和 Web 开发工作负载。

有关设置的演练，请参阅文档。

使用 Visual Studio Code 进行开发

如果要在 macOS 或 Linux 上进行开发，则需要安装 Visual Studio Code 和 .NET MAUI 扩展，以及 .NET SDK 和 .NET MAUI 工作负载。 有关设置的演练，请参阅文档。