Xamarin 窗体 shell 导航闪烁答案

【问题标题】：Xamarin forms shell navigation flickeringXamarin 窗体 shell 导航闪烁
【发布时间】：2019-11-11 05:03:53
【问题描述】：

我有一个使用 shell 的 xamarin.forms 应用程序。我面临的问题是当我从外壳底部导航导航到任何内页并导航回上一页时出现闪烁。请参阅屏幕记录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 并按下后退按钮时，它会滑回仪表板，并伴有少许闪烁。如何解决这个问题？任何帮助表示赞赏。

【问题讨论】：

标签： xamarin xamarin.forms

【解决方案1】：

我测试您提供的代码。在仪表板页面中，没有用于 Timesheet_Tapped 事件的代码。

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

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

【讨论】：

嗨，我使用了 Frame.GestureRecognizers。但很抱歉没有包含在上面的代码中。它仍然有同样的问题
我无法重现。你能把你的代码示例上传到github上供我测试吗？
好吧兄弟...请稍等
您好抱歉耽搁了。请查找存储库进行测试：github.com/tvm-anand/ShellNavigation
@AndroDevil 我检查了 GitHub 上的示例。它与您发布的问题不相似。请在 GitHub 上确认代码示例。

【解决方案2】：

我有同样的问题，但在 android 模拟器中没有发生 Android 9.0 闪烁，在我的情况下，只有三星 s8、s8+、s9、s9+、s10、s10+ 设备。

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

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

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

【讨论】：