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。您看到不均匀高度的原因是整个内部网格试图被挤压到与其上方的每一行相同的垂直高度（这是什么高度=＆＃34; *＆＃ 34;进入RowDefinition）。

对于此布局，将使用6列布局，每个Label都有适当的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分配。

修改修复了某些标签上的Grid.Column设置。

网格图块布局。无法正确使用

1 个答案: