listview - Xamarin 窗体 FFImageLoading ListView 控件

Question

我想在我的 ListView 控件中使用 FFImageLoading 添加 CachedImage。我已经在 XAML 上添加了三个包和控件，但 listview 仍然显示缓慢是否还有其他我需要做的事情才能使 FFImageLoading Cached 与 ListView 控件一起使用？我尝试按照此示例进行操作，但不确定它是否有效

is there a way to know for sure that the images are being cached?

https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-Advanced#usage-in-listview-with-listviewcachingstrategyrecycleelement-enabled

主事件.cs

CachedImageRenderer.Init(true);

AppDelegate.cs

 CachedImageRenderer.Init();

XAML

<converters:FastTemplateCell AutomationId="DownloadListItemTemplateCell">
                        <converters:FastTemplateCell.View>
                                            <Grid Padding="5">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="15"></RowDefinition>
                                                </Grid.RowDefinitions>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="15" />
                                                </Grid.ColumnDefinitions>
                                                <forms:CachedImage Grid.Row="0" Grid.Column="0" IsVisible="{Binding IsSelected, Converter={StaticResource InvertedBooleanConverter}}" AutomationId="GuidelineDownloadIcon" Source="arrow_start.png"/>
                                                <forms:CachedImage Grid.Row="0" Grid.Column="0" IsVisible="{Binding IsGuidelineDownloaded}" AutomationId="GuidelineDownloadSuccessIcon" Source="circle_done.png"/>
                                                <forms:CachedImage Grid.Row="0" Grid.Column="0" IsVisible="{Binding IsGuidelineDownloadFailed}" AutomationId="GuidelineDownloadFailIcon" Source="failed.png" />

                                            </Grid>

                                            <Label LineBreakMode="WordWrap" Grid.Column="1" Text="{Binding GuidelineChildName}" AutomationId="DownloadGuidelineType" TextColor="#337ab7">
                                        <Label.FontSize>
                                            <OnPlatform x:TypeArguments="x:Double">
                                                <On Platform="iOS" Value="16" />
                                                <On Platform="Android" Value="15" />
                                            </OnPlatform>
                                        </Label.FontSize>
                                        <Label.VerticalOptions>
                                            <OnPlatform x:TypeArguments="LayoutOptions">
                                                <On Platform="iOS" Value="CenterAndExpand" />
                                                <On Platform="Android" Value="Start" />
                                            </OnPlatform>
                                        </Label.VerticalOptions>
                                    </Label>
                                </Grid>
                            </Grid>
                        </converters:FastTemplateCell.View>
                    </converters:FastTemplateCell>

.cs

public class FastTemplateCell : ListViewTemplateCell
{
    private FFImageLoading.Forms.CachedImage imageDownloadIcon;
    private FFImageLoading.Forms.CachedImage imageDownloadSuccessIcon;
    private FFImageLoading.Forms.CachedImage imageDownloadFailIcon;

    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();

        this.EnsureCachedElements();

        if (dataimageDownloadIcon != null)
        {
            this.imageDownloadIcon.Source = "arrow_start.png";
        }

        if (dataimageDownloadSuccessIcon != null) 
        { 
            this.imageDownloadSuccessIcon.Source = "circle_done.png";
        }

        if (dataimageDownloadFailIcon != null)
        {
            this.imageDownloadFailIcon.Source = "failed.png";
        }
    }

    private void EnsureCachedElements()
    {
        if (this.imageDownloadIcon == null)
        {
            this.imageDownloadIcon = this.View.FindByName<CachedImage>("imageDownloadIcon");
        }
        if (this.imageDownloadSuccessIcon == null)
        {
            this.imageDownloadSuccessIcon = this.View.FindByName<CachedImage>("imageDownloadSuccessIcon");
        }
        if (this.imageDownloadFailIcon == null)
        {
            this.imageDownloadFailIcon = this.View.FindByName<CachedImage>("imageDownloadFailIcon");
        }
    }
}

Answer 1

根据你的描述和帖子的标题，我不知道为什么同一列中有三个图像，我猜你想在listview中的ffimageloading中显示图像，如果是的话，我做了一些代码你可以拿一看:

首先，请安装Xamarin.FFImageLoading.Forms bu nuget包，然后你就可以使用CachedImage了。

 <ListView HasUnevenRows="True" ItemsSource="{Binding images}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding title}" />
                            <ff:CachedImage Source="{Binding imagepath}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

 public partial class Page4 : ContentPage
{
    public ObservableCollection<imagemodel> images { get; set; }
    public Page4()
    {
        InitializeComponent();
        images = new ObservableCollection<imagemodel>()
        {
            new imagemodel(){title="image 1",imagepath="a11.jpg"},
            new imagemodel(){title="image 2",imagepath="a12.jpg"},
            new imagemodel(){title="image 3",imagepath="a13.jpg"}
        };
        this.BindingContext = this;
    }
}
public class imagemodel
{
    public string title { get; set; }
    public string imagepath { get; set; }
}

然后在Android项目Mainactivity.cs中初始化FFImageLoading库

FFImageLoading.Forms.Platform.CachedImageRenderer.Init(true);

和 iOS AppDelegate 的

FFImageLoading.Forms.Platform.CachedImageRenderer.Init();

https://heartbeat.fritz.ai/using-ffimageloading-in-xamaring-forms-for-caching-and-optimizing-images-48e381be226b

关于自定义viewcell，我建议你可以看看Customizing a ViewCell:

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/viewcell