.NET MAUI：SwipeView被CollectionView遮挡的解决方法咨询

你的问题核心是Grid布局中多个控件占用同一行导致层级覆盖，默认情况下Grid中后添加的控件会显示在上方。只需调整Grid的行结构，将通知栏、列表、按钮分开放在不同行，同时完善滑动关闭的逻辑即可。

具体修改步骤 #

1. 调整Grid的行定义 #

将原Grid的RowDefinitions="*,Auto"修改为RowDefinitions="Auto,*,Auto"，页面被分成三行：

• 第一行（Auto）：固定高度的通知栏
• 第二行（*）：占满剩余空间的列表区域
• 第三行（Auto）：底部操作按钮

2. 为各控件指定对应行 #

• 包含SwipeView的StackLayout添加Grid.Row="0"
• RefreshView添加Grid.Row="1"
• 两个底部Button修改Grid.Row="2"
• ActivityIndicator的Grid.RowSpan="3"（覆盖三行）

3. 添加滑动关闭逻辑 #

给SwipeItem绑定命令，实现点击后隐藏通知栏。以下是后台代码实现示例：

在MainPage.xaml.cs中添加：

public MainPage()
{
    InitializeComponent();
    // 绑定Delete按钮的关闭逻辑
    var deleteItem = swipeView.LeftItems.FirstOrDefault(s => s.Text == "Delete") as SwipeItem;
    deleteItem.Command = new Command(() => swipeView.IsVisible = false);
}

修改后的完整XAML代码 #

<ContentPage x:Class="MonkeyFinder.View.MainPage"
         xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:model="clr-namespace:MonkeyFinder.Model"
         xmlns:viewmodel="clr-namespace:MonkeyFinder.ViewModel"
         xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
         ios:Page.UseSafeArea="True"
         Title="Monkeys"
         x:DataType="viewmodel:MonkeysViewModel">

    <Grid ColumnDefinitions="*,*"
          ColumnSpacing="5"
          RowDefinitions="Auto,*,Auto"
          RowSpacing="0"
          BackgroundColor="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}">

        <!-- 通知栏：第一行 -->
        <StackLayout Margin="0,5,0,5"
                     Grid.Row="0"
                     Grid.ColumnSpan="2"
                     Padding="0">
            <SwipeView x:Name="swipeView">
                <SwipeView.LeftItems>
                    <SwipeItems>
                        <SwipeItem Text="Favorite"
                                   IconImageSource="favorite.png"
                                   BackgroundColor="LightGreen" />
                        <SwipeItem Text="Delete"
                                   IconImageSource="delete.png"
                                   BackgroundColor="LightPink" />
                    </SwipeItems>
                </SwipeView.LeftItems>
                <Grid HeightRequest="60"
                      BackgroundColor="Lightblue">
                    <Label Text="This is a test. Swipe to close."
                           HorizontalOptions="Start"
                           VerticalOptions="Center" />
                </Grid>
            </SwipeView>
        </StackLayout>

        <!-- 列表区域：第二行 -->
        <RefreshView Grid.Row="1"
                     Grid.ColumnSpan="2"
                     Command="{Binding GetMonkeysCommand}"
                     IsRefreshing="{Binding IsRefreshing}">
            <CollectionView ItemsSource="{Binding Monkeys}"
                            SelectionMode="None">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="model:Monkey">
                        <Grid Padding="10"
                              HorizontalOptions="Fill">
                            <Frame HeightRequest="125"
                                   Style="{StaticResource CardView}">
                                <Frame.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MonkeysViewModel}}, Path=GoToDetailsCommand}"
                                                          CommandParameter="{Binding .}" />
                                </Frame.GestureRecognizers>
                                <Grid Padding="0"
                                      ColumnDefinitions="125,*">
                                    <Image Aspect="AspectFill"
                                           HeightRequest="125"
                                           Source="{Binding Image}"
                                           WidthRequest="125" />
                                    <VerticalStackLayout VerticalOptions="Center"
                                                         Grid.Column="1"
                                                         Padding="10">
                                        <Label Style="{StaticResource LargeLabel}"
                                               Text="{Binding Name}" />
                                        <Label Style="{StaticResource MediumLabel}"
                                               Text="{Binding Location}" />
                                    </VerticalStackLayout>
                                </Grid>
                            </Frame>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </RefreshView>

        <!-- 底部按钮：第三行 -->
        <Button Grid.Row="2"
                Grid.Column="0"
                Margin="8"
                Command="{Binding GetMonkeysCommand}"
                IsEnabled="{Binding IsNotBusy}"
                Style="{StaticResource ButtonOutline}"
                Text="Get Monkeys" />

        <Button Grid.Row="2"
                Grid.Column="1"
                Margin="8"
                Command="{Binding GetClosestMonkeyCommand}"
                IsEnabled="{Binding IsNotBusy}"
                Style="{StaticResource ButtonOutline}"
                Text="Find Closest" />

        <!-- 加载提示：覆盖三行 -->
        <ActivityIndicator Grid.RowSpan="3"
                           Grid.ColumnSpan="2"
                           HorizontalOptions="Fill"
                           IsRunning="{Binding IsBusy}"
                           IsVisible="{Binding IsBusy}"
                           Color="{StaticResource Primary}"
                           VerticalOptions="Center" />
    </Grid>
</ContentPage>

额外说明 #

• 若需要滑动后自动关闭（无需点击SwipeItem），可监听SwipeView.SwipeEnded事件，在事件处理中设置swipeView.IsVisible = false。
• 若希望通知栏初始隐藏，可设置swipeView.IsVisible="False"，在需要展示时通过ViewModel或代码控制显示。

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