Xamarin Forms使用Rg.Plugins.Popup时关闭按钮超出部分无法点击如何解决

问题原因 #

你遇到的点击无响应问题本质是关闭按钮超出了其父布局（AbsoluteLayout）的可触摸响应区域：当前你的AbsoluteLayout尺寸和内部弹窗主体Frame完全一致，关闭按钮露在Frame外的部分同时也超出了AbsoluteLayout的边界，Xamarin.Forms默认不会响应控件超出父布局边界区域的触摸事件。

需要做的代码修改 #

按以下步骤调整即可：

1. 给承载所有内容的AbsoluteLayout添加顶部和右侧的内边距，刚好容纳突出的关闭按钮，同时关闭布局裁剪，确保超出原Frame范围的区域可接收触摸
2. 同步关闭外层ScrollView的裁剪属性，避免嵌套布局裁剪导致触摸区域被截断

修改后的核心代码片段 #

<ScrollView Orientation="Horizontal"
            IsClippedToBounds="False"> <!-- 新增这行，关闭ScrollView裁剪 -->
    <AbsoluteLayout HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Padding="0,50,50,0" <!-- 新增/修改：顶部留50、右侧留50的内边距，可根据按钮大小微调 -->
                    IsClippedToBounds="False" <!-- 新增这行，关闭AbsoluteLayout裁剪 -->
                    Margin="0,0,0,0"
                    Opacity="1">
        <!-- 原有Frame、播放按钮代码完全不变 -->
        <Frame AbsoluteLayout.LayoutBounds="0,0,1,1"
               IsClippedToBounds="True"
               AbsoluteLayout.LayoutFlags="All"
               HasShadow="False"
               x:Name="outframe"
               Margin="0"
               CornerRadius="15"
               Padding="0"
               OutlineColor="#ffffff"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="FillAndExpand">
            <!-- 原有Frame内部代码不变 -->
            <StackLayout Orientation="Horizontal"
                         x:Name="stkVideo"
                         Padding="0">
                <Image x:Name="ximage"
                       Aspect="AspectFill"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="FillAndExpand"
                       BackgroundColor="#4A4541" />
                <video:VideoPlayer x:Name="trainingPlayer"
                                   DisplayControls="True"
                                   FillMode="ResizeAspectFill"
                                   FlowDirection="LeftToRight"
                                   Volume="100"
                                   Grid.Row="0"
                                   IsVisible="false">
                </video:VideoPlayer>
            </StackLayout>
        </Frame>
        <ContentView AbsoluteLayout.LayoutBounds="0.50, 0.50, -1, -1"
                     AbsoluteLayout.LayoutFlags="PositionProportional">
            <Image Source="Play.png"
                   HeightRequest="{OnIdiom Phone=70,Tablet=85}"
                   WidthRequest="{OnIdiom Phone=70,Tablet=85}"
                   Aspect="AspectFit"
                   VerticalOptions="Center"
                   HorizontalOptions="Center"
                   x:Name="icnplay" />
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" />
            </ContentView.GestureRecognizers>
        </ContentView>
        <!-- 原有关闭按钮代码完全不变 -->
        <ContentView AbsoluteLayout.LayoutBounds="1.04, -0.09, -1, -1"
                     AbsoluteLayout.LayoutFlags="PositionProportional" >
            <Image Source="close.png" 
                   HeightRequest="{OnIdiom Phone=35,Tablet=45}"
                   WidthRequest="{OnIdiom Phone=35,Tablet=45}"
                   Aspect="AspectFit">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                </Image.GestureRecognizers>
            </Image>
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
            </ContentView.GestureRecognizers>
        </ContentView>
    </AbsoluteLayout>
</ScrollView>

补充说明 #

如果修改后仍有问题，可检查你所用的PopupPage的根布局属性，确保根布局也设置了IsClippedToBounds="False"，避免弹窗根布局裁剪掉突出的关闭按钮区域。

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