Question

我有xamarin形式的ListView。在上下滚动此Listview时，此时钟图像会出现并不一致地消失。

即使我对可见性进行硬编码，图像也不一致。

<DataTemplate x:Key="itemTemplate">
            <ViewCell>
                <StackLayout Orientation="Horizontal" Spacing="5" Padding="0,0,10,0">
                    <Label HorizontalOptions="StartAndExpand"  VerticalOptions="Center" TextColor="#455560" Text="{Binding DispenseTypeWithMachineCount}" WidthRequest="250"/>
                    <Image IsVisible="{Binding IsServiceInProgress}" Source="ic_progress.png" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" HorizontalOptions="EndAndExpand"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>

<ListView x:Name="ListViewAccounts" Margin="0,0,0,0" ItemsSource="{Binding ExpandedGroups}" GroupDisplayBinding="{Binding Title}" IsGroupingEnabled="true" ItemTemplate="{StaticResource accountTemplateSelector}" GroupHeaderTemplate="{StaticResource groupHeaderTemplate}">
            <ListView.Behaviors>
                <behaviors:EventToCommandBehavior EventName="ItemTapped" Command="{Binding Path=BindingContext.ListViewAccountItemTappedCommand                               Source={x:Reference ListViewAccounts}}" />
            </ListView.Behaviors>
            <x:Arguments>
                <ListViewCachingStrategy>RecycleElement</ListViewCachingStrategy>
            </x:Argume

Answer 1

我以前在运动图像方面也遇到过问题，它们的行为不一致。我已经通过尽可能使用矢量化的图标（而不是图像文件）解决了其中的大多数问题，这似乎很适合您的情况，因为您还使用了图标。

我建议使用FFImageLoading（如之前所建议）来加载SVG，它可以快速加载并缓存它们以备将来使用。执行以下操作，以将PNG引用替换为SVG：

从NuGet软件包管理器中将FFImageLoading和FFImageLoading.Svg安装到项目中
从FontAwesome下载clock.svg
将图标放在项目中的文件夹内，并将其构建操作设置为嵌入式资源
将FFImageLoading引用添加到XAML的顶部：

    xmlns:ffsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"

将Image内的DataTemplate元素替换为以下内容：

    <ffsvg:SvgCachedImage IsVisible="{Binding IsServiceInProgress}" Source="resource://[PATH_TO_YOUR_SVG_INSIDE_NAMESPACE].clock.svg" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" HorizontalOptions="EndAndExpand"/>

示例：

    <ffsvg:SvgCachedImage IsVisible="{Binding IsServiceInProgress}" Source="resource://MyProject.Resources.clock.svg" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" HorizontalOptions="EndAndExpand"/>

SVG的负载更轻，分辨率更高，并且应解决闪烁问题。

另一件事可能会帮助弄乱List CachingStrategy属性，因为它定义了List中元素的缓存和呈现方式。检查this以获得有关ListView性能的更多信息。

Answer 2

您还可以更改列表视图回收元素的方式，我注意到您正在实现它，但是您看起来很奇怪：

策略类型：

RetainElement // the default value
RecycleElement
RecycleElementAndDataTemplate

ListView：

<ListView
    x:Name="ListViewAccounts"
    Margin="0,0,0,0"
    ItemsSource="{Binding ExpandedGroups}"
    GroupDisplayBinding="{Binding Title}"
    IsGroupingEnabled="true"
    ItemTemplate="{StaticResource accountTemplateSelector}"
    CachingStrategy="RecycleElement"
    GroupHeaderTemplate="{StaticResource groupHeaderTemplate}">
    <ListView.Behaviors>
        <behaviors:EventToCommandBehavior
            EventName="ItemTapped"
            Command="{Binding Path=BindingContext.ListViewAccountItemTappedCommand,  Source={x:Reference ListViewAccounts}}" />
    </ListView.Behaviors>
</ListView>

在ListView Xamarin表单中滚动时图像消失

2 个答案: