.NET MAUI 教程 | 使用 C# 生成第一个多平台应用

简介

目标

设置开发环境并生成第一个 .NET Multi-Platform App UI (.NET MAUI)应用。

先决条件

检查 Visual Studio 2022 的系统要求。

完成时间

10分钟 + 下载/安装时间

方案

在 Windows 和 Android 上运行的移动和桌面应用，它显示了一条消息: Hello, World!。

下载并安装

下载并安装 Visual Studio 2022。

下载 Visual Studio 2022

在安装过程中，应选择 .NET Multi-Platform App UI 开发工作负载。使用上面的链接时应预先正确选择所有先决条件，如下图所示:

已有 Visual Studio 2022?

如果已有 Visual Studio 2022，请确保它处于最新状态，并且已安装所需的工作负载:

选择 Windows 徽标键，键入 Visual Studio 安装程序，然后按“输入”。
如果出现提示，则请允许安装程序进行自我更新。
If an update for Visual Studio 2022 is available, an Update button will be shown. Select it to update before modifying the installation. This tutorial only works with Visual Studio 2022 17.12 and later versions.
找到 Visual Studio 2022 安装并选择修改。
选择 .NET Multi-Platform App UI 开发。
选择修改按钮。

Download and install the .NET SDK. After the download completes, launch the download to begin the install.

Download .NET 9 SDK x64 (Intel)
Download .NET 9 SDK Arm64 (Apple Silicon)

如果使用的是带有 Apple M1 或 M2 芯片的 Mac，则需要安装 Arm64 版本的 SDK。
下载和安装 VS Code:

下载 VS Code
打开 VS Code，并在 VS Code 的左侧活动栏中选择“扩展”按钮。在搜索栏中键入“MAUI”，选择 .NET MAUI，然后选择 .NET MAUI 扩展页上的“安装”按钮。

此扩展附带 C# 开发工具包和 C# 扩展，这些是运行 .NET MAUI 扩展所必需的。
运行以下命令，以打开新终端并安装 .NET MAUI 工作负载：
Terminal
```
sudo dotnet workload install maui
```
如果安装成功，则应该会看到类似于以下内容的输出:
Terminal
```
Successfully installed workload maui
```

检查是否已正确安装所有内容

设置环境后，打开新的 VS Code 终端。在工具栏中，选择“终端”，然后选择“新终端”。

在终端中，运行以下命令来检查安装。

Terminal

dotnet workload list

如果安装成功，则应该会看到类似于以下内容的输出:

Terminal

Installed Workload Id      Manifest Version      Installation Source
--------------------------------------------------------------------
maui                       8.0.82/8.0.100        SDK 8.0.400

Use `dotnet workload search` to find additional workloads to install.

遇到错误?

如果收到“未将 "dotnet" 识别为内部或外部命令”错误，请确保已打开新的 VS Code 终端。如果重启 VS Code 或重启计算机没有解决问题，请使用页面底部的“我遇到了问题”按钮以获取解决问题的帮助。

安装 Xcode

要生成.NET MAUI 应用，还需要:

Xcode 最新版本

To find the latest version of Xcode that is compatible with .NET MAUI, check this release version reference. Go to the Apple Tools column to find the latest compatible Xcode version.

一个 Apple ID

如果你没有 Apple ID，可以在 https://appleid.apple.com 创建一个。安装和登录 Xcode 需要 Apple ID。
安装 Xcode 后，必须打开 Xcode 并同意许可协议，然后安装可选组件（如果出现提示）。
当系统询问要面向哪些平台进行开发时，请选择平台 macOS 和 iOS，然后选择“下载并安装”。
运行以下命令，以打开新终端并安装 Xcode 命令行开发人员工具：
Terminal
```
xcode-select --install
```
当系统提示安装 Xcode 命令行开发人员工具时，请选择“安装”。最后，请同意许可协议。

如果一切正常，请选择下面的继续按钮以转到下一步。

创建应用

新建 .NET MAUI 应用:

打开 Visual Studio 2022。
选择创建新项目按钮。
在“创建新项目”窗口中，在搜索栏中键入“MAUI 应用”。选择“.NET MAUI App”模板，然后单击“下一步”按钮。
在“配置新项目”窗口中，输入“MyFirstMauiApp”作为项目名称，然后单击“下一步”按钮。
In the Additional information window, select .NET 9.0 in the Framework drop-down if not already selected and click the Create button.

Visual Studio 创建新项目。如果收到 Windows 安全中心警报，警告防火墙阻止了某些功能，请选择“允许访问”按钮。

等待 NuGet 包还原过程

NuGet 是一个包管理器，它将引入新应用的依赖项。

包还原过程将自动启动。请等候，直到 已还原 或就绪消息显示在屏幕左下角的状态栏中。

运行应用

本教程将首先重点介绍如何将 .NET MAUI 应用程序部署到本地 Windows 计算机。然后可以选择设置 Android 设备或仿真器。

在 Visual Studio 工具栏中，应默认将“Windows 计算机”视为调试目标。按“Windows 计算机”按钮生成并运行应用:

在正在运行的应用中，选择“单击这里”按钮几次，并观察按钮单击次数的计数是递增的:

恭喜，你已生成并运行第一个 .NET MAUI 应用! 使应用保持运行并继续学习本教程。

编辑代码

当使用 .NET MAUI 开发应用程序时，在调试应用程序时可使用 XAML 热重载。这意味着可以在应用程序运行时更改 XAML 用户界面(UI)，并且 UI 将自动更新。

返回到 Visual Studio，使应用保持运行状态。在“解决方案资源管理器”中，双击 MyFirstMauiApp 项目下的 MainPage.xaml 文件。如果看不到“解决方案资源管理器”窗格，请从主菜单中选择“视图”>“解决方案资源管理器”(或按 Ctrl+ALT+L)。

目前，第 17 行第二个 Label 的 Text 设置为 Hello, World!，如以下代码中所示:

MainPage.xaml

<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

将文本更新为 Hello, .NET MAUI!:

MainPage.xaml

<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

在你进行更改时，应用 UI 会自动更新。

使用 .NET MAUI 开发应用程序时，还可以使用 .NET 热重载重新加载 C# 代码。我们来修改应用程序中的逻辑，以在单击按钮时将计数增加 10 而不是 1。

打开 MainPage.xaml.cs (此文件嵌套在 MainPage.xaml 下，或者可以右键单击并从菜单中选择“查看代码”)。

该文件上的 OnCounterClicked 方法当前具有以下代码:

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

更新 count++;，让它按 10 递增，方法是将其更改为 count += 10;。

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

若要应用代码更改，请保存文件并在 Visual Studio 中选择热重载按钮，或选择 ALT+F10。