.NET MAUI 基础知识

什么是 .NET MAUI？

.NET Multi-platform App UI (.NET MAUI) 是微软推出的新一代跨平台UI框架，是Xamarin.Forms的继任者。它允许开发者使用单一的代码库和项目结构，创建可在Android、iOS、macOS和Windows上运行的本地应用程序。.NET MAUI采用C#和XAML作为开发语言，为开发者提供了统一的编程模型和API，简化了跨平台应用开发流程。

MAUI的核心特点

1. 单一项目结构：不同于Xamarin.Forms的多项目解决方案，MAUI采用单一项目结构，简化了开发和维护过程。
2. 统一控件：提供一套统一的控件库，这些控件在不同平台上保持一致的行为和外观。
3. 平台特定API集成：允许直接从共享代码中访问平台特定API，无需编写自定义渲染器。
4. 现代化架构：基于.NET 6及更高版本构建，支持最新的C#特性。
5. 原生性能：应用程序编译为平台原生代码，提供接近原生的性能体验。

上图出自微软官方学习路线

与Xamarin.Forms的区别

主要改进点包括：

1. 项目结构：从多项目结构简化为单一项目结构
2. 渲染系统：从渲染器架构升级为更灵活的处理程序架构
3. 构建系统：整合到.NET统一构建系统中
4. 依赖注入：内置现代依赖注入框架
5. 生命周期管理：改进的应用和页面生命周期管理
6. 热重载：增强的XAML热重载支持

开发环境搭建

要开始.NET MAUI开发，需要设置适当的开发环境。以下是详细的步骤：

安装Visual Studio 2022

Visual Studio 2022是开发MAUI应用的首选IDE，它提供了完整的工具集和集成支持。

1. 下载并安装Visual Studio 2022（推荐使用Community或更高版本）

安装Visual Studio 2022可以参考博文对于C#初学者在学习前的准备

2. 在安装过程中，选择".NET Multi-platform App UI开发"工作负载

安装必要组件

在Visual Studio安装程序中，确保以下组件被选中：

1. .NET MAUI（必选）
2. Android SDK设置（适用于Android开发）
3. iOS和MacOS开发工具（适用于iOS/MacOS开发）
4. 通用Windows平台开发（适用于Windows开发）

配置Android开发环境

要开发Android应用，需要完成以下设置：

1. 安装Android SDK：默认情况下，Visual Studio会安装必要的Android SDK
2. 配置Android模拟器：
   • 打开Visual Studio中的"Android设备管理器"
   • 创建新的设备映像（推荐API 30或更高版本）
   • 配置模拟器性能选项
     
     打开样式如下
     

当我们存在项目时调试时就可以直接运行

无法创建模拟器时参考如何使用Android模拟器（Hyper-V和AEHD）启用硬件加速
如果模拟器无法使用可以尝试使用真机调试（在手机中打开开发者模式）

3. 配置真机调试（可选）：
   • 在Android设备上启用"开发者选项"和"USB调试"
   • 安装适当的USB驱动程序
   • 通过USB连接设备并允许调试

调试时可以打开xaml实时预览窗口进行查看

配置iOS开发环境

iOS开发需要一台Mac计算机和以下组件：

1. 安装最新版Xcode：从Mac App Store下载并安装
2. 设置远程配对：
   • 在Mac上安装Apple的远程工具
   • 在Visual Studio中配置Mac连接

如果您使用Mac开发，则可以直接在Mac上安装Visual Studio for Mac并进行MAUI开发。

验证安装

完成安装后，可以通过以下步骤验证环境：

// 在命令行运行以下命令以检查.NET MAUI工作负载是否正确安装
dotnet workload list
// 应该能看到maui工作负载已安装的信息

创建第一个MAUI应用

让我们创建一个简单的Hello World应用来理解MAUI项目结构和基本概念。

创建新项目

1. 打开Visual Studio 2022
2. 选择"创建新项目"
3. 在搜索框中输入"MAUI"
4. 选择".NET MAUI应用"模板
5. 点击"下一步"
6. 输入项目名称（例如"MauiHelloWorld"）

注意创建MAUI项目目录时不要包含中文

7. 选择保存位置
8. 点击"创建"

MAUI项目结构解析

创建的MAUI项目有以下主要文件和文件夹：

MauiHelloWorld/
│
├── Platforms/            # 平台特定代码
│   ├── Android/         # Android特定代码
│   ├── iOS/             # iOS特定代码
│   ├── MacCatalyst/     # MacOS特定代码
│   └── Windows/         # Windows特定代码
│
├── Resources/            # 应用资源
│   ├── AppIcon/         # 应用图标
│   ├── Fonts/           # 字体文件
│   ├── Images/          # 图像资源
│   ├── Raw/             # 其他资源
│   └── Styles/          # 样式定义
│
├── App.xaml              # 应用定义文件
├── App.xaml.cs           # 应用代码
├── AppShell.xaml         # Shell UI定义
├── AppShell.xaml.cs      # Shell UI代码
├── MainPage.xaml         # 主页面UI定义
├── MainPage.xaml.cs      # 主页面代码
└── MauiProgram.cs        # 应用配置和启动

理解关键文件

1. MauiProgram.cs：应用程序的入口点，配置服务和应用生命周期

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        // 创建MauiApp构建器
        var builder = MauiApp.CreateBuilder();
        
        // 配置应用程序
        builder
            .UseMauiApp<App>() // 使用App类作为主应用程序类
            .ConfigureFonts(fonts =>
            {
                // 配置应用程序字体
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

        // 在这里注册服务（依赖注入）
        // builder.Services.AddSingleton<IMyService, MyService>();

        // 构建并返回MauiApp实例
        return builder.Build();
    }
}

2. App.xaml/App.xaml.cs：定义应用程序资源和应用程序级行为

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiHelloWorld"
             x:Class="MauiHelloWorld.App">
    <Application.Resources>
        <ResourceDictionary>
            <!-- 应用级资源和样式 -->
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

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

        // 设置应用程序的主页面
        MainPage = new AppShell();
    }

    // 应用程序生命周期方法
    protected override void OnStart()
    {
        // 当应用启动时调用
        base.OnStart();
    }

    protected override void OnSleep()
    {
        // 当应用进入后台时调用
        base.OnSleep();
    }

    protected override void OnResume()
    {
        // 当应用从后台恢复时调用
        base.OnResume();
    }
}

3. AppShell.xaml/AppShell.xaml.cs：定义应用程序的Shell架构（导航结构）

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MauiHelloWorld"
       x:Class="MauiHelloWorld.AppShell"
       Title="MauiHelloWorld">
    
    <!-- 定义应用程序的Shell结构，这里是一个简单的单页面应用 -->
    <ShellContent Title="Home"
                  ContentTemplate="{DataTemplate local:MainPage}"
                  Route="MainPage" />
</Shell>

4. MainPage.xaml/MainPage.xaml.cs：应用程序的主页面

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiHelloWorld.MainPage">

    <ScrollView>
        <VerticalStackLayout Spacing="25" Padding="30">
            
            <Image Source="dotnet_bot.png"
                   HeightRequest="185"
                   SemanticProperties.Description="The .NET Bot mascot" />
            
            <Label Text="Hello, World!"
                   FontSize="32"
                   HorizontalOptions="Center" />
            
            <Label Text="Welcome to .NET MAUI!"
                   FontSize="18"
                   HorizontalOptions="Center" />
            
            <Button x:Name="CounterButton"
                    Text="Click me"
                    Clicked="OnCounterClicked"
                    HorizontalOptions="Center" />
            
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

public partial class MainPage : ContentPage
{
    // 计数器变量
    private int _count = 0;

    public MainPage()
    {
        InitializeComponent();
    }

    // 按钮点击事件处理方法
    private void OnCounterClicked(object sender, EventArgs e)
    {
        // 增加计数器值
        _count++;
        
        // 根据计数值更新按钮文本
        if (_count == 1)
            CounterButton.Text = $"Clicked {_count} time";
        else
            CounterButton.Text = $"Clicked {_count} times";
        
        // 屏幕阅读器宣布文本变化（辅助功能支持）
        SemanticScreenReader.Announce(CounterButton.Text);
    }
}

运行应用程序

创建项目后，可以选择目标平台并运行应用程序：

1. 在Visual Studio顶部工具栏中，从调试目标下拉列表选择平台：

   • Windows Machine（Windows）
   • Android Emulator（Android）
   • Local Device（iOS，需要Mac连接）

2. 点击绿色的"运行"按钮或按F5启动应用程序

3. 应用程序将在所选平台上编译和运行

简单修改示例

让我们对默认应用程序做一些简单的修改，以了解MAUI开发流程：

1. 添加自定义UI元素：

<!-- 在VerticalStackLayout中添加一个滑块控件 -->
<Slider x:Name="OpacitySlider" 
        Minimum="0" 
        Maximum="1" 
        Value="1"
        ValueChanged="OnOpacityChanged"
        Margin="0,20,0,0" />

<Label Text="调整透明度"
       HorizontalOptions="Center" />

2. 添加相应的代码逻辑：

// 在MainPage.xaml.cs中添加滑块值变化处理方法
private void OnOpacityChanged(object sender, ValueChangedEventArgs e)
{
    // 获取滑块当前值（0到1之间）
    double newValue = e.NewValue;
    
    // 将滑块值应用到图像的透明度
    if (sender is Slider slider)
    {
        // 查找Image控件并设置其Opacity属性
        var image = this.FindByName<Image>("dotnet_bot");
        if (image != null)
        {
            image.Opacity = newValue;
        }
    }
}

使用热重载

.NET MAUI支持热重载功能，允许在应用运行时实时查看XAML更改：

1. 运行应用程序
2. 在XAML文件中修改UI（例如更改文本、颜色或布局）
3. 保存文件，更改将立即反映在运行的应用程序中

MAUI应用生命周期

了解MAUI应用的生命周期对于正确管理资源和用户体验至关重要。

应用程序生命周期

MAUI应用生命周期由以下关键事件定义：

1. OnCreate/构造函数：应用程序初始化时调用
2. OnStart：应用程序变为活动状态时调用
3. OnSleep：应用程序进入后台时调用
4. OnResume：应用程序从后台恢复时调用

页面生命周期

每个页面也有自己的生命周期事件：

1. OnAppearing：页面即将显示时调用
2. OnDisappearing：页面即将隐藏时调用

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();
    }
    
    // 页面即将显示时调用
    protected override void OnAppearing()
    {
        base.OnAppearing();
        Console.WriteLine("页面正在显示");
        
        // 可以在此处加载数据或初始化UI
        LoadData();
    }
    
    // 页面即将隐藏时调用
    protected override void OnDisappearing()
    {
        base.OnDisappearing();
        Console.WriteLine("页面正在隐藏");
        
        // 可以在此处保存数据或清理资源
        SaveData();
    }
    
    private void LoadData()
    {
        // 加载数据的逻辑
    }
    
    private void SaveData()
    {
        // 保存数据的逻辑
    }
}

常见控件和布局

MAUI提供了丰富的控件和布局系统，以下是一些常用的UI元素：

常用控件

布局容器

MAUI提供了多种布局容器，用于组织UI元素：

1. StackLayout：垂直或水平排列元素
2. Grid：在行和列中排列元素
3. FlexLayout：灵活排列元素，类似CSS Flexbox
4. AbsoluteLayout：使用绝对坐标定位元素
5. RelativeLayout：相对于其他元素或父容器定位元素

布局示例

以下是使用Grid布局的示例：

<Grid RowDefinitions="Auto,*,Auto"
      ColumnDefinitions="*,*">
      
    <!-- 占据第一行，跨越两列 -->
    <Label Text="标题文本" 
           Grid.Row="0" 
           Grid.ColumnSpan="2"
           HorizontalOptions="Center"
           FontSize="24"
           Margin="0,20,0,0" />
    
    <!-- 第二行第一列 -->
    <Image Source="image1.png"
           Grid.Row="1"
           Grid.Column="0"
           Aspect="AspectFit"
           Margin="20" />
    
    <!-- 第二行第二列 -->
    <Image Source="image2.png"
           Grid.Row="1"
           Grid.Column="1"
           Aspect="AspectFit"
           Margin="20" />
    
    <!-- 第三行，跨越两列 -->
    <Button Text="确认"
            Grid.Row="2"
            Grid.ColumnSpan="2"
            Margin="20"
            HorizontalOptions="Center" />
</Grid>

小结与后续学习路径

本文介绍了.NET MAUI的基础知识，包括：

• MAUI的定义与特点
• 与Xamarin.Forms的区别与改进
• 开发环境搭建
• 创建和运行第一个MAUI应用
• 项目结构和关键文件
• 应用和页面生命周期
• 常见控件和布局

这些知识为开始MAUI开发提供了坚实的基础。要成为熟练的MAUI开发者，还需要：

1. 深入XAML：掌握XAML语法、样式和资源系统
2. 数据绑定与MVVM：学习数据绑定和MVVM架构模式
3. 导航与Shell：掌握页面导航和Shell框架
4. 本地数据存储：学习使用SQLite等技术存储数据
5. Web服务集成：掌握HTTP请求和REST API调用
6. 平台特定功能：学习如何访问设备功能和平台特定API

学习资源

以下是一些有用的.NET MAUI学习资源：

1. .NET MAUI官方文档
2. Microsoft Learn MAUI课程
3. .NET MAUI GitHub仓库
4. MAUI社区工具包
5. MAUI示例应用

通过这些资源和实践，您将能够掌握.NET MAUI并创建出色的跨平台应用程序。