在 Xamarin 表单中使用带有 DataTemplate 的 ListView 的性能和布局问题

Question

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

做这个菜单，我遇到了很多问题。每次尝试新方法时，我都会遇到新问题。

性能： 在 iOS 上，我的列表视图很好，而且从不滞后，即使有很多图片（现在大约 30 张，但我计划添加更多）。但在 Android 上，它开始滞后，并且在我添加“太多”后图片停止显示（超过 10 就足以让菜单完全不起作用）。图片嵌入在应用程序中，我认为缩小尺寸可能会有所帮助。我已将它们设为最大“800”（高度或宽度），但这并没有帮助。然后我认为布局“太复杂”。我在数据模板中使用仅包含此内容的 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 的描述时

布局 我是怎么做的，以及我尝试的两种主要方法： 当前的方式（来自屏幕截图）是这样的： `

<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”边距。这就是为什么我有时会上下移动几个像素，并且它并不总是与照片完全对齐。 我无法解释自己为什么描述（最后一个标签）并不总是具有完美的大小（或者至少总是相同，当文本相同时）......

当然你会说“你应该使用 Grid 而不是 StackLayout，渲染会更好，你不需要 -50，当你在 Xamarin 上使用图像时，使用 Grid 的性能比 StackLayout 更好” （至少我在论坛的任何地方都读到过）。 好吧，你猜怎么着 :smiley: 那是我首先做的，那是一场灾难！

我给你我使用的代码： `

<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: ）。

拜托，拜托，请帮助我：脸红：找到解决方案，告诉我“天哪，你太愚蠢了，你忘了*在这里添加一些东西*它会起作用”：那会让我很高兴：笑脸：

Answer 1

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

你能给网格或堆栈布局一个高度吗？还是图像？然后使用方面填充将图像放置在里面。

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