.NET Maui中使用Community Toolkit弹窗不显示问题求助

问题场景 #

使用.NET MAUI Community Toolkit实现加载弹窗，调用this.ShowPopUpAsync(popup)或Application.Current.MainPage.ShowPopupAsync(popup)均无法在设备上显示弹窗。

弹窗XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<xct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
           x:Class="DailyBudgetMAUIApp.Handlers.PopUpPage" 
           xmlns:xct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" 
           CanBeDismissedByTappingOutsideOfPopup="False" 
           Color="Transparent">
    <VerticalStackLayout HeightRequest="300" WidthRequest="200">
        <ActivityIndicator IsRunning="True" IsVisible="True" 
                          VerticalOptions="StartAndExpand" HorizontalOptions="Center" 
                          BackgroundColor="Transparent"  Margin="0,100,0,0" 
                          Color="{DynamicResource Primary}" Scale="1"></ActivityIndicator>
        <Label Text="Loading ..." FontAttributes="Bold" FontSize="Medium" 
               VerticalOptions="Center" HorizontalOptions="Center" 
               FontFamily="OpenSansSemibold" TextColor="{DynamicResource Light}" 
               Margin="0,20,0,0"/>
    </VerticalStackLayout>
</xct:Popup>

弹窗后台代码 #

public partial class PopUpPage : Popup
{
    public PopUpPage()
    {
         InitializeComponent();
    }
}

调用代码 #

private async void UndoCreateBudget(int BudgetID)
{
    Popup popup = new PopUpPage();
    await Application.Current.MainPage.ShowPopupAsync(popup);
    //Call my api and do some stuff
    popup.Close();
}

排查原因及解决方法 #

• UI线程被阻塞
  调用ShowPopupAsync后立即同步执行API操作，会抢占UI线程导致弹窗来不及渲染就被后续代码打断。需要将耗时操作放到后台线程执行，避免阻塞UI：

  private async void UndoCreateBudget(int BudgetID)
  {
      Popup popup = new PopUpPage();
      // 先启动弹窗，不等待关闭
      var popupTask = Application.Current.MainPage.ShowPopupAsync(popup);
      // 在后台线程执行API操作
      await Task.Run(() => 
      {
          //Call my api and do some stuff
      });
      // 操作完成后关闭弹窗
      popup.Close();
      await popupTask;
  }
  

• 弹窗视觉不可见
  弹窗设置了Color="Transparent"，且内部VerticalStackLayout无背景色，可能导致弹窗实际已显示但视觉上看不到。可以给布局添加半透明背景验证：

  <VerticalStackLayout HeightRequest="300" WidthRequest="200" BackgroundColor="#80000000">
      <!-- 原有控件 -->
  </VerticalStackLayout>
  

• Community Toolkit未初始化
  若未在MauiProgram.cs中正确初始化工具包，弹窗功能无法正常工作，需确保添加以下代码：

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

• 弹窗关闭逻辑矛盾
  ShowPopupAsync是异步等待弹窗关闭的方法，原代码中await后再调用Close()逻辑矛盾——await会一直等到弹窗关闭才执行后续代码，因此Close()根本不会被触发。需调整为先启动弹窗，执行后台任务后再主动关闭。

• 父页面选择错误
  部分平台（如iOS）要求弹窗必须在当前活跃页面显示，而非直接使用Application.Current.MainPage。尝试使用当前页面调用弹窗：

  await this.ShowPopupAsync(popup); // 确保当前方法所属类为ContentPage实例
  

内容的提问来源于stack exchange，提问作者Darren Fillis