Listview HasUnEvenRows 不工作

Question

我有一个列表视图，其中包含三个不同的单元格内容，其中只有一个通过绑定检查显示在该单元格上。我没有设置视图单元格的高度，而是将其堆栈布局子项的垂直选项设置为“填充”。现在，这适用于 android，但神秘地不适用于 iO。我已经将 hasuneven 行设置为 true，但是在点击每个单元格时，我注意到高度是相同的。我将展示 xaml 代码和项目源代码：

   <ListView
        x:Name = "lvConversations"
        VerticalOptions = "FillAndExpand"
        HorizontalOptions = "FillAndExpand"
        IsGroupingEnabled = "false"
        SeparatorVisibility = "None"
        HasUnevenRows = "true"
        ItemSelected = "messageSelected"
        BackgroundColor = "#F8F8F8"
        >

        <ListView.ItemTemplate>
            <DataTemplate>
                <local:ScaledViewCell>
                <local:ScaledStackLayout
                    VerticalOptions = "Fill"
                    HorizontalOptions = "FillAndExpand"
                    Orientation = "Vertical"
                    Spacing = "0">

                    <local:ScaledStackLayout
                        VerticalOptions = "Fill"
                        HorizontalOptions = "FillAndExpand"
                        Orientation = "Vertical"
                        Spacing = "0"
                        IsVisible = "{Binding isGroupHeader, Converter = {StaticResource inverter}}"
                        BackgroundColor = "Transparent">

                        <!-- OUTGOING -->
                            <local:ScaledStackLayout
                                HorizontalOptions = "FillAndExpand" Orientation = "Horizontal"
                                IsVisible = "{Binding isOutgoing}">


                                    <local:ScaledStackLayout
                                        VerticalOptions = "Fill"
                                        HorizontalOptions = "EndAndExpand"
                                        BackgroundColor = "Transparent"
                                        Orientation = "Vertical"
                                        Margin = "21,14,15,0"
                                        Spacing = "0">

                                        <local:ScaledStackLayout
                                            Orientation = "Horizontal"
                                            VerticalOptions = "Fill"
                                            HorizontalOptions = "EndAndExpand"
                                            Spacing = "0"
                                            >
                                            <local:CorneredView
                                                CornerRadius = "15"
                                                BackgroundColor = "#d3eaf6"
                                                VerticalOptions = "Fill"
                                                HorizontalOptions = "End"
                                                >
                                                <Label 
                                                    VerticalOptions = "Fill"
                                                    HorizontalOptions = "Fill"
                                                    Text = "{Binding message}"
                                                    FontSize = "10"
                                                    TextColor = "Black"
                                                    Margin = "7,10,7,10"
                                                    LineBreakMode = "WordWrap"
                                                />

                                            </local:CorneredView>
                                            <Image
                                                Margin = "0,11,7,0"
                                                Source = "ic_msg_arrow_outgoing"
                                                WidthRequest = "5"
                                                HeightRequest = "10"
                                                Aspect = "AspectFit"
                                                BackgroundColor = "Transparent"
                                                VerticalOptions = "Start"
                                                />
                                            <ffimageloading:CachedImage
                                                WidthRequest = "37"
                                                HeightRequest = "37"
                                                BackgroundColor = "Transparent"
                                                VerticalOptions = "Start"
                                                Aspect = "AspectFill"
                                                Source = "{Binding sender.imageUrl}"
                                                DownsampleToViewSize =  "true"
                                                DownsampleUseDipUnits = "true"
                                                >

                                                <ffimageloading:CachedImage.Transformations>
                                                <fftransformations:CircleTransformation>
                                                    <x:Arguments>
                                                      <x:Double>2</x:Double>
                                                      <x:String>#FF8A07</x:String>
                                                    </x:Arguments>
                                                </fftransformations:CircleTransformation>
                                                </ffimageloading:CachedImage.Transformations>

                                        </ffimageloading:CachedImage>

                                        </local:ScaledStackLayout>

                                        <Label
                                            Margin = "0,3,0,0"
                                            VerticalOptions = "Center"
                                            HorizontalOptions = "Start"
                                            Text = "{Binding formattedDateSent}"
                                            HeightRequest = "10"
                                            FontSize = "8"
                                            TextColor = "#4D212121"/>
                                    </local:ScaledStackLayout>


                            </local:ScaledStackLayout>

                        <!--INCOMING-->
                        <local:ScaledStackLayout
                            WidthRequest = "284"
                            VerticalOptions = "Fill"
                            BackgroundColor = "Transparent"
                            Orientation = "Vertical"
                            Margin = "15,14,21,0"
                            Spacing = "0"
                            IsVisible = "{Binding isOutgoing, Converter = {StaticResource inverter}}">

                            <local:ScaledStackLayout
                                Orientation = "Horizontal"
                                WidthRequest = "284"
                                VerticalOptions = "Fill"
                                Spacing = "0"
                                >
                                <ffimageloading:CachedImage
                                    WidthRequest = "37"
                                    HeightRequest = "37"
                                    BackgroundColor = "Transparent"
                                    VerticalOptions = "Start"
                                    Aspect = "AspectFill"
                                    Source = "{Binding sender.imageUrl}"
                                    DownsampleToViewSize =  "true"
                                    DownsampleUseDipUnits = "true"
                                    >
                                    <ffimageloading:CachedImage.Transformations>
                                        <fftransformations:CircleTransformation>
                                            <x:Arguments>
                                              <x:Double>2</x:Double>
                                              <x:String>#FF8A07</x:String>
                                            </x:Arguments>
                                        </fftransformations:CircleTransformation>
                                    </ffimageloading:CachedImage.Transformations>
                                </ffimageloading:CachedImage>

                                <Image
                                    Margin = "7,15,0,0"
                                    Source = "ic_msg_arrow_incoming"
                                    WidthRequest = "5"
                                    HeightRequest = "10"
                                    Aspect = "AspectFit"
                                    BackgroundColor = "Transparent"
                                    VerticalOptions = "Start"

                                    />
                                <local:CorneredView
                                    WidthRequest = "235"
                                    VerticalOptions = "Fill"
                                    CornerRadius = "15"
                                    BackgroundColor = "#ECECEC"
                                    IsClippedToBounds = "true"
                                    >
                                    <Label 
                                        VerticalOptions = "Fill"
                                        HorizontalOptions = "FillAndExpand"
                                        Text = "{Binding message}"
                                        FontSize = "10"
                                        TextColor = "Black"
                                        Margin = "7,10,7,10"
                                        LineBreakMode = "WordWrap"
                                    />

                                </local:CorneredView>
                            </local:ScaledStackLayout>

                            <Label
                                Margin = "0,3,0,0"
                                VerticalOptions = "Center"
                                HorizontalOptions = "End"
                                Text = "{Binding formattedDateSent}"
                                HeightRequest = "10"
                                FontSize = "8"
                                TextColor = "#4D212121"/>

                        </local:ScaledStackLayout>

                    </local:ScaledStackLayout>
                    <!--Message Group-->
                    <local:ScaledStackLayout
                        Margin = "0"
                        Padding = "0"
                        Spacing = "0"
                        Orientation = "Vertical"
                        VerticalOptions = "Fill"
                        IsVisible = "{Binding isGroupHeader}"
                        BackgroundColor = "Transparent"
                        >
                        <!--label and button-->
                        <local:ScaledStackLayout
                            Margin = "9,0,9,0"
                            HeightRequest = "19"
                            Orientation = "Horizontal"
                            Padding = "0,5,7,0"
                            BackgroundColor = "Transparent">

                            <Label 
                                Text = "{Binding groupHeaderTitle}"
                                HorizontalOptions = "FillAndExpand"
                                HeightRequest = "8"
                                FontSize = "8"
                                TextColor = "#212121"
                                VerticalTextAlignment = "Center"
                                HorizontalTextAlignment = "Center"
                                BackgroundColor = "Transparent"/>

                        </local:ScaledStackLayout>

                        <BoxView
                            Margin = "9,0,9,0"
                            HorizontalOptions = "FillAndExpand"
                            HeightRequest = "1"
                            BackgroundColor = "#4D212121"/>


                    </local:ScaledStackLayout>

                    </local:ScaledStackLayout>
                </local:ScaledViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

    </ListView>

我还会附上android和iOs上的照片

如您所见，单元格是重叠的。

我用来填充列表视图的代码是这样的：

public void OnSuccess(JObject response, BaseAPI caller)
{
    if (Constants.isDebug)
    {

        JObject json = TestData.getTestData("conversation_messages_listed.json");
        response = json;
    }



    ObservableCollection<Message> arrMessages = JsonConvert.DeserializeObject<ObservableCollection<Message>>(response["messages"].ToString(), new JsonSerializerSettings()
    {
        NullValueHandling = NullValueHandling.Ignore,
        MissingMemberHandling = MissingMemberHandling.Ignore
    });

    lvConversations.ItemsSource = arrMessages;
}

请帮忙，我是 xamarin 的新手。

Answer 1

HasUnevenRows 默认情况下在 iOS 上不起作用。看到这个comment on a bug report：

iOS 不支持自动调整行单元格大小，您必须设置 ListView.RowHeight 或 Cell.Height。不幸的是，我们并没有明确禁止它在 Android 或 Windows Phone 上运行（在没有我们干预的情况下它可以正常工作），这导致一些人认为 iOS 在这方面存在缺陷。

不幸的是，这是 iOS 平台的限制，因此是预期的行为。

查看docs for HasUnevenRows property 也可能会有所帮助。

当应用开发者将 ListView.HasUnevenRows 属性设置为 true 时，列表视图的行为仍然取决于 ListView.RowHeight 属性。首先，如果开发人员没有设置 ListView.RowHeight 属性或将其设置为 -1，则列表视图项会自动调整大小以适合其内容。如上所述，这是 ListView.HasUnevenRows 值为 true 的所需行为和预期用例。其次，如果开发人员将 ListView.RowHeight 属性设置为 0 或除 -1 以外的负值，则 ListView 中的所有行都将具有系统的默认高度，无论其内容的高度如何。第三，也是最后，如果开发人员将 ListView.RowHeight 设置为正值，那么 ListView 中的所有行，无论其内容的高度如何，都将与 ListView.RowHeight 一样高，就好像 ListView.HasUnevenRows 已设置为假的。

Answer 2

点击后可以拨打ForceUpdateSize()，解决问题：

var clicked = (StackLayout)sender;
            ((ViewCell)((Grid)((StackLayout)((PancakeView)((StackLayout)clicked.Parent).Parent).Parent).Parent).Parent).ForceUpdateSize();