Xamarin：开始时列表视图单元格高度

Question

使用 listView，我正在试验（仅在 iOS 上）动态单元格开始显示不好。单元格是图像和文本的混合，在第一次执行时，文本和图像是混合的。 然后，滚动后，它们的大小调整得很好。

我的代码是：

<ListView x:Name="MyListView"  HasUnevenRows="true" IsVisible="false">
                    <ListView.ItemTemplate>
                        <DataTemplate>

                             <ViewCell>
                                <StackLayout Spacing="6" Margin="16">

                                    <Image   Aspect="AspectFill">
                                        <Image.Source>
                                          <UriImageSource Uri="{Binding Imagen}"/>
                                        </Image.Source>
                                    </Image>   

                                    <Label  Style="{StaticResource Noticia}" Font="11" Text="{Binding Fecha, StringFormat='{0:dd/MM/yyyy}'}"/>
                                    <Label  Style="{StaticResource Titular}" Text="{Binding Titular}" />
                                 </StackLayout>
                            </ViewCell>


                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>       

如何解决？

Answer 1

查看您的代码，您要求您的图像填充未定义高度的堆栈布局。会说这里的解决方案是手动定义高度。当您的图像都像 100 高度时，这很容易。

但是，如果您想拥有动态图像高度，那么请让我欢迎您来到有限的 xamarin 列表视图的世界，并提出几种解决方案。

1. 响应图像加载事件（您可能肯定有一个 - Success，如果您使用的是 ffimageloading 插件）获取接收到的图像原始宽度/高度并根据您当前的列表视图宽度按比例计算所需的高度请求。

               double ratio = item.ImageHeight / item.ImageWidth;
               item.ImageDynamicHeight = ratio * basewidth;  //basewidth can be YourListView.Width, remember to check if it's not -1
   

2. 更多乐趣来了：你的服务器 api 必须在传递的数据中包含图像原始高度/宽度信息，你将根据此信息设置 heightrequest，然后你的图像在下载时将完美地落入其中。将此解决方案用于新闻提要列表，服务器将新闻图像高度与新闻文本一起传递给我。

3. 如果您没有很多内存消耗行，您可以让自己使用自定义控件，该控件由带有可绑定 Source 属性的堆栈布局组成，您的单元格成为此堆栈布局的子级，在视觉上表现得更像它应该比标准的 xamarin.forms 列表视图更流畅。将此解决方案用于菜单列表、简短产品列表等。