当 HasUnevenRows = true 时如何强制 Xamarin Forms ListView 重绘/调整重叠标签的大小

Question

我有一个带有列表视图的页面，其中有一个内容视图作为视单元。 contentview 有一个图像（实际上是一个缓存的图像对象）。列表视图具有不均匀的行以适应各种图像高度。

不幸的是，标签等对象在这些行中的图像加载后从每一行重叠。我读过我应该使用“ForceUpdateSize”，但我不确定在代码中的哪个位置放置它（或者即使它会起作用）。

（顺便说一句，当我的内容视图（viewcell）有一个带有星号高度的网格时，没有重叠，但这会导致行之间出现很多不必要的间隙）。

附：这是一个内容视图，因为我在没有列表视图的情况下在 Xamarin 页面中重新使用此 XAML 和代码。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns:local="clr-namespace:myapp" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="myapp.HomePage">
<ContentPage.Content>
    <ListView x:Name="ListView" HasUnevenRows="true">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <local:MyContentView x:Name="MyContentView">
                    </local:MyContentView>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage.Content>

 <?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="myapp.MyContentView">
<ContentView.Content>
    <StackLayout x:Name="MainLayout">
        <StackLayout Orientation="Horizontal" Margin="10,1">
            <Button Text="username" x:Name="UsernameBtn" Clicked="Username_Clicked" />
            <Button Text="follow" x:Name="FollowBtn" HorizontalOptions="EndAndExpand" Clicked="Follow_Clicked" />
            <Button Text="..." x:Name="MoreBtn" Clicked="More_Clicked" />
        </StackLayout>
        <ffimageloading:CachedImage x:Name="Image" HorizontalOptions="Center" VerticalOptions="Center" DownsampleToViewSize="true" Source="http://loremflickr.com/600/600/nature?filename=simple.jpg">
        </ffimageloading:CachedImage>
        <StackLayout Orientation="Horizontal" Margin="10,0">
            <Button Text="Like" x:Name="LikeBtn" Clicked="Like_Clicked" Image="http://www.endlessicons.com/wp-content/uploads/2014/03/bookmark-icon-2-614x460.png" />
            <Button Text="Comment" x:Name="CommentBtn" Clicked="Comment_Clicked" />
            <Button Text="Share" x:Name="ShareBtn" Clicked="Share_Clicked" />
            <Button Text="Bkmrk" x:Name="BookMarkPostBtn" Clicked="BookmarkPost_Clicked" HorizontalOptions="EndAndExpand" Image="http://www.endlessicons.com/wp-content/uploads/2014/03/bookmark-icon-2-614x460.png" />
        </StackLayout>
        <StackLayout Orientation="Horizontal" Margin="10,0">
            <Label x:Name="LikeCount" Text="1,234" />
            <Label Text="Likes" />
        </StackLayout>
        <Label x:Name="CommentLabel" Text="Comments" />
        <Label x:Name="TagLabel" Text="Tags" />
    </StackLayout>

    <!--
    <Grid ColumnSpacing="5" RowSpacing="5" Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <StackLayout Orientation="Horizontal" Margin="10,1" Grid.Row="0" Grid.Column="0" >
            <Button Text="username" x:Name="UsernameBtn" Clicked="Username_Clicked" />
            <Button Text="follow" x:Name="FollowBtn" HorizontalOptions="EndAndExpand" Clicked="Follow_Clicked" />
            <Button Text="..." x:Name="MoreBtn" Clicked="More_Clicked" />

        </StackLayout>

        <ffimageloading:CachedImage Grid.Row="1" Grid.Column="0"  x:Name="Image" HorizontalOptions="Center" VerticalOptions="Center" DownsampleToViewSize="true" Source="http://loremflickr.com/600/600/nature?filename=simple.jpg">
            </ffimageloading:CachedImage>


        <StackLayout Grid.Row="2" Grid.Column="0"  Orientation="Horizontal" Margin="10,0">
            <Button Text="Like" x:Name="LikeBtn" Clicked="Like_Clicked" Image="http://www.endlessicons.com/wp-content/uploads/2014/03/bookmark-icon-2-614x460.png" />
            <Button Text="Comment" x:Name="CommentBtn" Clicked="Comment_Clicked" />
            <Button Text="Share" x:Name="ShareBtn" Clicked="Share_Clicked" />
            <Button Text="Bkmrk" x:Name="BookMarkPostBtn" Clicked="BookmarkPost_Clicked" HorizontalOptions="EndAndExpand" Image="http://www.endlessicons.com/wp-content/uploads/2014/03/bookmark-icon-2-614x460.png" />
        </StackLayout>

        <StackLayout Grid.Row="3" Grid.Column="0"  Orientation="Horizontal" Margin="10,0">
            <Label x:Name="LikeCount" Text="1,234" />
            <Label Text="Likes" />
        </StackLayout>

        <Label Grid.Row="4" Grid.Column="0"  x:Name="CommentLabel" Text="Comments" />
        <Label Grid.Row="5" Grid.Column="0"  x:Name="TagLabel" Text="Tags" />


    </Grid>
    -->

</ContentView.Content>

Answer 1

创建一个继承自 ViewCell 的类，并在 ItemTemplate 中使用它而不是 ViewCell。在这个类中，您将调用 ForceUpdateSize()。

但是，如果 Grid 似乎工作，这可能不是您的实际问题，尽管有额外的间距。您可能应该避免 * 在 ListView 内的 Grid 中使用高度，而是使用自动或像素高度。