Question

我有一个xamarin.forms应用程序，其中使用了shell。我面临的问题是，当我从外壳底部导航导航到任何内页并导航回上一页时，发生了闪烁。请参阅屏幕记录https://drive.google.com/open?id=1861iNlcV7ao6oDUNu7nL4WiyFuWjwXx_。

我的Shell页面

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"             
             Shell.NavBarIsVisible="False"
             xmlns:local="clr-namespace:PaTS.Views"
             x:Class="SampleApp.AppShell">

    <TabBar>
        <Tab Title="Dashboard" Icon="icon_dashboard.png" >
            <ShellContent ContentTemplate="{DataTemplate local:Dashboard}" />
        </Tab>

        <Tab Title="Notifications" Icon="icon_notifications.png">
            <ShellContent ContentTemplate="{DataTemplate local:Dashboard}" />
        </Tab>

        <Tab Title="Account" Icon="icon_user.png">
            <ShellContent ContentTemplate="{DataTemplate local:Dashboard}" />
        </Tab>
    </TabBar>


</Shell>

仪表板页面

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
             xmlns:local="clr-namespace:sample.CustomRender"
             mc:Ignorable="d"     
             BackgroundColor="#004d6f"
             Title="Dashboard"            
             x:Class="sample.Views.Dashboard">
    <ContentPage.Content>
        <Grid>
            <!--<Image  Aspect="AspectFill" >
                    <Image.Source>
                        <OnIdiom x:TypeArguments="FileImageSource" Tablet="cover.jpg" Phone="loginbackground_phone.jpg" />
                    </Image.Source>
                </Image>-->

            <Grid  >
                <Grid.RowDefinitions >
                    <RowDefinition Height="0.9*"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <Grid Grid.Row="0" BackgroundColor="#004d6f">

                    <StackLayout BackgroundColor="Transparent"  IsClippedToBounds="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >

                        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
                            <Grid HorizontalOptions="Start" VerticalOptions="Center">
                                <controls:CircleImage                                             
                                             BorderColor="LightBlue"
                                             BorderThickness="2"                                                                      
                                             Source="sampleuser.png"                                               
                                             Aspect="AspectFill">

                                    <Image.Margin>
                                        <OnPlatform x:TypeArguments="Thickness">
                                            <On Platform="iOS" Value="20,30,15,0" />
                                            <On Platform="Android" Value="20,15,15,0" />
                                        </OnPlatform>
                                    </Image.Margin>
                                    <Image.HeightRequest>
                                        <OnIdiom x:TypeArguments="x:Double" Tablet="60" Phone="30" />
                                    </Image.HeightRequest>

                                </controls:CircleImage>
                                <controls:CircleImage  
                                             x:Name="UserImage"                                            
                                             BorderColor="LightBlue"
                                             BorderThickness="2"                                          
                                             Source="sampleuser.png"   
                                             Aspect="AspectFill">
                                    <Image.Margin>
                                        <OnPlatform x:TypeArguments="Thickness">
                                            <On Platform="iOS" Value="20,30,15,0" />
                                            <On Platform="Android" Value="20,15,15,0" />
                                        </OnPlatform>
                                    </Image.Margin>
                                    <Image.HeightRequest>
                                        <OnIdiom x:TypeArguments="x:Double" Tablet="60" Phone="30" />
                                    </Image.HeightRequest>

                                </controls:CircleImage>
                            </Grid>
                            <Label Text="Welcome" HorizontalOptions="Start"  VerticalOptions="Center" MaxLines="1"   TextColor="White">
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="iOS" Value="Montserrat-Regular" />
                                        <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                    </OnPlatform>
                                </Label.FontFamily>

                                <Label.FontSize>
                                    <OnIdiom x:TypeArguments="x:Double" Tablet="14" Phone="11" />
                                </Label.FontSize>

                                <Label.Margin>
                                    <OnPlatform x:TypeArguments="Thickness">
                                        <On Platform="iOS" Value="0,30,0,0" />
                                        <On Platform="Android" Value="0,15,0,0" />
                                    </OnPlatform>
                                </Label.Margin>
                            </Label>

                            <Label x:Name="UserName" MaxLines="1" Text="User" HorizontalOptions="Start"  VerticalOptions="Center"   TextColor="LightBlue">
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="iOS" Value="Montserrat-Regular" />
                                        <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                    </OnPlatform>
                                </Label.FontFamily>
                                <Label.FontSize>
                                    <OnIdiom x:TypeArguments="x:Double" Tablet="14" Phone="11" />
                                </Label.FontSize>

                                <Label.Margin>
                                    <OnPlatform x:TypeArguments="Thickness">
                                        <On Platform="iOS" Value="0,30,0,0" />
                                        <On Platform="Android" Value="0,15,0,0" />
                                    </OnPlatform>
                                </Label.Margin>
                            </Label>

                        </StackLayout>

                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="150"/>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Image Grid.Row="0" Source="icon_xamarin_logo.png"  HorizontalOptions="CenterAndExpand"   Margin="0,25,0,0">
                            </Image>

                            <Label Grid.Row="1" Text="Sample App" TextColor="White" FontSize="30" Margin="10,5,10,5" HorizontalTextAlignment="Center" >
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="iOS" Value="Montserrat-Bold" />
                                        <On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
                                    </OnPlatform>
                                </Label.FontFamily>
                            </Label>
                            <Label Grid.Row="2" Text="Sample app details™" TextColor="Snow" FontSize="Medium" Margin="10,5,10,10" HorizontalTextAlignment="Center" >
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="iOS" Value="Montserrat-Regular" />
                                        <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                    </OnPlatform>
                                </Label.FontFamily>
                            </Label>

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

                <Image Grid.Row="1" HorizontalOptions="FillAndExpand" Aspect="AspectFill" Source="CurvedMask.jpg" Margin="-6,0,-6,-6"></Image>

                <StackLayout Grid.Row="2" BackgroundColor="White">
                    <Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Transparent" Margin="15">

                        <Grid >

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>

                            <Frame Grid.Row="0" Grid.Column="0" CornerRadius="6">
  <Frame.GestureRecognizers>
                                <TapGestureRecognizer
                               Tapped="Timesheet_Tapped"
                               NumberOfTapsRequired="1" />
                            </Frame.GestureRecognizers>

                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="40"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>

                                    <Image Source="icon_timesheet.png" Grid.Row="0"></Image>
                                    <Label Text="Timesheets" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
                                        <Label.FontFamily>
                                            <OnPlatform x:TypeArguments="x:String">
                                                <On Platform="iOS" Value="Montserrat-Bold" />
                                                <On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
                                            </OnPlatform>
                                        </Label.FontFamily>
                                    </Label>
                                </Grid>

                            </Frame>

                            <Frame Grid.Row="0" Grid.Column="2" CornerRadius="6">

                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="40"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>

                                    <Image Source="icon_employee.png" Grid.Row="0"></Image>
                                    <Label Text="Employees" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
                                        <Label.FontFamily>
                                            <OnPlatform x:TypeArguments="x:String">
                                                <On Platform="iOS" Value="Montserrat-Bold" />
                                                <On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
                                            </OnPlatform>
                                        </Label.FontFamily>
                                    </Label>
                                </Grid>

                            </Frame>

                            <Frame Grid.Row="1" Grid.Column="0" CornerRadius="6">

                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="40"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>

                                    <Image Source="icon_graph.png" Grid.Row="0"></Image>
                                    <Label Text="Analysis" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
                                        <Label.FontFamily>
                                            <OnPlatform x:TypeArguments="x:String">
                                                <On Platform="iOS" Value="Montserrat-Bold" />
                                                <On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
                                            </OnPlatform>
                                        </Label.FontFamily>
                                    </Label>
                                </Grid>

                            </Frame>

                            <Frame Grid.Row="1" Grid.Column="2" CornerRadius="6">

                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="40"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>

                                    <Image Source="icon_info.png" Grid.Row="0"></Image>
                                    <Label Text="Info" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
                                        <Label.FontFamily>
                                            <OnPlatform x:TypeArguments="x:String">
                                                <On Platform="iOS" Value="Montserrat-Bold" />
                                                <On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
                                            </OnPlatform>
                                        </Label.FontFamily>
                                    </Label>
                                </Grid>
                            </Frame>
                        </Grid>
                    </Frame>
                </StackLayout>
            </Grid>
        </Grid>
    </ContentPage.Content>
</ContentPage>

页面导航

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Dashboard : ContentPage
{
     public Dashboard()
    {
        InitializeComponent();         
    }
    private async void Timesheet_Tapped(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new TimesheetList(),true);                    
    }
}

当我导航到TimesheetList并按返回按钮时，它将以很小的闪烁滑回到仪表板。如何解决呢？任何帮助表示赞赏。

Answer 1

我测试您提供的代码。在“信息中心”页面中，没有用于Timesheet_Tapped事件的代码。

尝试下面的代码，对我来说效果很好。

  <Image Source="icon_timesheet.png" Grid.Row="0" >
                                    <Image.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="Timesheet_Tapped"></TapGestureRecognizer>
                                    </Image.GestureRecognizers>
                                </Image>

Answer 2

我有同样的问题，但是在android模拟器Android 9.0中没有发生冲突，在我的情况下，只有Samsung s8，s8 +，s9，s9 +，s10，s10 +设备。

在此错误报告中： https://github.com/xamarin/Xamarin.Forms/issues/8581

那个家伙找到了解决方法，删除动画：

protected override bool OnBackButtonPressed() {
    Current.Navigation.PopAsync(false); 
    return true;
}

Xamarin形成外壳导航闪烁

2 个答案: