为什么我无法在点击 .Net Maui 列表视图/可绑定堆栈布局中的底部项目时触发单击事件或命令？

Question

我正在开发一个.Net Maui应用程序，并面临集合视图的问题，更具体地说是列表视图，即使我尝试通过替换列表视图来尝试可绑定布局（如堆栈布局），问题仍然存在。

只能点击前几个项目。当我调试时，代码隐藏中的函数甚至命令（在视图模型中）都不会被触发。

对于点击项目，我使用列表视图的单击事件和可绑定布局的手势识别器。点击该项目后，我需要转到详细信息页面。所有项目的行为应该相同，而不是前几个项目。

通过在边框内添加可绑定布局，Android 上的问题得到解决，但 IOS 上的问题仍然存在。

参考如下xaml代码：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MobileApp_MAUI.Views.Support.SupportPage"
    xmlns:model="clr-namespace:MobileApp_MAUI.Model"
    xmlns:viewmodel="clr-namespace:MobileApp_MAUI.ViewModel"
    xmlns:itemtemplate="clr-namespace:MobileApp_MAUI.Views.ContactUs.Templates"
    x:DataType="viewmodel:SupportPageViewModel"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    Title="Support">
    <ScrollView VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" Grid.Row="0" VerticalOptions="FillAndExpand">
        <StackLayout  BackgroundColor="#f5f2ed">
            <!--MAIN HEADER-->
            <Grid BackgroundColor="{StaticResource XBlue}" Margin="0,0,0,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="180"  />
                </Grid.RowDefinitions>
                <Label Text="You can browse the frequently asked questions using the search bar or browse by clicking the topic buttons below. If you cannot find the answer to your question please contact us."
                                LineBreakMode="WordWrap"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" BackgroundColor="#004A4A"
                       Padding="20,25,20,25" TextColor="White"
                                FontSize="14"/>
            </Grid>
            <Label Text="Frequently Asked Questions"  FontAttributes="Bold" FontSize="Large"
                           FontFamily="MyFont" Margin="0,0,0,5"
                           Padding="10,10,10,0" TextColor="Black" />
            <ActivityIndicator IsVisible="{Binding IsRunning}" IsRunning="{Binding IsRunning}"  
                            VerticalOptions="Center" Margin="0,30,0,5"
                            />
            <Border Margin="9,9,9,0" Stroke="Transparent" BackgroundColor="Transparent">
                <StackLayout BindableLayout.ItemsSource="{Binding Categories}"  Margin="9,9,9,0" VerticalOptions="FillAndExpand"
                                  BackgroundColor="{StaticResource PageBack}">
                    <BindableLayout.ItemTemplate >
                        <DataTemplate x:DataType="model:FAQCategory" >
                            <Grid Padding="5"  BackgroundColor="White" ColumnSpacing="5" Margin="0,1,0,0" >
                                <Grid.RowDefinitions >
                                    <RowDefinition Height="50" />
                                    <RowDefinition Height="50" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions >
                                    <ColumnDefinition Width=".30*" />
                                    <ColumnDefinition Width=".70*" />
                                </Grid.ColumnDefinitions>
                                <Image Grid.RowSpan="2"
                                   Source="{Binding ImagePath}" Aspect="AspectFill" Margin="5"/>
                                <Label Grid.Column="1" VerticalOptions="Center"
                                   Text="{Binding Category}"
                                   FontFamily="MyFont" FontSize="16"
                                   VerticalTextAlignment="Center"/>
                                <Label Grid.Row="1"
                                   Grid.Column="1"
                                   Text="Read more"
                                   FontAttributes="Bold"
                                   TextColor="{StaticResource XBlue}"/>
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="Category_ItemTapped"  CommandParameter="{Binding .}" />
                                </Grid.GestureRecognizers>
                            </Grid>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>
            </Border>
        </StackLayout>
    </ScrollView>
</ContentPage>

Answer 1

这是一个已知问题，在下面的链接中进行跟踪，您可以在那里进行跟进。

\n

https://github.com/dotnet/maui/issues/14624

\n

7.0.81该问题仅在最新的 MAUI 版本中再次7.0.200出现iOS。渲染后所有Button不\xe2\x80\x99t直接出现在屏幕上的内容都永远不会被点击。它出现在以下 3 种场景中： 、ScrollView和Bindable StackLayout中的按钮ListView。

\n

作为替代解决方案，您可以尝试首先调用mtopolewski提供的SizeToFit方法，如下所示：ScrollView\'ssubview

\n

using Microsoft.Maui.Handlers;\n#if IOS\nusing UIKit;\n#endif\n\nnamespace IOSScrollviewApp;\n\npublic class FixedScrollview : ScrollView\n{\n  public FixedScrollview()\n  {\n#if IOS\n      ScrollViewHandler.Mapper.AppendToMapping(nameof(IScrollView.ContentSize), OnScrollViewContentSizePropertyChanged);\n#endif\n  }\n\n#if IOS\n  private void OnScrollViewContentSizePropertyChanged(IScrollViewHandler _, IScrollView __)\n  {\n      if (Handler?.PlatformView is not UIView platformUiView)\n          return;\n      \n      if (platformUiView.Subviews.FirstOrDefault() is not { } contentView)\n          return;\n      \n      contentView.SizeToFit();\n  }\n#endif\n}\n

\n

然后将命名空间添加到您的项目中xmlns:fixed="clr-namespace:IOSScrollviewApp"，替换ScrollView为fixed:FixedScrollview.

\n