Question

我一直在尝试一种类似于该布局的布局

我做了如下操作，但是看上去并不近。

img2和label1的顶部应留有边距。

应该使用网格还是堆叠布局？

有什么建议吗？

<StackLayout>
<Frame Padding="0" CornerRadius="10" BorderColor="Green" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Image Grid.Row="0" Grid.Column="0" 
               Source="icon.png"
               HeightRequest="30" WidthRequest="30"
               HorizontalOptions="Start" />

        <Image Grid.Row="1" Grid.Column="1" 
               Source="icon.png"
               HeightRequest="30" WidthRequest="30"
               HorizontalOptions="Start" 
               VerticalOptions="Start" />

        <Label Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="3"
               Text ="Label1"
               HorizontalOptions="CenterAndExpand" />

        <Image Grid.Row="0" Grid.Column="4" 
               Source="icon.png"
               HeightRequest="30" WidthRequest="30"
               HorizontalOptions="End"></Image>


        <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
               Text ="Label2"
               Margin="20,10,0,0"
               HorizontalOptions="CenterAndExpand" />


        <Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
               Text ="Label3"
               Margin="20,10,0,0"
               HorizontalOptions="CenterAndExpand" />

        <Label Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="4"
               Text ="Label4 and this is some long text"
               Margin="20,10,0,0"
               HorizontalOptions="CenterAndExpand" />
    </Grid>
</Frame>

Answer 1

A grid is fine for the type of layout, whenever I have complex layouts to do like this I tend to just make the first row into a grid itself to have better control over my layout.

This should give you what you need as far as the alignment goes.

<StackLayout>
    <Frame Padding="0"
           CornerRadius="10"
           BorderColor="Green">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Grid Grid.Row="0"
                  Grid.ColumnSpan="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0"
                       Source="icon.png"
                       VerticalOptions="StartAndExpand"
                       HorizontalOptions="Start"
                       HeightRequest="30"
                       WidthRequest="30" />

                <Image Grid.Column="1"
                       Source="icon.png"
                       Margin="0,10,0,0"
                       HeightRequest="30"
                       HorizontalOptions="CenterAndExpand"/>

                <Label Grid.Column="2"
                       Text="Label1"
                       Margin="0,10,0,0"
                       HeightRequest="30"
                       HorizontalOptions="CenterAndExpand" />

                <Label Grid.Column="4"
                       Source="icon.png"
                       HeightRequest="30"
                       WidthRequest="30"
                       VerticalOptions="StartAndExpand"
                       HorizontalOptions="End" />

            </Grid>


            <Label Grid.Row="1"
                   Grid.ColumnSpan="1"
                   Text="Label2"
                   Margin="20,10,20,0"
                   HorizontalOptions="FillAndExpand" />


            <Label Grid.Row="2"
                   Text="Label3"
                   Grid.ColumnSpan="1"
                   Margin="20,0,20,0"
                   HorizontalOptions="FillAndExpand" />

            <Label Grid.Row="3"
                   Grid.ColumnSpan="2"
                   Text="Label4 and this is some long text"
                   Margin="20,10,20,10"
                   HorizontalOptions="FillAndExpand" />
        </Grid>
    </Frame>
</StackLayout>

For the images on the top row, I set the column width to auto for both ends to make sure that it only takes the space it needs, then I had the center columns fill the rest. All is left is to add the necessary margins and padding.

The 2 columns I left on the main grid are essentially to make sure the two middle rows only take half the space as intented.

如何在xamarin形式的框架中绘制此布局

1 个答案: