Question

努力按照图片获得正确的布局如你所见，你似乎很难用columnspan和rowspan

以下是我的工作

 <Grid
            ColumnSpacing="10"
            RowSpacing="10"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>


            <Label Grid.Row="0" Grid.ColumnSpan="4" Text="Title" BackgroundColor="Beige" HorizontalOptions="FillAndExpand"/>
            <Label  Grid.Row="1" Grid.Column="3" Text="Label1" HorizontalOptions="Start"/>          
            <Label  Grid.Row="1" Grid.Column="4" Text="Label2"/>
            <Label Grid.Row="2" Grid.Column="1"  Text="Label3" HorizontalOptions="Start"/>
            <Label Grid.Row="3"  Grid.Column="1" Grid.ColumnSpan="4" Text="Label4"   BackgroundColor="Gainsboro"/>
        </Grid>

任何想法，更正

Answer 1

你在最后两个标签上犯了错误。列应为0，如

Grid.Column = “0”

试试这个：

<Grid
    ColumnSpacing="10"
    RowSpacing="10"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Label Grid.Row="0" Grid.ColumnSpan="5" Text="Title" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
    <Label Grid.Row="1" Grid.Column="3" Text="Label1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>          
    <Label Grid.Row="1" Grid.Column="4" Text="Label2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
    <Label Grid.Row="2" Grid.Column="0" Text="Label3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
    <Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="4" Text="Label4" BackgroundColor="Silver" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" LineBreakMode="WordWrap"/>
</Grid>

xamarin中的布局问题网格无法正确使用

1 个答案: