目录
Masa Blazor是什么MAUI是什么MAUI环境准备创建MAUI应用并引入Masa Blazor时间轴功能实现开源地址Masa Blazor是什么
在此之前我们已经介绍过什么是Masa Blazor，以及如何使用Masa Balzor，如果还有不了解Masa Blazor的同学可以看我上篇文章【初识Masa Blazor】。那么今天就带大家探索一下如何在MAUI中使用Masa Blazor,那么我们先来了解一下什么是MAUI？
MAUI是什么
.NET MAUI全称为 .NET Multi-platform App UI ，顾名思义就是.NET多平台应用 UI，是一个跨平台的框架，是 Xamarin.Forms 的演变，其使用C#和XAML创建本机移动和桌面应用，这里的XAML可以替换成RazorView。 使用 .NET MAUI，可以开发可在 android、iOS、macOS 和 Windows从单个共享代码库运行的应用，一套代码多端运行。
MAUI优点：
从 XAML 和 C# 中的单个共享代码库编写跨平台Visual Studio。跨平台共享 UI 布局和设计。跨平台共享代码、测试和业务逻辑。另一个优点是跨框架重用 Razor 组件，它可以实现为 Razor 类库 (RCL) 并与 Blazor Server 和 WebAssembly 共享。这允许最大限度地重用代码并从单个代码库生成移动、桌面和 Web 解决方案。今天我们重点在实操，就不介绍那么多概念性的东西了。想了解更多关于MAUI的同学可以移步官方文档介绍 什么是 .NET MAUI？，本篇文章会带大家使用MAUI+Masa Blazor做一个移动端常见的时间轴页面，并加一点切换主题色的小功能，效果图如下：
接下来让我们一步步去实现它。首先我们先准备好必备的环境。
注：文章示例演示环境为（Maui 6.0.200-preview.14.5 + Masa.Blazor 0.3.0）
MAUI环境准备
首先要确保安装了最新版的 Visual Studio，并且安装了Mobile development with .NET工作负载。
启用硬件加速才能最大化 Android 模拟器性能，我们可以启用Hyper-V或HAXM加速，这里只介绍第一种
在 Windows 搜索框中输入“Windows 功能”，然后在搜索结果中选择“打开或关闭 Windows 功能” 。 在“Windows 功能”对话框中，启用“Hyper-V”和“Windows 虚拟机监控程序平台” ：
进行这些更改后，重新启动计算机。
请确保 在 Android Device Manager 中创建 的虚拟设备是 x86 64 或基于 x86的系统映像。 如果使用基于 Arm 的系统映像，则不会加速虚拟设备，并且运行速度会缓慢。启用 Hyper-v 后，可以运行加速 Android 仿真器。HAXM加速和详细设置可参考：如何使用 Android 仿真程序 & 启用硬件加速
创建MAUI应用并引入Masa Blazor
创建项目选择.NET MAUI Blazor App。这样的话我们就能使用Blazor View来写UI界面了
在nuget中安装Masa.Blazor，并在MauiProgram.cs文件中注册相关服务
builder.Services.AddMasaBlazor();t; <MImage Src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairFrida&accessoriesType=Kurt&hairColor=Red&facialHairType=BeardLight&facialHairColor=BrownDark&clotheType=GraphicShirt&clotheColor=Gray01&graphicType=Skull&eyeType=Wink&eyebrowType=RaisedExcitedNatural&mouthType=Disbelief&skinColor=Brown"></MImage> </MAvatar> <MAvatar> <MImage Src="https://avataaars.io/?avatarStyle=Circle&topType=ShortHairFrizzle&accessoriesType=Prescription02&hairColor=Black&facialHairType=MoustacheMagnum&facialHairColor=BrownDark&clotheType=BlazerSweater&clotheColor=Black&eyeType=Default&eyebrowType=FlatNatural&mouthType=Default&skinColor=Tanned"></MImage> </MAvatar> <MAvatar> <MImage Src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairMiaWallace&accessoriesType=Sunglasses&hairColor=BlondeGolden&facialHairType=Blank&clotheType=BlazerSweater&eyeType=Surprised&eyebrowType=RaisedExcited&mouthType=Smile&skinColor=Pale"></MImage> </MAvatar> </MCol> </MRow> </MTimelineItem> <MTimelineItem Color="pink" Small> <MRow Class="pt-1"> <MCol Cols="3"> <strong>12pm</strong> </MCol> <MCol> <strong>Lunch break</strong> </MCol> </MRow> </MTimelineItem> <MTimelineItem Color="@Color" Small> <MRow Class="pt-1"> <MCol Cols="3"> <strong>9-11am</strong> </MCol> <MCol> <strong>Finish Home Screen</strong> <div class="text-caption"> Web App </div> </MCol> </MRow> </MTimelineItem> </MTimeline> </MCardText></MCard>@code{[CascadingParameter] public string Color { get; set; }}
然后我们把这个页面想要随着主题色变动的颜色改成通过Color变量控制就好了。
这样我们就完成了一个时间轴页面并且可以切换主题色，这里我们还可以基于这个示例加一些功能，比如点击这个＋号按钮去弹窗再去添加一个时间任务去渲染到页面上，也是挺简单的，就不做演示了。本篇文章主要介绍了在MAUI中如何使用Masa Blazor，并做了一个小demo。抛砖引玉，大家也可以尝试用MAUI + Blazor去做一些应用体验一下。
完整示例代码：codding-y/Maui.MasaBlazor (github.com)
开源地址
MASA.BuildingBlocks：https://github.com/masastack/MASA.BuildingBlocks
MASA.Contrib：https://github.com/masastack/MASA.Contrib
MASA.Utils：https://github.com/masastack/MASA.Utils
MASA.EShop：https://github.com/masalabs/MASA.EShop
MASA.Blazor：https://github.com/BlazorComponent/MASA.Blazor
