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

qyswt5oh  于 2023-06-03  发布在  .NET
关注(0)|答案(1)|浏览(213)

我正在开发一个**.Net Maui**应用程序,遇到了集合视图的问题,更具体地说,是列表视图,即使我通过替换列表视图尝试像堆栈布局这样的可绑定布局,问题仍然存在。
只有前几个项目可以点击。调试时,代码后面的函数甚至命令(在视图模型中)都不会被触发。
对于点击项目,我使用了列表视图的点击事件和可绑定布局的手势识别器。我需要在点击项目后进入详细信息页面。所有项目的行为都应该相同,而不是前几个项目。
通过在边框内添加Bindable布局,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>
66bbxpm5

66bbxpm51#

这是一个已知的问题,在下面的链接中跟踪,您可以在那里跟进。
https://github.com/dotnet/maui/issues/14624
此问题仅在iOS上的最新MAUI版本7.0.817.0.200上再次出现。渲染后没有直接出现在屏幕上的每个Button将永远不会被单击。它出现在以下3种场景中:ScrollViewBindable StackLayoutListView中的按钮。
作为替代解决方案,您可以尝试在ScrollView's上调用SizeToFit方法,首先是mtopolewski提供的subview,如下所示:

using Microsoft.Maui.Handlers;
#if IOS
using UIKit;
#endif

namespace IOSScrollviewApp;

public class FixedScrollview : ScrollView
{
  public FixedScrollview()
  {
#if IOS
      ScrollViewHandler.Mapper.AppendToMapping(nameof(IScrollView.ContentSize), OnScrollViewContentSizePropertyChanged);
#endif
  }

#if IOS
  private void OnScrollViewContentSizePropertyChanged(IScrollViewHandler _, IScrollView __)
  {
      if (Handler?.PlatformView is not UIView platformUiView)
          return;
      
      if (platformUiView.Subviews.FirstOrDefault() is not { } contentView)
          return;
      
      contentView.SizeToFit();
  }
#endif
}

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

相关问题