Xamarin Forms中将ListView与DataTemplate一起使用时的性能和布局问题

Question

我目前正在使用Xamarin Forms为iOS和Android制作应用程序。 整个应用程序运行正常，除了一个菜单，这给了我一些麻烦。 这是一张图片列表，以卡片视图样式显示，并带有标题和文本。 没有什么真正的疯狂。 目的是得到这个（这是我的应用中使用随机图片的屏幕截图）：

在执行此菜单时，我遇到了许多问题。 每次尝试一种新方法时，我都会遇到新问题。

性能：在iOS上，即使有很多图片（现在大约30张，但我打算添加更多图片），我的列表视图也很好，并且不会滞后。 但是在Android上，当我添加“太多”后（超过10个足以使菜单完全不起作用），它开始滞后并且图片停止显示。 图片嵌入在应用程序中，我认为减小尺寸会有所帮助。 我已经将它们设置为“最大”（高度或宽度）“ 800”，但这无济于事。 然后我以为布局太复杂了。 我用一个ListView进行了测试，该ListView仅在数据模板中包含以下内容：

<StackLayout Orientation="Vertical">
    <Image HorizontalOptions="Fill" Source="{Binding ImageSource}" Margin="0" Aspect="AspectFit"/>
</StackLayout>

`

而且它仍然滞后。我想布局不是问题。 所以我的问题是：Android真的不能够使用数据模板并排显示10/20图片列表吗？ 然后，我尝试使用第三方（FFImageLoading）。 我有更好的结果。 但这完全破坏了iOS上的布局...

错误我有很多错误（渲染错误）。 我尝试解决所有问题，但仍然可以在上面的屏幕快照中直接看到2个：-标题3很好，当标题4不应该位于图片上方几像素时-保留给图片的位置描述应该更大（2/3行），就像图像4的描述一样

布局我的工作方式以及尝试的2种主要方法：当前方法（来自屏幕截图）是这样的：

<Frame Style="{StaticResource CardStyle}" Padding="0">
    <StackLayout>
        <Image HorizontalOptions="Fill" Source="{Binding ImageSource}" Margin="0" Aspect="AspectFit"/>
        <Frame HasShadow="false" Padding="0" Margin="0,-50,0,0" HeightRequest="45" CornerRadius="0" BackgroundColor="{StaticResource TranslucidFrameBackgroundColor}"
               HorizontalOptions="FillAndExpand">
            <Label Text="{Binding Title}" Margin="10" Style="{StaticResource LightLabelStyle}" FontSize="18" VerticalTextAlignment="Center"/>
        </Frame>
        <Label Text="{Binding Text}" Margin="5"/>
    </StackLayout>
</Frame>

`

我讨厌必须在标题框架上加上“ -50”的空白。 这就是为什么我有时会增加或减少几个像素，并且它并不总是与照片完美对齐的原因。 我无法解释自己的原因，为什么描述（最后一个标签）并不总是具有完美的尺寸（或者当文本相同时，至少总是相同）...

当然，您会说“当您在Xamarin上使用图像时，您应该使用Grid而不是StackLayout，渲染会更好，您不需要-50，并且与GridLayout相比，Grid的性能更好”至少在论坛上到处都有）。 好吧，猜猜是什么：笑脸：那是我首先要做的，那是一场灾难！

我给你我使用的代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <Image Grid.Row="0" HorizontalOptions="Fill" Source="{Binding ImageSource}" Margin="0" Aspect="AspectFit"/>
    <Frame Grid.Row="0" VerticalOptions="End" HasShadow="false" Padding="0" Margin="0" HeightRequest="45" CornerRadius="0" BackgroundColor="{StaticResource TranslucidFrameBackgroundColor}"
           HorizontalOptions="FillAndExpand">
        <Label Text="{Binding Title}" Margin="10" Style="{StaticResource LightLabelStyle}" FontSize="18" VerticalTextAlignment="Center"/>
    </Frame>
    <Label Grid.Row="1" Text="{Binding Text}" Margin="5"/>
</Grid>

`

我非常喜欢此版本的模板。 它更加清晰和精确，并且不需要任何奇怪的余量来使其工作。 但是看一下结果：

据我了解，至少使用Xamarin Forms的iOS（非Android）使用原始图片获取网格的大小，而不是图片的“调整大小以适合屏幕大小”……所以我的网格很大且我们甚至都看不到这些卡片。 每次添加图片时，两张图片之间的差距会越来越大...我看到了一些有关在后面使用代码强制调整大小的调整，但是我真的不想这样做，因为我发现它很丑陋。

谁能告诉我，我是Xamarin Forms的“新手”，我来自使用WPF / xaml进行开发的多年经验：难道没有办法使用Xamarin Forms来做这种简单的模板吗？ 我在论坛（此处和stackoverflow）上看到了与该特定主题相关的maaaaany主题（数据模板中的图片）。 我尝试了许多其他解决方案，但不想污染这个已经很大的问题。 我尝试强制使用固定大小，但我希望您猜对了，这不是我想要做的，因为我的图片可以是人像或风景，无论大小。.请不要问我是否将“ HasUnevenRows”设置为true（是的，我做了：wink：）。

拜托，拜托，请帮我：blush：找到一个解决方案，告诉我“哦，你太愚蠢了，你忘了*在这里添加一些东西*它将起作用”：那会让我很高兴：smiley：

Answer 1

我认为您的主要问题是您没有为模板提供合适的尺寸来尝试将图像放入其中。 布局引擎必须查看所有图像，然后尝试找出如何调整每个元素的大小以适合它们。

可以给网格或堆栈布局一个高度吗？ 还是图像？ 然后使用宽高比填充将图像放入其中。

我看到您尝试过FFImageLoading-在Android上使用图像时，应始终使用该插件，否则会遇到性能和内存问题。