Xamarin.Forms 图像导致网格行高度过度增加答案

【问题标题】：Xamarin.Forms Images Causes Grid Row Height To Excessively IncreaseXamarin.Forms 图像导致网格行高度过度增加
【发布时间】：2020-10-18 23:24:55
【问题描述】：

网格已经在 foreach 循环外的代码开始处用列实例化，在这个循环内，行正在被实例化。

foreach (var post in posts)
{
    Frame featuredFrame = new Frame();
    featuredFrame.Padding = 20;
    featuredFrame.Margin = new Thickness(0, 10, 0, 0);

    Label postTitle = new Label();
    postTitle.FontSize = Device.GetNamedSize(NamedSize.Subtitle, typeof(Label));

    BoxView titleSeparator = new BoxView();
    titleSeparator.Color = Color.Gray;
    titleSeparator.HeightRequest = 1;
    titleSeparator.HorizontalOptions = LayoutOptions.Fill;

    Image postFeaturedImage = new Image();
    postFeaturedImage.Source = ImageSource.FromUri(imageUri);
    postFeaturedImage.Aspect = Aspect.AspectFill;

    BoxView imageSeparator = new BoxView();
    imageSeparator.Color = Color.Gray;
    imageSeparator.HeightRequest = 2;
    imageSeparator.HorizontalOptions = LayoutOptions.Fill;

    Label publishDate = new Label();
    publishDate.FontSize = Device.GetNamedSize(NamedSize.Caption, typeof(Label));

    StackLayout postDetails = new StackLayout();
    postDetails.Children.Add(postTitle);
    postDetails.Children.Add(titleSeparator);
    postDetails.Children.Add(postFeaturedImage);
    postDetails.Children.Add(imageSeparator);
    postDetails.Children.Add(publishDate);
    postDetails.Margin = new Thickness(0);
    postDetails.Padding = new Thickness(0);

    featuredFrame.Content = postDetails;

    postGrid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    postGrid.Children.Add(featuredFrame, columnNumber, rowNumber);
}

如您所见，正在创建的行将高度设置为 Auto，这应该意味着行与子行的高度相同。

这是上面代码的结果：

这是上面代码注释掉postDetails.Children.Add(postFeaturedImage);的结果：

在带有图像的屏幕截图中，发布日期时间文本下方有很多空白。在没有图片的截图中，这个空白已经消失了。

我需要可见的图片，但不应该有空白区域。我该如何解决这个问题？

【问题讨论】：

这个问题是在IOS才出现的吗？您可以尝试为您的图像或您的Frame设置特定的HeightRequest，我在Android中测试它具有不同的图片高度，这个结果就像这个截图。：imgur.com/a/Lbdb1TC，它似乎工作正常。
不，我也在 Android 上测试过，问题也存在。设置特定的HeightRequest 会导致网格出现故障，例如，它重叠并且不适合ScrollView
尝试使用 CollectionView docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/… 这可能比尝试自己构建所有网格更正确。

标签： c# xamarin.forms grid row row-height

【解决方案1】：

我遇到了同样的问题（这就是我发现问题的方式）并且我已经设法解决它。

我通过像这样添加VerticalOptions 解决了这个问题：

postDetails.VerticalOptions = LayoutOptions.Start;

并确保您拥有Height = GridLength.Auto 对应的RowDefinition。

【讨论】：