MAUI与Blazor共享一套UI，媲美Flutter，实现Windows、macOS、Android、iOS

藏宝库编辑 · 2024-9-15 07:27:00

1. 前言

间隔上次发《MAUI初体验：爽》一文已经已往2个月了，本操持是下半年大概来岁再研究MAUI的，如今操持提前啦，由于我以为MAUI Blazor挺故意思的：在Android、iOS、macOS、Windows之间共享UI，一处UI增长大概修改，就能得到划一的UI体验。
看看这篇文章《Blazor Hybrid/MAUI 简介和实战》对MAUI Blazor的阐明：

MAUI
.NET 多平台应用步调 UI (.NET MAUI) 是一个跨平台框架，用于利用 C# 和 XAML 创建本机移动和桌面应用步调，利用 .net MAUI，可以开辟可在 Android、iOS、macOS 上运行的应用，Windows 以及从单个共享代码库运行的应用。
Blazor Hybrid 应用和 .NET MAUI
Blazor Hybrid 支持内置于 .NET 多平台应用 UI (.NET MAUI) 框架。 .NET MAUI 包罗 BlazorWebView 控件，该控件运行将 Razor 组件出现到嵌入式 Web View 中。通过连合利用 .NET MAUI 和 Blazor，可以跨移动装备、桌面装备和 Web 重复利用一组 Web UI 组件。

本日就分享如安在Blazor Server、Blazor Wasm、MAUI Blazor之间共享UI的实行，这一步完成，反面开辟应用时就方便多了（只针对UI修改）。
2. 先来体验下各端终极结果

Blazor Server：http://server.dotnet9.com/
Blazor Wasm：http://wasm.dotnet9.com/
MAUI(Android\Windows\macOS)：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.MAUI（源码自行编译）

Windows桌面、Blazor Server(在线）、Blazor Wasm(在线）、Android结果

iPad Air、iOS、macOS桌面结果
MAUI各端未做发布文件体验（须要做相应平台的发布署名等操纵），各人可以按下面先容的方法创建项目编译体验一下。
iOS和macOS结果感谢青城同砚提供的图片素材，站长mbp安装了最新的macOS，xCode也是最新的，大概由于预览版macOS缘故因由，xCode无法打开，间接影响了maui编译？
macOS版本和xCode版本

xCode为不可用状态
VS编译堕落，反面再办理
用mbp的同砚建议不要安装预览版操纵体系，不要当勇士....
3. 新建项目

关于MAUI的情况搭建可参考这篇文章《在MAUI中利用Masa Blazor》，本文不再先容情况搭建，直接利用VS 2022最新预览版项目模板创建项目。
3.1 创建Blazor Server项目：Dotnet9.Server

3.2 创建Blazor WebAssembly项目：Dotnet9.Wasm

3.3 创建MAUI Blazor项目：Dotnet9.MAUI

3.4 查找共同点

在3个项目的上一层目次，打开PowerShell，输入tree /f检察详细的目次文件构造布局：
过细检察三个模板项目文件布局，我们找出共同的文件检察：

MAUI与Blazor共享一套UI，媲美Flutter，实现Windows、macOS、Android、iOS

所属分类: 问答交流

新帖推荐: 30日

推荐作品