MAUI Shell Flyout点击穿透异常问题求助

你的问题是Flyout打开后，点击Flyout区域会触发背景页面的按钮事件，这是因为FlyoutContent的根容器没有设置背景色，导致空白区域的点击事件直接透传到下层页面。

修复方案 #

给Shell.FlyoutContent内的根Grid添加背景色，让它拦截点击事件，阻止透传。修改后的XAML代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell    x:Class="UBReferee.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:UBReferee"
    xmlns:lang="clr-namespace:LocalizationResourceManager.Maui;assembly=LocalizationResourceManager.Maui"
    xmlns:utils="clr-namespace:MauiUtils;assembly=MauiUtils"
    Shell.FlyoutBehavior="Flyout"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <Shell.FlyoutContent>
        <!-- 添加BackgroundColor，使用主题资源或具体颜色 -->
        <Grid BackgroundColor="{DynamicResource PageBackgroundColor}">
            <Grid.RowDefinitions>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="4*"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <utils:ImageTintColor Grid.Row="0" Source="ub_logo_transparent.svg" Aspect="AspectFit"/>
            <HorizontalStackLayout Grid.Row="2" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,50,0,50">
                <utils:ImageTintColor VerticalOptions="Center" Source="brightness.svg" Margin="20,0,20,0"/>
                <Switch x:Name="ThemeSwitch" Toggled="Switch_Toggled" />
                <utils:ImageTintColor VerticalOptions="Center" Source="dark.svg" Margin="20,0,20,0"/>
            </HorizontalStackLayout>
            <Button Grid.Row="3" Margin="20, 0, 20, 25" Text="{lang:Translate Language}" FontSize="Large" FontAttributes="Bold" ImageSource="translate.svg" Clicked="Lang_Clicked" />
            <Button Grid.Row="4" Margin="20, 0, 20, 25" Text="{lang:Translate Logout}" FontSize="Large" FontAttributes="Bold" ImageSource="logout_2.svg" Clicked="LogOut_Clicked" />
        </Grid>
    </Shell.FlyoutContent>
    <!-- 其余ShellContent代码保持不变 -->
    <ShellContent
        Shell.NavBarIsVisible="False"
        Title="Splash"
        ContentTemplate="{DataTemplate local:Splash}"
        Route="Splash">
    </ShellContent>
    <ShellContent
        Shell.NavBarIsVisible="False" 
        Title="Login" 
        ContentTemplate="{DataTemplate local:LoginPage}" 
        Route="LoginPage" 
        Shell.FlyoutBehavior="Disabled"/>
    <ShellContent 
        Title="StageSelectionPage" 
        ContentTemplate="{DataTemplate local:StageSelectionPage}" 
        Route="StageSelectionPage" 
        Shell.FlyoutBehavior="Disabled"/>
    <ShellContent
        Title="CompetitionPage"
        ContentTemplate="{DataTemplate local:CompetitionPage}"
        Route="CompetitionPage"/>
</Shell>

原理说明 #

MAUI中，默认的Grid背景是透明的，且不会主动拦截点击事件。当Flyout显示时，空白区域的点击会直接穿过Flyout，触发下层页面的控件事件。设置背景色后，Grid会成为可点击的视觉容器，拦截所有区域的点击，避免事件透传。

如果你使用主题系统，建议用DynamicResource绑定对应背景色资源，保持和应用主题一致；也可以直接设置固定颜色，比如BackgroundColor="White"或BackgroundColor="#F5F5F5"。

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