Question

Xamarin布局建议

您好，鉴于构建屏幕时的经验法则，移动设备的屏幕大小是自然的您是否会一直使用“ Flexlayout”而不是网格？

据我了解，flexlayout更适合于适应各种屏幕尺寸，而不会增加页面的复杂性。

尽管阅读了很少的文档，仍然不了解“增长和收缩”。

您如何形容增长和收缩？

一个样本

<Grid 
        RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" />
            <RowDefinition Height="6*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0" BackgroundColor="Green">
            <Label Text="Header with logo" 
                   HorizontalTextAlignment="Center" 
                   VerticalTextAlignment="Center" />
        </StackLayout>
        <StackLayout Grid.Row="1" BackgroundColor="LightBlue">
            <Label Text="Content" 
                   HorizontalTextAlignment="Center" 
                   VerticalTextAlignment="Center" />
        </StackLayout>
        <StackLayout Grid.Row="2" BackgroundColor="Red">
            <Label Text="Footer" 
                   HorizontalTextAlignment="Center" 
                   VerticalTextAlignment="Center" />
        </StackLayout>
    </Grid>

VS

    <FlexLayout Direction="Column">

        <!-- Header -->
        <Label Text="HEADER"
               FontSize="Large"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center" />


        <!-- Body -->
        <FlexLayout FlexLayout.Grow="1">

            <!-- Content -->
            <Label Text="Content"
                   FontSize="Large"
                   BackgroundColor="Gray"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"
                   FlexLayout.Grow="1" />
        </FlexLayout>

        <!-- Footer -->
        <Label Text="FOOTER"
               FontSize="Large"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>

Answer 1

Grow设置为1。这意味着像这些屏幕截图一样，所有额外的垂直空间都分配给了该空白标签。

我添加第二个label，称为content2，如果设置为增长0，content2将不会填充额外的垂直空间

如果我设置为1，content2将填充额外的垂直空间

shrink属性在Wrap属性设置为NoWrap并且一排子项的合计宽度大于FlexLayout的宽度，或者一列子项的合计高度较大时起作用比FlexLayout的高度高。通常，FlexLayout将通过限制其大小来显示这些子项。 “收缩”属性可以指示优先显示哪些子级的完整尺寸。

您可以下载此演示，并自己进行测试。

https://developer.xamarin.com/samples/xamarin-forms/UserInterface/FlexLayoutDemos/

弹性布局或网格，可更好地处理屏幕尺寸

1 个答案: