跨平台开发入门：用 .NET MAUI 打造多端应用

跨平台开发入门：用 .NET MAUI 打造多端应用

一、引言

在当今数字化时代，用户希望能够在各种设备上无缝使用应用程序，这就对开发者提出了跨平台开发的需求。传统的跨平台开发方案往往需要开发者针对不同平台编写多套代码，不仅开发成本高，而且维护难度大。而 .NET MAUI（.NET Multi - platform App UI）的出现，为开发者提供了一种全新的解决方案，它允许开发者使用 C# 和 XAML 编写一次代码，即可在 iOS、Android、Windows、macOS 等多个平台上运行。本文将带你入门 .NET MAUI 开发，一步步打造一个简单的多端应用。

二、环境准备

（一）安装 Visual Studio

.NET MAUI 开发依赖于 Visual Studio。首先，从 Visual Studio 官方网站 下载并安装 Visual Studio 2022 或更高版本。在安装过程中，确保选择以下工作负载：

1. 使用 .NET 的移动开发：这将安装开发 Android 和 iOS 应用所需的工具和 SDK。
2. 使用 .NET 的桌面开发：用于开发 Windows 和 macOS 桌面应用。

（二）安装 .NET SDK

确保你安装了最新版本的 .NET SDK，.NET MAUI 需要 .NET 6.0 或更高版本。你可以从 .NET 官方网站 下载并安装适合你操作系统的 .NET SDK。

（三）配置开发环境

安装完成后，打开 Visual Studio，在“工具” -> “选项” -> “Xamarin” -> “其他”中，配置 Android SDK 和 iOS 开发环境。如果你要开发 iOS 应用，还需要安装 Xcode 并进行相关配置。

三、创建 .NET MAUI 项目

（一）启动 Visual Studio

打开 Visual Studio，选择“创建新项目”。

（二）选择项目模板

在搜索框中输入“MAUI”，选择“MAUI 应用”模板，然后点击“下一步”。

（三）配置项目信息

输入项目名称和保存位置，选择目标 .NET 版本（建议选择最新的 LTS 版本），然后点击“创建”。Visual Studio 将自动创建一个 .NET MAUI 项目，并打开项目结构。

四、项目结构介绍

（一）解决方案资源管理器

解决方案资源管理器显示了项目的整体结构，主要包含以下几个重要部分：

1. Platforms 文件夹：包含针对不同平台的特定配置和资源文件。例如，Android 文件夹包含 Android 平台的清单文件、图标等；iOS 文件夹包含 iOS 平台的配置文件和图标。
2. Resources 文件夹：包含应用程序的共享资源，如图片、字体、样式等。
3. Views 文件夹：存放应用程序的视图文件，通常是 XAML 文件，用于定义界面布局。
4. ViewModels 文件夹：如果采用 MVVM 模式开发，该文件夹用于存放视图模型类。
5. App.xaml 和 App.xaml.cs：应用程序的入口文件，负责初始化应用程序和设置主页面。

（二）默认代码分析

打开 App.xaml.cs 文件，代码如下：

using Microsoft.Maui.Controls;

namespace YourAppName
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new AppShell();
        }
    }
}

这段代码是应用程序的入口点，App 类继承自 Application 类，在构造函数中初始化 XAML 资源，并设置主页面为 AppShell。

打开 AppShell.xaml 文件，这是一个使用 Shell 导航的页面，提供了一种简单的方式来实现应用程序的导航结构。

五、界面设计

（一）创建简单界面

打开 Views 文件夹下的 MainPage.xaml 文件，默认的界面代码如下：

<?xml version="1.0" encoding="utf - 8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppName.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to .NET Multi - platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

这个界面包含一个滚动视图，其中有一个垂直栈布局，包含一个图片、两个标签和一个按钮。按钮的 Clicked 事件绑定到 OnCounterClicked 方法。

（二）代码 - 后台逻辑

打开 MainPage.xaml.cs 文件，查看 OnCounterClicked 方法的实现：

using Microsoft.Maui.Controls;

namespace YourAppName
{
    public partial class MainPage : ContentPage
    {
        int count = 0;

        public MainPage()
        {
            InitializeComponent();
        }

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

这个方法在按钮点击时被调用，每次点击都会增加计数器的值，并更新按钮的文本。

六、运行应用程序

（一）选择目标平台

在 Visual Studio 的工具栏中，选择要运行的目标平台，如 Android 模拟器、iOS 模拟器或 Windows 桌面。

（二）启动调试

按下 F5 键或点击“开始调试”按钮，Visual Studio 将编译项目并在所选平台上运行应用程序。你可以看到应用程序的界面，并测试按钮的点击功能。

七、添加功能和优化

（一）添加新页面

在 Views 文件夹中右键点击，选择“添加” -> “新项”，选择“Content Page (XAML)”，输入页面名称，如 SecondPage.xaml。在 AppShell.xaml 中添加导航项，代码如下：

<ShellContent
    Title="Second Page"
    ContentTemplate="{DataTemplate local:SecondPage}"
    Route="SecondPage" />

这样就可以在应用程序中导航到新页面。

（二）数据绑定

使用数据绑定可以将界面元素与数据模型绑定在一起，实现数据的自动更新。例如，创建一个简单的数据模型类：

public class MyDataModel
{
    public string Name { get; set; } = "John Doe";
    public int Age { get; set; } = 30;
}

在 MainPage.xaml 中进行数据绑定：

<Label Text="{Binding Name}" />
<Label Text="{Binding Age}" />

在 MainPage.xaml.cs 中设置数据上下文：

public MainPage()
{
    InitializeComponent();
    BindingContext = new MyDataModel();
}

八、总结

通过以上步骤，你已经入门了 .NET MAUI 跨平台开发，学会了如何创建项目、设计界面、添加功能和运行应用程序。.NET MAUI 提供了强大的跨平台开发能力，让你可以使用熟悉的 C# 和 XAML 语言，快速打造出高质量的多端应用。随着不断的学习和实践，你可以进一步探索 .NET MAUI 的更多功能，如自定义控件、网络请求、数据库操作等，开发出更加复杂和实用的应用程序。