.NET MAUI 基础知识
文章目录
- 什么是 .NET MAUI？
- MAUI的核心特点
- 与Xamarin.Forms的区别
- 开发环境搭建
- 安装Visual Studio 2022
- 安装必要组件
- 配置Android开发环境
- 配置iOS开发环境
- 验证安装
- 创建第一个MAUI应用
- 创建新项目
- MAUI项目结构解析
- 理解关键文件
- 运行应用程序
- 简单修改示例
- 使用热重载
- MAUI应用生命周期
- 应用程序生命周期
- 页面生命周期
- 常见控件和布局
- 常用控件
- 布局容器
- 布局示例
- 小结与后续学习路径
- 学习资源
什么是 .NET MAUI？
.NET Multi-platform App UI (.NET MAUI) 是微软推出的新一代跨平台UI框架，是Xamarin.Forms的继任者。它允许开发者使用单一的代码库和项目结构，创建可在Android、iOS、macOS和Windows上运行的本地应用程序。.NET MAUI采用C#和XAML作为开发语言，为开发者提供了统一的编程模型和API，简化了跨平台应用开发流程。
MAUI的核心特点
- 单一项目结构：不同于Xamarin.Forms的多项目解决方案，MAUI采用单一项目结构，简化了开发和维护过程。
- 统一控件：提供一套统一的控件库，这些控件在不同平台上保持一致的行为和外观。
- 平台特定API集成：允许直接从共享代码中访问平台特定API，无需编写自定义渲染器。
- 现代化架构：基于.NET 6及更高版本构建，支持最新的C#特性。
- 原生性能：应用程序编译为平台原生代码，提供接近原生的性能体验。
上图出自微软官方学习路线
与Xamarin.Forms的区别
主要改进点包括：
- 项目结构：从多项目结构简化为单一项目结构
- 渲染系统：从渲染器架构升级为更灵活的处理程序架构
- 构建系统：整合到.NET统一构建系统中
- 依赖注入：内置现代依赖注入框架
- 生命周期管理：改进的应用和页面生命周期管理
- 热重载：增强的XAML热重载支持
开发环境搭建
要开始.NET MAUI开发，需要设置适当的开发环境。以下是详细的步骤：
安装Visual Studio 2022
Visual Studio 2022是开发MAUI应用的首选IDE，它提供了完整的工具集和集成支持。
- 下载并安装Visual Studio 2022（推荐使用Community或更高版本）
安装Visual Studio 2022可以参考博文对于C#初学者在学习前的准备
- 在安装过程中，选择".NET Multi-platform App UI开发"工作负载
安装必要组件
在Visual Studio安装程序中，确保以下组件被选中：
- .NET MAUI（必选）
- Android SDK设置（适用于Android开发）
- iOS和MacOS开发工具（适用于iOS/MacOS开发）
- 通用Windows平台开发（适用于Windows开发）
配置Android开发环境
要开发Android应用，需要完成以下设置：
- 安装Android SDK：默认情况下，Visual Studio会安装必要的Android SDK
- 配置Android模拟器：
- 打开Visual Studio中的"Android设备管理器"
- 创建新的设备映像（推荐API 30或更高版本）
- 配置模拟器性能选项
打开样式如下
当我们存在项目时调试时就可以直接运行
无法创建模拟器时参考如何使用Android模拟器（Hyper-V和AEHD）启用硬件加速
如果模拟器无法使用可以尝试使用真机调试（在手机中打开开发者模式）
- 配置真机调试（可选）：
- 在Android设备上启用"开发者选项"和"USB调试"
- 安装适当的USB驱动程序
- 通过USB连接设备并允许调试
调试时可以打开xaml实时预览窗口进行查看
配置iOS开发环境
iOS开发需要一台Mac计算机和以下组件：
- 安装最新版Xcode：从Mac App Store下载并安装
- 设置远程配对：
- 在Mac上安装Apple的远程工具
- 在Visual Studio中配置Mac连接
如果您使用Mac开发，则可以直接在Mac上安装Visual Studio for Mac并进行MAUI开发。
验证安装
完成安装后，可以通过以下步骤验证环境：
// 在命令行运行以下命令以检查.NET MAUI工作负载是否正确安装
dotnet workload list
// 应该能看到maui工作负载已安装的信息
创建第一个MAUI应用
让我们创建一个简单的Hello World应用来理解MAUI项目结构和基本概念。
创建新项目
- 打开Visual Studio 2022
- 选择"创建新项目"
- 在搜索框中输入"MAUI"
- 选择".NET MAUI应用"模板
- 点击"下一步"
- 输入项目名称（例如"MauiHelloWorld"）
注意创建MAUI项目目录时不要包含中文
- 选择保存位置
- 点击"创建"
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 # 应用配置和启动
理解关键文件
- 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();}
}
- 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();}
}
- 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>
- 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";elseCounterButton.Text = $"Clicked {_count} times";// 屏幕阅读器宣布文本变化（辅助功能支持）SemanticScreenReader.Announce(CounterButton.Text);}
}
运行应用程序
创建项目后，可以选择目标平台并运行应用程序：
-
在Visual Studio顶部工具栏中，从调试目标下拉列表选择平台：
- Windows Machine（Windows）
- Android Emulator（Android）
- Local Device（iOS，需要Mac连接）
-
点击绿色的"运行"按钮或按F5启动应用程序
-
应用程序将在所选平台上编译和运行
简单修改示例
让我们对默认应用程序做一些简单的修改，以了解MAUI开发流程：
- 添加自定义UI元素：
<!-- 在VerticalStackLayout中添加一个滑块控件 -->
<Slider x:Name="OpacitySlider" Minimum="0" Maximum="1" Value="1"ValueChanged="OnOpacityChanged"Margin="0,20,0,0" /><Label Text="调整透明度"HorizontalOptions="Center" />
- 添加相应的代码逻辑：
// 在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更改：
- 运行应用程序
- 在XAML文件中修改UI（例如更改文本、颜色或布局）
- 保存文件，更改将立即反映在运行的应用程序中
MAUI应用生命周期
了解MAUI应用的生命周期对于正确管理资源和用户体验至关重要。
应用程序生命周期
MAUI应用生命周期由以下关键事件定义：
- OnCreate/构造函数：应用程序初始化时调用
- OnStart：应用程序变为活动状态时调用
- OnSleep：应用程序进入后台时调用
- OnResume：应用程序从后台恢复时调用
页面生命周期
每个页面也有自己的生命周期事件：
- OnAppearing：页面即将显示时调用
- OnDisappearing：页面即将隐藏时调用
public partial class MyPage : ContentPage
{public MyPage(){InitializeComponent();}// 页面即将显示时调用protected override void OnAppearing(){base.OnAppearing();Console.WriteLine("页面正在显示");// 可以在此处加载数据或初始化UILoadData();}// 页面即将隐藏时调用protected override void OnDisappearing(){base.OnDisappearing();Console.WriteLine("页面正在隐藏");// 可以在此处保存数据或清理资源SaveData();}private void LoadData(){// 加载数据的逻辑}private void SaveData(){// 保存数据的逻辑}
}
常见控件和布局
MAUI提供了丰富的控件和布局系统，以下是一些常用的UI元素：
常用控件
布局容器
MAUI提供了多种布局容器，用于组织UI元素：
- StackLayout：垂直或水平排列元素
- Grid：在行和列中排列元素
- FlexLayout：灵活排列元素，类似CSS Flexbox
- AbsoluteLayout：使用绝对坐标定位元素
- 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开发者，还需要：
- 深入XAML：掌握XAML语法、样式和资源系统
- 数据绑定与MVVM：学习数据绑定和MVVM架构模式
- 导航与Shell：掌握页面导航和Shell框架
- 本地数据存储：学习使用SQLite等技术存储数据
- Web服务集成：掌握HTTP请求和REST API调用
- 平台特定功能：学习如何访问设备功能和平台特定API
学习资源
以下是一些有用的.NET MAUI学习资源：
- .NET MAUI官方文档
- Microsoft Learn MAUI课程
- .NET MAUI GitHub仓库
- MAUI社区工具包
- MAUI示例应用
通过这些资源和实践，您将能够掌握.NET MAUI并创建出色的跨平台应用程序。