Xamarin.forms 网格平铺布局。无法将其正确设置

我需要以平铺布局显示窗体。 我需要做到以下几点：

我总是觉得网格很有挑战性，一些帮助会很好

我做了以下操作，但正如您所看到的，正方形的大小不同，并且缺少标签6-9-12

关于如何调整网格以实现上述图片的任何帮助

代码

---

您可以使用单个网格而不是嵌套网格获得此布局。使这项工作的栅格功能是ColumnSpan。您看到高度不均匀的原因是，整个内部网格试图被压缩到与其上面的每一行相同的垂直高度（这就是行定义中的height=“*”）

对于此布局，将使用6列布局，每个标签具有适当的列跨度：

<Grid >
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label BackgroundColor="Lime" TextColor="White" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Text="Label1" HeightRequest="100"/>
    <Label BackgroundColor="Purple" TextColor="White" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="3"  Text="Label2" HeightRequest="100"/>
    <Label BackgroundColor="Aqua" TextColor="White" Grid.Row="1"  Grid.Column="0" Grid.ColumnSpan="6" Grid.ColumnSpan="2"  Text="Label3" HeightRequest="100"/>     

    <Label BackgroundColor="Red" TextColor="White"  Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"  Text="Label4" HeightRequest="100"/>
    <Label BackgroundColor="Blue" TextColor="White" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2"  Text="Label5" HeightRequest="100"/>
    <Label BackgroundColor="Black" TextColor="White" Grid.Row="2"  Grid.Column="2" Grid.ColumnSpan="2"  Text="This is a long description blah blah...." HeightRequest="100"/>  

    <Label BackgroundColor="Green" TextColor="White"  Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"  Text="Label7" HeightRequest="100"/>
    <Label BackgroundColor="Yellow" TextColor="White" Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2"  Text="Label8" HeightRequest="100"/>
    <Label BackgroundColor="Gray" TextColor="White" Grid.Row="3"  Grid.Column="4" Grid.ColumnSpan="2"  Text="Label9" HeightRequest="100" />  

    <Label BackgroundColor="AntiqueWhite" TextColor="White"  Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"  Text="Label10" HeightRequest="100"/>
    <Label BackgroundColor="Coral" TextColor="White" Grid.Row="4" Grid.Column="2" Grid.ColumnSpan="2"  Text="Label11"/>
    <Label BackgroundColor="BlueViolet" TextColor="White" Grid.Row="4"  Grid.Column="4" Grid.ColumnSpan="2"  Text="Label12" HeightRequest="100"/>  

    <Label BackgroundColor="Cornsilk" TextColor="White" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"  Text="Label13" HeightRequest="100"/>
    <Label BackgroundColor="DarkOrange" TextColor="White" Grid.Row="5"  Grid.Column="2" Grid.ColumnSpan="4"  Text="Label14" HeightRequest="100"/> 
</Grid>

在线框模型中，某些行之间似乎有空格。您可以通过在适当的位置插入固定大小的行来实现这一点，例如，第三行定义可能是：

    <RowDefinition Height="20" />

当然，还可以修改它下面标签的所有Grid.Row指定

编辑

---

修复了一些标签上的网格和列设置。

非常感谢您的回复，这肯定给了我一些工作。然而，它仍然没有按照我的模拟图片显示。标签1和2的大小不同，不填充屏幕。Lab3是正确的，columnSpan=6所有其他标签都有相同的问题，它们都应该具有相同的高度和宽度，并按比例填充屏幕，但标签3和14I除外。我没有更新所有网格。标签的列设置以说明6列。现在修好了。

    <RowDefinition Height="20" />