.NET MAUI iOS端Mopup弹窗页DisplayAlert不显示问题

问题现象 #

在.NET MAUI项目中使用Mopups.Pages.PopupPage结合MVVM模式开发时，点击弹窗的Submit按钮触发SubmitCostCommand后，Android端能正常弹出DisplayAlert，但iOS端无任何显示效果。

代码问题分析 #

1. ViewModel绑定缺失：弹窗后台代码仅创建了CampaignDetailsViewModel实例，未将其设置为页面的BindingContext，导致XAML中的命令绑定未生效。
2. iOS UI线程调度问题：iOS要求所有UI操作必须在主线程执行，弹窗环境下DisplayAlert可能因线程上下文异常无法触发，需显式切换到主线程。
3. 命令定义不完整：ViewModel仅提供了命令执行方法，未创建对应的ICommand实例，导致按钮无法正确触发命令逻辑。

修复步骤 #

1. 完善ViewModel的命令实现 #

使用CommunityToolkit.Mvvm的RelayCommand实现命令，并确保UI操作在主线程执行：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public partial class CampaignDetailsViewModel : ObservableObject
{
    [RelayCommand]
    private async Task SubmitCost()
    {
        await MainThread.InvokeOnMainThreadAsync(async () =>
        {
            await App.Current.MainPage.DisplayAlert("", "感谢提交社交链接", "确定");
        });
    }
}

2. 正确设置页面BindingContext #

修改弹窗后台代码，将ViewModel实例赋值给页面的BindingContext：

public CostPopupPage(CampaignDetailslstData CampaignData)
{
    InitializeComponent();
    BindingContext = new CampaignDetailsViewModel();
}

3. 修正XAML命令绑定 #

确保按钮的Command绑定到ViewModel自动生成的命令属性：

<Button Grid.Row="3" 
        CornerRadius="20" 
        Padding="0" 
        Text="Submit" 
        VerticalOptions="CenterAndExpand" 
        HeightRequest="45" 
        Style="{StaticResource AllSubmitBtnStyle}" 
        Command="{Binding SubmitCostCommand}"/>

额外优化方案 #

若iOS仍存在弹窗层级冲突问题，可先关闭当前弹窗再显示提示：

[RelayCommand]
private async Task SubmitCost()
{
    // 先关闭弹窗
    await Mopups.Services.PopupNavigation.Instance.PopAsync();
    
    await MainThread.InvokeOnMainThreadAsync(async () =>
    {
        await App.Current.MainPage.DisplayAlert("", "感谢提交社交链接", "确定");
    });
}

内容的提问来源于stack exchange，提问作者Kirti Zare