The Xamarin.Forms FlexLayout

项目
04/17/2024

使用 FlexLayout 堆叠或包装子视图集合。

版本 Xamarin.FormsFlexLayout 3.0 中的 Xamarin.Forms 新增功能。它基于 CSS 灵活框布局模块，通常称为 弹性布局 或 弹性框，因此称为因为它包括许多灵活的选项来排列布局中的子元素。

FlexLayout 类似于 Xamarin.FormsStackLayout 它可以在堆栈中水平和垂直排列其子级。但是， FlexLayout 如果单个行或列中容纳太多，并且还具有许多用于方向、对齐和适应各种屏幕大小的选项，则它还能够包装其子级。

FlexLayout 派生自 Layout<View>，并继承类型 IList<View> 的 Children 属性。

FlexLayout 定义六个公共可绑定属性和五个附加的可绑定属性，这些属性影响其子元素的大小、方向和对齐方式。（如果不熟悉附加的可绑定属性，请参阅文章附加属性。）下面有关可绑定属性的部分详细介绍了这些属性，并详细介绍了附加的可绑定属性。但是，本文从一个部分开始，其中一些常见使用方案FlexLayout更非正式地描述了其中许多属性。本文末尾将介绍如何与 CSS 样式表组合FlexLayout。

常见使用方案

FlexLayoutDemos 示例程序包含多个页面，这些页面演示了一些常见用途FlexLayout，并允许你试验其属性。

将 FlexLayout 用于简单堆栈

“ 简单堆栈 ”页显示如何 FlexLayout 替代 StackLayout 但使用更简单的标记。此示例中的所有内容在 XAML 页中定义。包含 FlexLayout 四个子级：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.SimpleStackPage"
             Title="Simple Stack">

    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">

        <Label Text="FlexLayout in Action"
               FontSize="Large" />

        <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />

        <Button Text="Do-Nothing Button" />

        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

下面是在 iOS、Android 和通用 Windows 平台上运行的页面：

SimpleStackPage.xaml 文件中显示了三个FlexLayout属性：

该 Direction 属性设置为枚举的值 FlexDirection 。默认为 Row。将属性设置为 Column 使子 FlexLayout 项排列在单个项列中。

当列中 FlexLayout 的项排列时， FlexLayout 据说有一个垂直主轴和一个水平 交叉轴。
该 AlignItems 属性的类型为类型 FlexAlignItems ，并指定项在十字轴上对齐的方式。该 Center 选项会导致每个项水平居中。

如果使用此 StackLayout 任务而不是用于 FlexLayout 此任务，则通过将每个项的属性分配给来居中设置 HorizontalOptions 所有项 Center。该 HorizontalOptions 属性不适用于 a FlexLayout的子级，但单个 AlignItems 属性可实现相同的目标。如果需要，可以使用 AlignSelf 附加的可绑定属性覆盖 AlignItems 各个项的属性：
```
<Label Text="FlexLayout in Action"
       FontSize="Large"
       FlexLayout.AlignSelf="Start" />
```
更改后，此 Label 更改位于阅读顺序从左到右时的左边缘 FlexLayout 。
该 JustifyContent 属性的类型为类型 FlexJustify，并指定项目在主轴上的排列方式。该 SpaceEvenly 选项在所有项之间以及第一个项目上方以及最后一项下方分配所有剩余的垂直空间。

如果使用 a StackLayout，则需要分配 VerticalOptions 每个项的属性以实现 CenterAndExpand 类似的效果。但是，该 CenterAndExpand 选项将在每个项之间分配的两倍于第一项和最后一项之后的空间。可以通过将属性FlexLayout设置为来模拟CenterAndExpand该选项VerticalOptions。JustifyContentSpaceAround

这些 FlexLayout 属性在下面的“可绑定属性”部分中 进行了更详细的 讨论。

使用 FlexLayout 包装项目

FlexLayoutDemos 示例的照片包装页演示了如何将FlexLayout子级包装到其他行或列。 XAML 文件实例化 FlexLayout 并为其分配两个属性：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.PhotoWrappingPage"
             Title="Photo Wrapping">
    <Grid>
        <ScrollView>
            <FlexLayout x:Name="flexLayout"
                        Wrap="Wrap"
                        JustifyContent="SpaceAround" />
        </ScrollView>

        <ActivityIndicator x:Name="activityIndicator"
                           IsRunning="True"
                           VerticalOptions="Center" />
    </Grid>
</ContentPage>

未 Direction 设置此属性 FlexLayout ，因此它具有默认设置 Row，这意味着子级按行排列，主轴为水平。

该 Wrap 属性属于枚举类型 FlexWrap。如果行上容纳的项目太多，则此属性设置会导致项换行到下一行。

请注意， FlexLayout 它是一个 ScrollView子级。如果页面上的行太多，则 ScrollView 具有默认 Orientation 属性 Vertical 并允许垂直滚动。

该 JustifyContent 属性在主轴（水平轴）上分配剩余空间，以便每个项被相同数量的空白空间包围。

代码隐藏文件访问示例照片的集合，并将其添加到 Children ：FlexLayout

public partial class PhotoWrappingPage : ContentPage
{
    // Class for deserializing JSON list of sample bitmaps
    [DataContract]
    class ImageList
    {
        [DataMember(Name = "photos")]
        public List<string> Photos = null;
    }

    public PhotoWrappingPage ()
    {
        InitializeComponent ();

        LoadBitmapCollection();
    }

    async void LoadBitmapCollection()
    {
        using (WebClient webClient = new WebClient())
        {
            try
            {
                // Download the list of stock photos
                Uri uri = new Uri("https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json");
                byte[] data = await webClient.DownloadDataTaskAsync(uri);

                // Convert to a Stream object
                using (Stream stream = new MemoryStream(data))
                {
                    // Deserialize the JSON into an ImageList object
                    var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList));
                    ImageList imageList = (ImageList)jsonSerializer.ReadObject(stream);

                    // Create an Image object for each bitmap
                    foreach (string filepath in imageList.Photos)
                    {
                        Image image = new Image
                        {
                            Source = ImageSource.FromUri(new Uri(filepath))
                        };
                        flexLayout.Children.Add(image);
                    }
                }
            }
            catch
            {
                flexLayout.Children.Add(new Label
                {
                    Text = "Cannot access list of bitmap files"
                });
            }
        }

        activityIndicator.IsRunning = false;
        activityIndicator.IsVisible = false;
    }
}

下面是正在运行的程序，从上到下逐步滚动：

使用 FlexLayout 的页面布局

Web 设计中有一个名为“圣杯”的标准布局，因为它是一种非常理想的布局格式，但通常很难完美实现。布局由页面顶部的页眉和底部的页脚组成，两者都延伸到页面的整个宽度。占据页面中心的是主要内容，但通常在内容左侧有列式菜单，右侧为补充信息（有时称为侧边栏区域）。 CSS 灵活框布局规范的第 5.4.1 节介绍了如何使用弹性框实现圣杯布局。

FlexLayoutDemos 示例的 Holy Grail 布局页面演示了此布局的简单实现，其中一个嵌套在另一个FlexLayout布局中。 由于此页面专为纵向模式下的手机设计，内容区域左侧和右侧的区域宽度仅为 50 像素：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.HolyGrailLayoutPage"
             Title="Holy Grail Layout">

    <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" />

            <!-- Navigation items-->
            <BoxView FlexLayout.Basis="50"
                     FlexLayout.Order="-1"
                     Color="Blue" />

            <!-- Aside items -->
            <BoxView FlexLayout.Basis="50"
                     Color="Green" />

        </FlexLayout>

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

此处正在运行：

导航和侧边栏区域通过 BoxView 呈现在左右两侧。

XAML 文件中的第一 FlexLayout 个有一个垂直主轴，并且包含三个子级在列中排列。它们是页眉、页面正文和页脚。嵌套 FlexLayout 有一个水平主轴，其中三个子级按行排列。

此程序演示了三个附加的可绑定属性：

第 Order 一个 BoxView设置附加的可绑定属性。此属性是默认值为 0 的整数。可以使用此属性更改布局顺序。通常，开发人员更喜欢页面的内容显示在导航项和项旁的标记中。将 Order 第一个 BoxView 属性设置为小于其其他同级的值会导致它显示为行中的第一项。同样，可以通过将 Order 属性设置为大于其同级的值来确保项最后显示。
附加 Basis 的可绑定属性在两 BoxView 个项上设置，使其宽度为 50 像素。此属性的类型FlexBasis是一种结构，它定义一Auto个名为的FlexBasis静态属性，这是默认值。可用于 Basis 指定像素大小或指示项在主轴上占用的空间的百分比。它被称为基础，因为它指定一个项大小，它是所有后续布局的基础。
该 Grow 属性在嵌套 Layout 和表示内容的子级上 Label 设置。此属性的类型 float 为 0，默认值为 0。当设置为正值时，沿主轴的所有剩余空间将分配给该项，并且分配给具有正值的 Grow同级。空间按比例分配给值，有点像星型中的 Grid星型。

第一个 Grow 附加属性在嵌套 FlexLayout上设置，指示这是 FlexLayout 占用外部 FlexLayout所有未使用的垂直空间。对表示内容设置Label第二Grow个附加属性，指示此内容将占用内部FlexLayout所有未使用的水平空间。

还有一个类似的 Shrink 附加可绑定属性，当子级的大小超过 FlexLayout 大小但不需要包装时，可以使用此属性。

带 FlexLayout 的目录项

FlexLayoutDemos 示例中的目录项页类似于 CSS Flex Layout Box 规范第 1.1 节中的示例 1，只不过它显示三只猴子的水平可滚动系列图片和说明：

这三只猴子中的每只都包含在一个 FlexLayout 给定 Frame 的明确高度和宽度，这也是一个更大的 FlexLayout孩子。在此 XAML 文件中，子级的大多数属性 FlexLayout 都以样式指定，但其中一个属性都是隐式样式：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.CatalogItemsPage"
             Title="Catalog Items">
    <ContentPage.Resources>
        <Style TargetType="Frame">
            <Setter Property="BackgroundColor" Value="LightYellow" />
            <Setter Property="BorderColor" Value="Blue" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="CornerRadius" Value="15" />
        </Style>

        <Style TargetType="Label">
            <Setter Property="Margin" Value="0, 4" />
        </Style>

        <Style x:Key="headerLabel" TargetType="Label">
            <Setter Property="Margin" Value="0, 8" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>

        <Style TargetType="Image">
            <Setter Property="FlexLayout.Order" Value="-1" />
            <Setter Property="FlexLayout.AlignSelf" Value="Center" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="Text" Value="LEARN MORE" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="BackgroundColor" Value="Green" />
            <Setter Property="BorderRadius" Value="20" />
        </Style>
    </ContentPage.Resources>

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Seated Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
                    <Label Text="  &#x2022; Doesn't make a lot of noise" />
                    <Label Text="  &#x2022; Often smiles mysteriously" />
                    <Label Text="  &#x2022; Sleeps sitting up" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Banana Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="Watch this monkey eat a giant banana." />
                    <Label Text="  &#x2022; More fun than a barrel of monkeys" />
                    <Label Text="  &#x2022; Banana not included" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}"
                           WidthRequest="240"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Face-Palm Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
                    <Label Text="  &#x2022; Cynical but not unfriendly" />
                    <Label Text="  &#x2022; Seven varieties of grimaces" />
                    <Label Text="  &#x2022; Doesn't laugh at your jokes" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>
        </FlexLayout>
    </ScrollView>
</ContentPage>

包含两个附加可绑定属性的设置的Flexlayout隐式样式Image：

<Style TargetType="Image">
    <Setter Property="FlexLayout.Order" Value="-1" />
    <Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>

Order–1 的设置会导致Image元素首先显示在每个嵌套FlexLayout视图中，而不考虑其在子集合中的位置。 AlignSelf导致在 . 中FlexLayout居中的原因Image的属性Center。这会替代属性的设置，该属性 AlignItems 的默认值 Stretch为，这意味着 Label 子元素 Button 和子级拉伸到该 FlexLayout属性的全宽。

在三FlexLayout个视图中，前面有一个空白LabelButton，但它的设置Grow为 1。这意味着，所有额外的垂直空间都分配给此空白 Label，从而有效地将空间推送 Button 到底部。

可绑定属性的详细信息

现在，你已经了解了一些常见的应用程序 FlexLayout，可以更详细地探索其 FlexLayout 属性。 FlexLayout 定义在代码或 XAML 中自行设置的 FlexLayout 六个可绑定属性，以控制方向和对齐方式。（本文未介绍这些属性 Position之一。

可以使用 FlexLayoutDemos 示例的“试验”页试验剩余的五个可绑定属性。 通过此页面，可以添加或删除五个可绑定属性的组合以及从中 FlexLayout 添加或删除子级。所有子级 FlexLayout 都是 Label 各种颜色和大小的视图， Text 属性设置为对应于其在集合中 Children 位置的数字。

程序启动时，五 Picker 个视图显示这五 FlexLayout 个属性的默认值。屏幕 FlexLayout 底部的底部包含三个子级：

Label每个视图都有一个灰色背景，显示分配给其中的LabelFlexLayout空间。本身的背景 FlexLayout 是 Alice Blue。它占据页面的整个底部区域，左侧和右侧还有一点边距。

Direction 属性

该 Direction 属性的类型 FlexDirection为：具有四个成员的枚举：

Column
ColumnReverse （或 XAML 中的“列反向”）
Row（默认值）
RowReverse （或 XAML 中的“行反向”）

在 XAML 中，可以使用小写、大写或混合大小写的枚举成员名称指定此属性的值，也可以使用括号中显示的两个附加字符串，这些字符串与 CSS 指示器相同。（XAML 分析器使用的类中 FlexDirectionTypeConverter 定义了“column-reverse”和“row-reverse”字符串。

下面是显示（从左到右）、方向、Column方向和ColumnReverse方向的Row试验页：

请注意，对于 Reverse 选项，项从右或底部开始。

Wrap 属性

该 Wrap 属性的类型 FlexWrap为一个枚举，其中包含三个成员：

NoWrap（默认值）
Wrap
Reverse （或 XAML 中的“wrap-reverse”）

从左到右，这些屏幕显示 NoWrap12 个子级的和 WrapReverse 选项：

如果属性 Wrap 设置为 NoWrap 约束，并且主轴受约束（如此程序所示），并且主轴宽度或高到足以容纳所有子项，则 FlexLayout 尝试使项目更小，如 iOS 屏幕截图所示。可以使用附加的可绑定属性控制项 Shrink 的收缩。

JustifyContent 属性

该 JustifyContent 属性的类型 FlexJustify为：具有六个成员的枚举：

Start （或 XAML 中的“flex-start”），默认值
Center
End （或 XAML 中的“flex-end” ）
SpaceBetween （或 XAML 中的“空格间” ）
SpaceAround （或 XAML 中的“空格环绕”）
SpaceEvenly

此属性指定在主轴上分隔项的方式，这是本示例中的水平轴：

在这三个屏幕截图中，属性 Wrap 设置为 Wrap。默认 Start 显示在上一个 Android 屏幕截图中。此处的 iOS 屏幕截图显示了 Center 选项：所有项都移动到中心。以单词 Space 开头的另外三个选项分配项目未占用的额外空间。 SpaceBetween 在项之间平均分配空间; SpaceAround 在每个项周围放置相等的空间，同时 SpaceEvenly 在每个项之间放置相等的空间，并在第一项和行的最后一项之后放置相等的空间。

AlignItems 属性

该 AlignItems 属性的类型 FlexAlignItems为：具有四个成员的枚举：

Stretch（默认值）
Center
Start （或 XAML 中的“flex-start” ）
End （或 XAML 中的“flex-end” ）

这是两个属性之一（另一个是 AlignContent），指示子级如何在十字轴上对齐。在每个行中，子级将拉伸（如上一屏幕截图所示），或在每个项的开始、中心或末尾对齐，如以下三个屏幕截图所示：

在 iOS 屏幕截图中，所有子级的顶部都对齐。在 Android 屏幕截图中，项目垂直居中，以最高的子级为基础。在 UWP 屏幕截图中，所有项的底部都对齐。

对于任何单个项， AlignItems 可以使用附加的可绑定属性重写 AlignSelf 该设置。

AlignContent 属性

该 AlignContent 属性的类型 FlexAlignContent为：具有七个成员的枚举：

Stretch（默认值）
Center
Start （或 XAML 中的“flex-start” ）
End （或 XAML 中的“flex-end” ）
SpaceBetween （或 XAML 中的“空格间” ）
SpaceAround （或 XAML 中的“空格环绕”）
SpaceEvenly

同样 AlignItems，该 AlignContent 属性还会对齐十字轴上的子级，但会影响整个行或列：

在 iOS 屏幕截图中，两行都位于顶部;在 Android 屏幕截图中，它们位于中心;在 UWP 屏幕截图中，它们位于底部。还可以以多种方式分隔行：

如果只有一行或一列，则 AlignContent 不起作用。

附加的可绑定属性的详细信息

FlexLayout 定义五个附加的可绑定属性。这些属性在子级 FlexLayout 上设置，仅与该特定子级相关。

AlignSelf 属性

AlignSelf附加的可绑定属性的类型FlexAlignSelf为：具有五个成员的枚举：

Auto（默认值）
Stretch
Center
Start （或 XAML 中的“flex-start” ）
End （或 XAML 中的“flex-end” ）

对于任何单个子元素 FlexLayout，此属性设置将 AlignItems 替代自身上 FlexLayout 设置的属性。 Auto 的默认设置是指使用 AlignItems 设置。

对于名为label（或示例）的Label元素，可以在如下所示的代码中设置AlignSelf属性：

FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

请注意，没有对 FlexLayout 父级的 Label引用。在 XAML 中，设置如下属性：

<Label ... FlexLayout.AlignSelf="Center" ... />

Order 属性

Order 属性为 int 类型。默认值为 0。

使用该 Order 属性可以更改排列子 FlexLayout 项的顺序。通常，排列的 FlexLayout 子级的顺序与它们在集合中显示的 Children 顺序相同。可以通过将 Order 附加的可绑定属性设置为一个或多个子级上的非零整数值来替代此顺序。 FlexLayout然后，根据每个子级的属性设置来排列其子级，但具有相同Order设置的Order子级按集合中Children显示的顺序排列。

Basis 属性

Basis附加的可绑定属性指示分配给主轴上FlexLayout子级的空间量。属性指定的 Basis 大小是沿父 FlexLayout级主轴的大小。因此， Basis 指示子级的宽度（当子级按行排列时）或子级按列排列时的高度。

该 Basis 属性的类型 FlexBasis为结构。大小可以在与设备无关的单位中指定，也可以指定为大小百 FlexLayout分比。属性的 Basis 默认值为静态属性 FlexBasis.Auto，这意味着使用了子元素请求的宽度或高度。

在代码中Basis，可以为名为 label 40 个Label独立于设备的单元设置属性，如下所示：

FlexLayout.SetBasis(label, new FlexBasis(40, false));

构造函数的第二个参数 FlexBasis 被命名 isRelative ，并指示大小是相对（true）还是绝对（false）。该参数的默认值为 <a0/>，因此也可以使用以下代码：

FlexLayout.SetBasis(label, new FlexBasis(40));

定义从 float 隐式转换到 FlexBasis 的隐式转换，以便进一步简化它：

FlexLayout.SetBasis(label, 40);

可以将父级的大小设置为 25%， FlexLayout 如下所示：

FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));

此小数部分值必须介于 0 到 1 的范围内。

在 XAML 中，可以使用设备无关单位以数字表示大小：

<Label ... FlexLayout.Basis="40" ... />

或者，可以在 0% 到 100% 的范围内指定百分比：

<Label ... FlexLayout.Basis="25%" ... />

FlexLayoutDemos 示例的“基础试验”页允许你试验该Basis属性。 该页显示五个元素的包装列 Label ，其中包含交替背景和前景颜色。使用两 Slider 个元素可以指定 Basis 第二个和第四 Label个元素的值：

左侧的 iOS 屏幕截图显示了在独立于设备的单元中给定高度的两 Label 个元素。 Android 屏幕显示它们被赋予的高度，这些高度是总高度的 FlexLayout一小部分。如果设置为 Basis 100%，则子级为高度 FlexLayout，并将环绕到下一列并占据该列的整个高度，如 UWP 屏幕截图所示：它看起来好像五个子级按一行排列，但它们实际上是在五列中排列的。

Grow 属性

Grow附加的可绑定属性的类型 int。默认值为 0，该值必须大于或等于 0。

当属性设置为NoWrap该属性并且Wrap子级的行的总宽度小于宽度FlexLayout时，或子级的列的高度比FlexLayout该列短时，该Grow属性将发挥作用。 Grow 属性指示如何在子项之间分配剩余空间。

在 “增长试验 ”页中，交替颜色的五 Label 个元素排列在一列中，两 Slider 个元素允许您调整 Grow 第二和第四 Label个元素的属性。最左侧的 iOS 屏幕截图显示默认 Grow 属性 0：

如果给定任何一个子级为正 Grow 值，则该子级将占用所有剩余空间，如 Android 屏幕截图所示。还可以在两个或更多个子级之间分配此空间。在 UWP 屏幕截图中，第 Grow 二个 Label 属性设置为 0.5，而 Grow 第四 Label 个属性为 1.5，这给了第四 Label 个剩余空间的三倍，比第二 Label个多。

子视图使用该空间的方式取决于子级的特定类型。对于 aLabel，文本可以放置在使用属性HorizontalTextAlignmentVerticalTextAlignment和的总空间Label中。

Shrink 属性

Shrink附加的可绑定属性的类型 int。默认值为 1，该值必须大于或等于 0。

当属性设置为NoWrap该属性并且Wrap一行子级的聚合宽度大于其宽度FlexLayout或单个子列的聚合高度大于FlexLayout该列的高度时，该Shrink属性将发挥作用。通常，FlexLayout 会通过限制这些子项的大小以显示它们。 Shrink 属性可以指示哪些子项可优先按其完整大小显示。

“ 收缩试验 ”页创建 FlexLayout 一个包含一行五 Label 个子级，其空间超过 FlexLayout 宽度。左侧的 iOS 屏幕截图显示默认值为 1 的所有 Label 元素：

在 Android 屏幕截图中， Shrink 第二个 Label 值设置为 0，并在 Label 其全宽中显示。此外，第四 Label 个 Shrink 值大于 1，并且已收缩。 UWP 屏幕截图显示这两 Label 个 Shrink 元素的给定值为 0，以允许它们以其完整大小显示（如果可能）。

可以同时设置和GrowShrink值以适应聚合子大小有时可能小于或大于其大小FlexLayout的情况。

使用 FlexLayout 设置 CSS 样式

可以使用与 Xamarin.Forms 3.0 相关的 FlexLayout3.0 引入的 CSS 样式设置功能。 FlexLayoutDemos 示例的 CSS 目录项页复制目录项页的布局，但具有许多样式的 CSS 样式表：

原始 CatalogItemsPage.xaml 文件在其包含 15 个Resources对象的节中具有 Style 5 Setter 个定义。在 CssCatalogItemsPage.xaml 文件中，只有四Setter个对象已减少到两Style个定义。这些样式为 CSS 样式设置功能当前不支持的属性 Xamarin.Forms 补充 CSS 样式表：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.CssCatalogItemsPage"
             Title="CSS Catalog Items">
    <ContentPage.Resources>
        <StyleSheet Source="CatalogItemsStyles.css" />

        <Style TargetType="Frame">
            <Setter Property="BorderColor" Value="Blue" />
            <Setter Property="CornerRadius" Value="15" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="Text" Value="LEARN MORE" />
            <Setter Property="BorderRadius" Value="20" />
        </Style>
    </ContentPage.Resources>

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Seated Monkey" StyleClass="header" />
                    <Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
                    <Label Text="  &#x2022; Doesn't make a lot of noise" />
                    <Label Text="  &#x2022; Often smiles mysteriously" />
                    <Label Text="  &#x2022; Sleeps sitting up" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Banana Monkey" StyleClass="header" />
                    <Label Text="Watch this monkey eat a giant banana." />
                    <Label Text="  &#x2022; More fun than a barrel of monkeys" />
                    <Label Text="  &#x2022; Banana not included" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Face-Palm Monkey" StyleClass="header" />
                    <Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
                    <Label Text="  &#x2022; Cynical but not unfriendly" />
                    <Label Text="  &#x2022; Seven varieties of grimaces" />
                    <Label Text="  &#x2022; Doesn't laugh at your jokes" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>
        </FlexLayout>
    </ScrollView>
</ContentPage>

CSS 样式表在节的第一行 Resources 中引用：

<StyleSheet Source="CatalogItemsStyles.css" />

另请注意，这三个项目中的每个元素都有两个元素包括 StyleClass 设置：

<Label Text="Seated Monkey" StyleClass="header" />
···
<Label StyleClass="empty" />

这些引用CatalogItemsStyles.css样式表中的选择器：

frame {
    width: 300;
    height: 480;
    background-color: lightyellow;
    margin: 10;
}

label {
    margin: 4 0;
}

label.header {
    margin: 8 0;
    font-size: large;
    color: blue;
}

label.empty {
    flex-grow: 1;
}

image {
    height: 180;
    order: -1;
    align-self: center;
}

button {
    font-size: large;
    color: white;
    background-color: green;
}

此处引用了多个 FlexLayout 附加的可绑定属性。在 label.empty 选择器中，你将看到属性 flex-grow ，该属性样式为空 Label ，以提供上方 Button的一些空白空间。 image选择器包含一个order属性和一个align-self属性，这两个属性都对应于FlexLayout附加的可绑定属性。

你已看到，可以直接设置属性， FlexLayout 并且可以在子 FlexLayout级上设置附加的可绑定属性。或者，可以使用传统的基于 XAML 的样式或 CSS 样式间接设置这些属性。重要的是了解和了解这些属性。这些属性是真正 FlexLayout 灵活的。

FlexLayout 与 Xamarin.University

Xamarin.Forms 3.0 弹性布局视频

FlexLayoutDemos