如何在.NET MAUI Blazor应用的Razor组件中使用.NET MAUI控件

针对你的场景（有Blazor经验但刚接触.NET MAUI），以下几种方法可以实现Blazor中调用原生Bottom Sheet控件：

方案一：使用.NET MAUI Community Toolkit快速实现（推荐） #

MAUI Community Toolkit提供了跨平台封装好的BottomSheet控件，无需手动编写各平台原生代码，步骤如下：

1. 安装NuGet包：CommunityToolkit.Maui
2. 在MauiProgram.cs中初始化工具包：

builder.UseMauiApp<App>().UseMauiCommunityToolkit();

3. 在Blazor组件中注入IMauiContext并调用BottomSheet：

@using CommunityToolkit.Maui.Views
@inject IMauiContext MauiContext

<button @onclick="OpenBottomSheet">打开原生Bottom Sheet</button>

@code {
    private async Task OpenBottomSheet()
    {
        // 自定义BottomSheet内容，可替换为任意MAUI原生控件
        var sheetContent = new VerticalStackLayout
        {
            Padding = new Thickness(20),
            Children = 
            {
                new Label { Text = "这是MAUI原生Bottom Sheet", FontSize = 18 },
                new Button { Text = "关闭", OnClicked = async (s, e) => await sheet.DismissAsync() }
            }
        };

        var sheet = new BottomSheet { Content = sheetContent };
        await sheet.ShowAsync(MauiContext.Context);
    }
}

方案二：封装原生平台BottomSheet为服务 #

如果需要完全定制原生平台的BottomSheet样式（比如Android的BottomSheetDialogFragment、iOS的UISheetPresentationController），可以创建跨平台服务封装：

1. 定义服务接口 #

public interface IBottomSheetService
{
    Task ShowCustomBottomSheetAsync(string title, string content);
}

2. 实现各平台服务 #

Android平台实现

#if ANDROID
public class AndroidBottomSheetService : IBottomSheetService
{
    public async Task ShowCustomBottomSheetAsync(string title, string content)
    {
        var context = Android.App.Application.Context;
        var dialog = new AndroidX.AppCompat.App.AlertDialog.Builder(context)
            .SetTitle(title)
            .SetMessage(content)
            .SetNegativeButton("取消", (s, e) => { })
            .SetPositiveButton("确认", (s, e) => { })
            .Create();

        // 设置为BottomSheet样式
        dialog.Window.SetLayout(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent);
        dialog.Window.SetGravity(GravityFlags.Bottom);
        
        await Task.Run(() => dialog.Show());
    }
}
#endif

iOS平台实现

#if IOS
public class iOSBottomSheetService : IBottomSheetService
{
    public async Task ShowCustomBottomSheetAsync(string title, string content)
    {
        var sheetController = UIAlertController.Create(title, content, UIAlertControllerStyle.ActionSheet);
        sheetController.AddAction(UIAlertAction.Create("取消", UIAlertActionStyle.Cancel, null));
        sheetController.AddAction(UIAlertAction.Create("确认", UIAlertActionStyle.Default, null));

        // 获取当前视图控制器
        var window = UIApplication.SharedApplication.KeyWindow;
        var currentVc = window.RootViewController;
        while (currentVc.PresentedViewController != null)
        {
            currentVc = currentVc.PresentedViewController;
        }

        await currentVc.PresentViewControllerAsync(sheetController, true);
    }
}
#endif

3. 注册服务并在Blazor中使用 #

在MauiProgram.cs注册服务：

builder.Services.AddSingleton<IBottomSheetService>(sp =>
{
#if ANDROID
    return new AndroidBottomSheetService();
#elif IOS
    return new iOSBottomSheetService();
#else
    throw new NotImplementedException("当前平台未实现BottomSheet服务");
#endif
});

在Blazor组件中调用：

@inject IBottomSheetService BottomSheetService

<button @onclick="ShowCustomSheet">显示定制化Bottom Sheet</button>

@code {
    private async Task ShowCustomSheet()
    {
        await BottomSheetService.ShowCustomBottomSheetAsync("自定义标题", "原生平台定制的内容");
    }
}

方案三：通过JS互操作调用原生控件 #

MAUI Blazor基于WebView，可以通过JS桥接调用原生平台代码，适合需要从Blazor前端直接触发的场景：

Android平台示例 #

1. 在MainActivity.cs中创建JS交互类：

public class JsBottomSheetBridge : Java.Lang.Object
{
    [JavascriptInterface]
    [Export("showBottomSheet")]
    public void ShowBottomSheet(string content)
    {
        var dialog = new AndroidX.AppCompat.App.AlertDialog.Builder(this)
            .SetMessage(content)
            .SetPositiveButton("确定", (s, e) => { })
            .Create();
        
        dialog.Window.SetLayout(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent);
        dialog.Window.SetGravity(GravityFlags.Bottom);
        dialog.Show();
    }
}

2. 在MainPage.xaml.cs中注册JS接口：

protected override void OnHandlerChanged()
{
    base.OnHandlerChanged();
    if (Handler is BlazorWebViewHandler webViewHandler)
    {
#if ANDROID
        var androidWebView = webViewHandler.PlatformView as Android.Webkit.WebView;
        androidWebView.AddJavascriptInterface(new JsBottomSheetBridge(), "NativeBottomSheet");
#endif
    }
}

3. 在Blazor组件中通过JS调用：

@inject IJSRuntime JSRuntime

<button @onclick="ShowSheetViaJS">JS调用原生Bottom Sheet</button>

@code {
    private async Task ShowSheetViaJS()
    {
        await JSRuntime.InvokeVoidAsync("NativeBottomSheet.showBottomSheet", "通过JS触发的原生Bottom Sheet");
    }
}

内容的提问来源于stack exchange，提问作者Xander Selorm