FluentUI Blazor 在 MAUI 混合应用中组件加载失败的解决方案

问题现象

在使用 .NET 9 创建 MAUI Blazor 混合应用时，开发者手动添加了 FluentUI 组件库后，虽然项目能够成功构建，但在运行时页面无法正确显示 FluentUI 组件，仅显示空白区域。

根本原因分析

经过排查，发现该问题是由于未正确配置 FluentUI 组件库的服务依赖注入导致的。在 MAUI Blazor 混合应用中，即使项目能够成功构建，如果缺少必要的服务注册，组件将无法正常初始化和渲染。

解决方案

要使 FluentUI 组件在 MAUI Blazor 混合应用中正常工作，需要在 MauiProgram.cs 文件中添加以下服务注册代码：

builder.Services.AddHttpClient();
builder.Services.AddFluentUIComponents();

这两行代码的作用分别是：

1. AddHttpClient()：注册 HTTP 客户端服务，这是 FluentUI 组件库内部可能需要的依赖
2. AddFluentUIComponents()：注册 FluentUI 组件库所需的所有服务

完整配置示例

以下是配置 FluentUI 组件库的完整步骤：

1. 首先通过 NuGet 安装必要的包：

   • Microsoft.FluentUI.AspNetCore.Components
   • Microsoft.FluentUI.AspNetCore.Components.Icons
   • Microsoft.FluentUI.AspNetCore.Components.Emoji

2. 在 _Imports.razor 文件中添加命名空间引用：

   @using Microsoft.FluentUI.AspNetCore.Components
   

3. 在 MauiProgram.cs 中配置服务：

   var builder = MauiApp.CreateBuilder();
   builder
       .UseMauiApp<App>()
       .ConfigureFonts(fonts =>
       {
           fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
       });
   
   builder.Services.AddMauiBlazorWebView();
   
   #if DEBUG
   builder.Services.AddBlazorWebViewDeveloperTools();
   #endif
   
   // 添加 FluentUI 服务
   builder.Services.AddHttpClient();
   builder.Services.AddFluentUIComponents();
   
   return builder.Build();
   

注意事项

1. 在 .NET 9 中，不再需要之前版本中的特殊工作区配置
2. 确保所有 FluentUI 相关包的版本一致，避免因版本不兼容导致的问题
3. 如果使用了图标或表情符号组件，也需要确保相应的包已正确安装

通过以上配置，FluentUI 组件应该能够在 MAUI Blazor 混合应用中正常显示和工作。如果仍然遇到问题，建议检查浏览器控制台或调试输出中的错误信息，以进一步排查问题原因。