Xamarin 表单：GestureRecognizers 对点击响应不佳，需要多次点击才能打开页面

Posted 2023-02-27

技术标签:

【中文标题】Xamarin 表单：GestureRecognizers 对点击响应不佳，需要多次点击才能打开页面【英文标题】：Xamarin forms: GestureRecognizers not responding well to tap, need multiple taps for opening the page 【发布时间】：2019-10-04 13:27:59 【问题描述】：

我为下面的 UI 添加了一个点击事件。对于图像、堆栈布局和标签，我添加了点击手势事件。我已经完成了如下操作。

 <RelativeLayout Grid.Row="1">
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="End">
       <Grid>
           <Grid.ColumnDefinitions>
              <ColumnDefinition Width="33.3*" />
              <ColumnDefinition Width="33.4*" />
              <ColumnDefinition Width="33.3*" />
           </Grid.ColumnDefinitions>
           <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
              <Label x:Name="daily_reading_label" Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                  <StackLayout.GestureRecognizers>
                     <TapGestureRecognizer
                        Tapped="DailyReading"
                        NumberOfTapsRequired="1">
                     </TapGestureRecognizer>
                   </StackLayout.GestureRecognizers>
            </StackLayout>

        <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
              <Label x:Name="daily_saint_label" Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer
                            Tapped="DailySaint"
                            NumberOfTapsRequired="1">
                        </TapGestureRecognizer>
                    </StackLayout.GestureRecognizers>
        </StackLayout>

        <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
              <Label x:Name="daily_quiz_label" Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer
                            Tapped="DailyQuiz"
                            NumberOfTapsRequired="1">
                        </TapGestureRecognizer>
                    </StackLayout.GestureRecognizers>
          </StackLayout>
      </Grid>
    </StackLayout>

    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="Start" >
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="33.3*" />
                <ColumnDefinition Width="33.4*" />
                <ColumnDefinition Width="33.3*" />
            </Grid.ColumnDefinitions>
            <Image TranslationY="-20" Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer 
                        Tapped="DailyReading"
                        NumberOfTapsRequired="1">
                    </TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>
            <Image TranslationY="-20" Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="1">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer 
                        Tapped="DailySaint"
                        NumberOfTapsRequired="1">
                    </TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>
            <Image TranslationY="-20" Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="2">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer 
                        Tapped="DailyQuiz"
                        NumberOfTapsRequired="1">
                    </TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>
        </Grid>
    </StackLayout>
</RelativeLayout>

还为来自 xaml.cs 的标签添加了手势识别器，如下所示：

   daily_reading_label.GestureRecognizers.Add(new TapGestureRecognizer()
    
        Command = new Command(() => 
            Navigation.PushModalAsync(new Views.DailyReadingPage());
        )
    );

    daily_saint_label.GestureRecognizers.Add(new TapGestureRecognizer()
    
        Command = new Command(() => 
            Navigation.PushModalAsync(new Views.DailySaintPage());
        )
    );

    daily_quiz_label.GestureRecognizers.Add(new TapGestureRecognizer()
    
        Command = new Command(() => 
            Navigation.PushModalAsync(new Views.DailyQuizPage());
        )
    );

界面截图

但是点击UI时很难打开对应的页面。我需要点击多次才能打开新页面。我在这里有什么遗漏吗？我以前没有遇到过这类问题。

【问题讨论】：

你能分享一个样本吗？ @LucasZhang-MSFT drive.google.com/open?id=1qmMyXjIXOSGz2CDWuXEXcwn8fU8DIdiD你能看看吗？检查答案。 【参考方案1】：

你可以改进你的代码有以下几点

在xml中

<ContentPage.Content>
    <Grid>
        <RelativeLayout VerticalOptions="CenterAndExpand">
            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="End">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="33.3*" />
                        <ColumnDefinition Width="33.4*" />
                        <ColumnDefinition Width="33.3*" />
                    </Grid.ColumnDefinitions>
                    <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
                        <Label x:Name="daily_reading_label" Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                    </StackLayout>

                    <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
                        <Label x:Name="daily_saint_label" Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>

                    </StackLayout>

                    <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
                        <Label x:Name="daily_quiz_label" Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>

                    </StackLayout>
                </Grid>
            </StackLayout>

            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="Start" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="33.3*" />
                        <ColumnDefinition Width="33.4*" />
                        <ColumnDefinition Width="33.3*" />
                    </Grid.ColumnDefinitions>
                    <StackLayout  Grid.Column="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer
                                        Tapped="DailyReading"
                                        NumberOfTapsRequired="1">
                            </TapGestureRecognizer>
                        </StackLayout.GestureRecognizers>
                        <Image TranslationY="-20" Source="ic_daily_icon_xx.png" WidthRequest="30" HeightRequest="30"/>
                    </StackLayout>
                    <StackLayout  Grid.Column="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer 
                                Tapped="DailySaint"
                                NumberOfTapsRequired="1">
                            </TapGestureRecognizer>
                        </StackLayout.GestureRecognizers>
                        <Image TranslationY="-20" Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30"/>
                    </StackLayout>
                    <StackLayout  Grid.Column="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer 
                    Tapped="DailyQuiz"
                    NumberOfTapsRequired="1">
                            </TapGestureRecognizer>
                        </StackLayout.GestureRecognizers>
                        <Image TranslationY="-20" Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30"/>
                    </StackLayout>
                </Grid>
            </StackLayout>
        </RelativeLayout>
    </Grid>
</ContentPage.Content>

在代码后面

public partial class MainPage : ContentPage

    public MainPage()
    
        InitializeComponent();


    

    public async void DailyReading(object sender, EventArgs args)
    
        await Navigation.PushModalAsync(new DailyReadingPage());
    

    public async void DailySaint(object sender, EventArgs args)
    
        await Navigation.PushModalAsync(new DailyReadingPage());
    

    public async void DailyQuiz(object sender, EventArgs args)
    
        await Navigation.PushModalAsync(new DailyReadingPage());

【讨论】：

【参考方案2】：

我所看到的原因是它们相互冲突，您只需要在一个地方添加手势识别器就足够了。

我更喜欢使用 XAML，这样我就不必无缘无故地创建私有变量，即“x:Name”

所以你做的很简单

如果下面是你的图片

 <Image TranslationY="-20" Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0">
            <Image.GestureRecognizers>
                <TapGestureRecognizer 
                    Tapped="DailyReading"
                    NumberOfTapsRequired="1">
                </TapGestureRecognizer>
            </Image.GestureRecognizers>
        </Image>

以下是你的标签：

   <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
          <Label x:Name="daily_reading_label" Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
              <StackLayout.GestureRecognizers>
                 <TapGestureRecognizer
                    Tapped="DailyReading"
                    NumberOfTapsRequired="1">
                 </TapGestureRecognizer>
               </StackLayout.GestureRecognizers>
        </StackLayout>

您的 DailyReading 方法如下所示：

private void DailyReading(object sender, EventArgs e)

  Navigation.PushModalAsync(new Views.DailyReadingPage());

确保您只有一个手势识别器以避免冲突

【讨论】：

点击时仍然难以加载页面。

以上是关于Xamarin 表单：GestureRecognizers 对点击响应不佳，需要多次点击才能打开页面的主要内容，如果未能解决你的问题，请参考以下文章

Xamarin 和 Xamarin 表单的符号包（PDB 文件）

Xamarin 表单发送图像

使用 Xamarin.Mobile 读取 Xamarin 表单中的联系人时出错

重复服务呼叫 - Xamarin 表单

如何将 android 活动导航到 xamarin 表单

TeamCity 上的 Xamarin 表单：Xamarin.Forms 任务与目标不匹配