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

Question

我有一个适用于 Android 和 IOS 的 Xamarin 表单应用程序。当我在 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" 而没有 emtpy 元素。这样问题似乎就不再发生了。