当在具有许多列的网格中时，标签会占用额外的高度

Question

在 Xamarin Forms 中，当我将标签放入包含许多列的网格中时，标签会占用额外的高度，就像文本更长并在下方溢出新行一样。
如果我将标签放在堆栈布局中，在网格之前或之后，它会正确显示，但在网格内部时却不会。
此外，如果网格有很多列，问题似乎更大。

如果我删除滚动视图并不能解决问题。
该问题似乎与为堆栈布局设置的 Margin of 20 有关。更大的边距使事情变得更糟，但是，即使我删除滚动视图和堆栈布局并且我只保留网格，问题仍然出现。

我正在使用最新的 Xamarin Forms (5.0.0.2291) 和 Xamarin Essentials (1.7.0)。我尝试了旧版本，例如XF 4.7.1239 - 问题仍然存在。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="App1.MainPage"
             NavigationPage.HasNavigationBar="False"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             ios:Page.UseSafeArea="true">
    <ContentPage.Content> <!-- totally not good... -->
        <ScrollView Orientation="Vertical">
            <StackLayout  Orientation="Vertical"
                          Margin="20"
                          HorizontalOptions="FillAndExpand"
                          BackgroundColor="LightGreen">
                <Grid Margin="0" Padding="0" BackgroundColor="LightCyan">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Label Text="Contact wire height low and high alert limits
                           contact wire 123456"
                           FontSize="18"
                           Padding="0"
                           Margin="0"
                           HorizontalOptions="FillAndExpand"
                           Grid.Row="0"
                           Grid.Column="0"
                           Grid.ColumnSpan="8"
                           BackgroundColor="LightBlue"/>
                </Grid>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

更新

Answer 1

这听起来像是 Grid 布局逻辑中的错误，与跨越多列的标签有关。

您可以通过明确告诉它只使用一行来控制它：

<Label ... MaxLines="1" ... />

或者您可能必须设置明确的行高。例如

<RowDefinition Height="30"/>

解决方法：如果 Grid 有

，则该错误不会发生

<Grid ...  ColumnSpacing="0" ...>

您可以对 Grid 的元素使用 Padding 来近似 ColumnSpacing 的作用。不太方便，但可能。

我在使用自定义标签时发现了这一点 class。第一次调用它的OnMeasure时，widthRequest显然没有包含ColumnSpacing；这不是网格的全宽！

之后，OnMeasure 以正确的宽度再次调用 - 但我推断 Grid 已经根据第一次调用确定了行高。

Answer 2

根据您的描述，Lable占用了额外的高度。在您的定义中，您使用 <RowDefinition Height="Auto"/>，因此视图将自动向下扩展。定义一个固定的高度可以让他在高度。显示正常。
你用过Grid.ColumnSpan="8"，使用这段代码就是把8列的space合并为一个，也就是用整行的space，可以看到这个Lable在显示器上占据了一整行。
对于您的列定义，您使用了八个 1*，相当于将一行分成 8 个部分，每个部分占 space 的 1/8。

当在具有许多列的网格中时，标签会占用额外的高度

Label takes extra height when inside a grid with many columns

xaml

xamarin.forms