Xamarin Listview的圖像滾動不流暢

Question

我正在開發一個博客應用，在其中將卡片放置在每個項目列表中。 在這些卡片中，有標簽和圖像。 問題是列表視圖加載時無法與圖像平滑滾動，而我的圖像來自URI。 我還使用了最新的FFImageLoading插件，但問題仍然相同。 甚至還有額外的問題，該插件無法緩存正確的圖像。

我已經在互聯網上搜索了很多內容，並且開始覺得xamarin對此沒有任何解決方案。 最后的希望只是這個問題。

我的XAML頁面

<ContentPage.BindingContext>
    <local1:HomeViewModel/>
</ContentPage.BindingContext>
<ListView x:Name="listView" SelectedItem="{Binding SelcetedItem,Mode=TwoWay}" SeparatorVisibility="None"
          RowHeight="150" 
          ItemsSource="{Binding Items}" CachingStrategy="RecycleElement" HasUnevenRows="True"  >

        <ListView.Behaviors>
            <extended:InfiniteScrollBehavior IsLoadingMore="{Binding IsBusy}" />
        </ListView.Behaviors>

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <local:CardViewTemplate />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

        <ListView.Footer>
            <Grid Padding="6" IsVisible="{Binding IsBusy}">
                <Grid.Triggers>
                    <Trigger TargetType="Grid" Property="IsVisible" Value="False">
                        <Setter Property="HeightRequest" Value="0" />
                    </Trigger>
                </Grid.Triggers>
                <Label Text="Loading..." TextColor="DeepPink" FontSize="20" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center" />
            </Grid>
        </ListView.Footer>

BindingContext HomeViewModel.cs

public HomeViewModel()
    {
        Items = new InfiniteScrollCollection<HomeDto>
        {
            OnLoadMore = async () =>
            {
                IsBusy = true;

                // load the next page
                var page = Items.Count / PageSize;

                var items = await _dataService.GetItemsAsync(page, PageSize);

                IsBusy = false;

                // return the items that need to be added
                return items;
            },
            OnCanLoadMore = () =>
            {
                return Items.Count < Convert.ToInt32(_dataService.CardDataCollection.Count);
            }
        };

        DownloadDataAsync();
    }

數據來自這里

 private void GenerateCardModel()
    {
        CardDataCollection = HomeServiceHelper.AllArticles();

        foreach(var item in CardDataCollection)
        {
            item.ImageUrl = "http://192.168.31.204:8080/" + item.ImageUrl;
        }
    }

    public async Task<List<HomeDto>> GetItemsAsync(int pageIndex, int pageSize)
    {
        await Task.Delay(2000);

        return CardDataCollection.Skip(pageIndex * pageSize).Take(pageSize).ToList();
    }

最后，我的框架（CardViewTemplate.xaml）在listview的每個單元格中顯示數據

<Frame IsClippedToBounds="True"
     HasShadow="True"
     BackgroundColor="White" CornerRadius="5" Margin="10" >
    <StackLayout Orientation="Horizontal">

        <Grid VerticalOptions="CenterAndExpand" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="20"/>
            </Grid.RowDefinitions>

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

            <StackLayout Grid.Row="0" Grid.Column="0">
                <Label FontAttributes="None" HorizontalTextAlignment="Start" VerticalTextAlignment="Start" FontSize="18" 
                       FontFamily="Arial" Text="{Binding ArticleHeading, Mode = TwoWay}" LineBreakMode="TailTruncation" TextColor="#212121"
                       MaxLines="3">
                </Label>
            </StackLayout>
            <StackLayout Grid.Row="0" Grid.Column="1" BackgroundColor="Yellow"  WidthRequest="70" HorizontalOptions="EndAndExpand" 
                         VerticalOptions="FillAndExpand">
                <ff:CachedImage Source="{Binding  ImageUrl}" HorizontalOptions="FillAndExpand" CacheType="Memory">
                </ff:CachedImage>
            </StackLayout>

            <StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal">
                <Label FontAttributes="None" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" 
                       FontSize="14" Text="{Binding Admin , Mode = TwoWay}" TextColor="#212121" >
                </Label>
                <Label FontAttributes="None" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" 
                       FontSize="14" Text="{Binding LastModifiedOn , Mode = TwoWay, StringFormat='{0:d}'}" TextColor="Gray" >
                </Label>
            </StackLayout>

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

Answer 1

首先，確保您的緩存策略是Listview中的Recycle元素。

然后，為防止圖像出現在錯誤的單元格中，請擴展自定義視單元，並更改圖像的來源。 您可以查看官方文檔 。

看一個例子：

public class MyCustomCell : ViewCell
{
    readonly CachedImage cachedImage = null;

    public MyCustomCell()
    {
        cachedImage = new CachedImage();
        View = cachedImage;
    }

    protected override void OnBindingContextChanged()
    {
        // you can also put cachedImage.Source = null; here to prevent showing old images occasionally
        cachedImage.Source = null;

        //Cast the respective model.
        var item = BindingContext as Item;

        if (item == null)
        {
            return;
        }

        cachedImage.Source = item.ImageUrl;

        base.OnBindingContextChanged();
    }
}