滚动出屏幕时，列表项会移动或消失

Question

我有一个用于Android和IOS的Xamarin Forms应用程序。当我在Android上打开较大的列表之一时，加载后看起来还不错。现在，当我在某些条目上上下滚动时，图像完全被移动或消失了。

之前：

之后：

此XAML定义了该列表：

            <ListView x:Name="PaymentList"
                      ItemsSource="{Binding DailyList}"
                      HasUnevenRows="True"
                      CachingStrategy="RecycleElementAndDataTemplate"
                      IsGroupingEnabled="True"
                      SeparatorVisibility="None">

                <ListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <TextCell Text="{Binding Key}"
                                  TextColor="{DynamicResource HeaderColor}" />
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.ContextActions>
                                <MenuItem Clicked="EditPayment" CommandParameter="{Binding .}"
                                          Text="{Binding Resources[EditLabel]}" />
                                <MenuItem Clicked="DeletePayment" CommandParameter="{Binding .}"
                                          Text="{Binding Resources[DeleteLabel]}"
                                          IsDestructive="True" />
                            </ViewCell.ContextActions>
                            <controls:CardView Margin="{StaticResource SmallLeftRightBottomMargin}" Style="{StaticResource ListItemStyle}">
                                <StackLayout Spacing="0"
                                             Margin="{StaticResource DefaultListItemsMargin}">
                                    <Grid>

                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="70*" />
                                            <ColumnDefinition Width="30*" />
                                        </Grid.ColumnDefinitions>

                                        <Label Grid.Column="0"
                                               Text="{Binding Category.Name}"
                                               Style="{StaticResource ListItemHeaderSmallStyle}" />

                                        <Label Grid.Column="1"
                                               HorizontalTextAlignment="End"
                                               VerticalOptions="CenterAndExpand"
                                               Style="{StaticResource SmallTextStyle}"
                                               Text="{Binding ., Converter={StaticResource PaymentAmountConverter}}" />
                                    </Grid>
                                    <Grid >

                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="70*" />
                                            <ColumnDefinition Width="30*" />
                                        </Grid.ColumnDefinitions>

                                        <Label Grid.Column="0"
                                           Text="{Binding Note}" 
                                           Style="{StaticResource DeemphasizedSmallLabelStyle}" />

                                        <StackLayout Grid.Column="1" Orientation="Horizontal" HorizontalOptions="EndAndExpand">

                                            <Image HeightRequest="15"
                                                   WidthRequest="15"
                                                   IsVisible="{Binding IsTransfer}" >
                                                <Image.Source>
                                                    <FontImageSource
                                                        Glyph="{StaticResource Transfer}"
                                                        FontFamily="{DynamicResource MaterialFontFamily}"
                                                        Color="{DynamicResource PrimaryFontColor}" />
                                                </Image.Source>
                                            </Image>

                                            <Image HeightRequest="15"
                                                   WidthRequest="15"
                                                   IsVisible="{Binding IsRecurring}" >
                                                <Image.Source>
                                                    <FontImageSource
                                                        Glyph="{StaticResource Recurring}"
                                                        FontFamily="{DynamicResource MaterialFontFamily}"
                                                        Color="{DynamicResource PrimaryFontColor}" />
                                                </Image.Source>
                                            </Image>

                                            <Image HeightRequest="15"
                                                   WidthRequest="15"
                                                   IsVisible="{Binding IsCleared}">
                                                <Image.Source>
                                                    <FontImageSource
                                                        Glyph="{StaticResource Cleared}"
                                                        FontFamily="{DynamicResource MaterialFontFamily}"
                                                        Color="{DynamicResource PrimaryFontColor}" />
                                                </Image.Source>
                                            </Image>

                                        </StackLayout>
                                    </Grid>
                                </StackLayout>
                            </controls:CardView>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

我还尝试了另一种缓存模式。但是使用保留元素时，滚动中的元素就为空。

该列表包含约130个项目。

我该如何解决？

Answer 1

我建议您可以使用 FFImageLoading 正确渲染图像，我想 FFImageLoading 将解决您的问题。

通过NuGet软件包安装 Xamarin.FFImageLoading.Forms ...

这是有关使用FFimageLoading的详细信息。

https://www.c-sharpcorner.com/article/xamarin-forms-ffimageloading-app2/

Answer 2

我注意到，当我将HasUnevenRows="True"更改为False（默认值）并设置固定的RowHeight时，我可以使用CachingStrategy="RetainElement"而没有空元素。这样，问题似乎不再发生。