Xamarin形式：GestureRecognizers不能很好地响应点击，需要多次点击才能打开页面

时间：2019-10-04 13:27:59

标签： xamarin.forms uitapgesturerecognizer

我为下面的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屏幕截图

enter image description here

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

2 个答案:

答案 0 :(得分：1)

您可以通过以下方法改善代码

xaml 

<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());
    }


}

答案 1 :(得分：0)

从我所看到的原因是，它们之间相互冲突，您只需要在一个位置添加手势识别器，这应该绰绰有余。

我更喜欢使用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());
}

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

相关问题
最新问题