grid tile .Cannot是否正确

Question

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

​

​

我总是发现网格很有挑战性，一些帮助会很好。

我做了以下操作，但如您所见，正方形的大小不同，标签6-9-12缺失

​

​

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

代码

 <StackLayout Orientation="Vertical" HorizontalOptions="Center" VerticalOptions="Center">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

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

        <Grid Grid.Row="2" Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>


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


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


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

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

    </Grid>
</StackLayout> 

Answer 1

您可以使用单个网格而不是嵌套网格来获得此布局。实现这一功能的网格特性是ColumnSpan。你看到高度不均匀的原因是整个内部网格试图挤到与它上面的每一行相同的垂直高度(这就是Height="*“在RowDefinition中得到的)。

对于此布局，将使用6列布局，每个标签都有一个适当的ColumnSpan：

<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可能是：

    <RowDefinition Height="20" />

当然，还要修改它下面标签的所有Grid.Row赋值。

编辑某些标签上的 Fixed Grid.Column设置。