Xamarin.Form的LayoutOptions有什么区别,特别是Fill和Expand？

Question

在Xamarin.Forms每个View有两个属性HorizontalOptions和VerticalOptions.两者都是类型LayoutOptions,可以具有以下值之一:

• LayoutOptions.Start
• LayoutOptions.Center
• LayoutOptions.End
• LayoutOptions.Fill
• LayoutOptions.StartAndExpand
• LayoutOptions.CenterAndExpand
• LayoutOptions.EndAndExpand
• LayoutOptions.FillAndExpand

显然,它控制父视图上视图的对齐方式.但每个选项的行为究竟如何呢？和Fill后缀有Expand什么区别？

Answer 1

简短的回答

Start,Center,End和Fill定义视图的它的空间内对齐.

Expand定义它是否占用更多空间(如果可用).

理论

该结构LayoutOptions控制两种不同的行为:

1. 对齐: 视图如何在父视图中对齐？

   • Start:对于垂直对齐,视图将移至顶部.对于水平对齐,这通常是左侧.(但请注意,在具有从右到左语言设置的设备上,这是另一种方式,即右对齐.)
   • Center:视图居中.
   • End:通常视图是底部或右侧对齐.(从右到左的语言,当然,左对齐.)
   • Fill:这种对齐略有不同.视图将在父视图的整个大小上延伸.

   但是,如果父母不比其子女大,那么您将不会注意到这些对齐之间的任何差异.对齐仅对具有额外可用空间的父视图有用.

2. 扩展: 元素是否会占用更多空间？

   • 后缀Expand:如果父视图大于其所有子视图的组合大小,即可用额外空间,则该空间在具有该后缀的子视图中成比例.那些孩子将"占据"他们的空间,但不一定"填补"它.我们将在下面的示例中查看此行为.
   • 无后缀:没有后缀的孩子Expand将无法获得额外的空间,即使有更多空间可用.

   同样,如果父视图不大于其子​​视图,则扩展后缀也不会产生任何差异.

例

让我们看看下面的示例,看看所有八个布局选项之间的区别.

该应用程序包含一个深灰色,StackLayout带有八个嵌套的白色按钮,每个按钮都标有垂直布局选项.单击其中一个按钮时,它会将其垂直布局选项分配给堆栈布局.通过这种方式,我们可以轻松地测试视图与父项的交互,两者都具有不同的布局选项.

(最后几行代码添加了额外的黄色框.我们马上回过头来看看.)

public static class App
{
    static readonly StackLayout stackLayout = new StackLayout {
        BackgroundColor = Color.Gray,
        VerticalOptions = LayoutOptions.Start,
        Spacing = 2,
        Padding = 2,
    };

    public static Page GetMainPage()
    {
        AddButton("Start", LayoutOptions.Start);
        AddButton("Center", LayoutOptions.Center);
        AddButton("End", LayoutOptions.End);
        AddButton("Fill", LayoutOptions.Fill);
        AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
        AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
        AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
        AddButton("FillAndExpand", LayoutOptions.FillAndExpand);

        return new NavigationPage(new ContentPage {
            Content = stackLayout,
        });
    }

    static void AddButton(string text, LayoutOptions verticalOptions)
    {
        stackLayout.Children.Add(new Button {
            Text = text,
            BackgroundColor = Color.White,
            VerticalOptions = verticalOptions,
            HeightRequest = 20,
            Command = new Command(() => {
                stackLayout.VerticalOptions = verticalOptions;
                (stackLayout.ParentView as Page).Title = "StackLayout: " + text;
            }),
        });
        stackLayout.Children.Add(new BoxView {
            HeightRequest = 1,
            Color = Color.Yellow,
        });
    }
}

以下屏幕截图显示了单击八个按钮中的每个按钮时的结果.我们做出以下观察:

• 只要父级stackLayout是紧的(不是Fill页面),每个的垂直布局选项Button可以忽略不计.
• 垂直布局选项仅在stackLayout较大(例如通过Fill对齐)且各个按钮具有Expand后缀时才重要.
• 所有带Expand后缀的按钮都有额外的空间.为了更清楚地看到这一点,我们在每两个相邻按钮之间添加黄色水平线.
• 空间大于要求高度的按钮不一定"填充"它.在这种情况下,实际行为由它们的对齐控制.例如,它们要么在它们的空间的顶部,中心或按钮上对齐,要么完全填充它们.
• 所有按钮都跨越整个布局宽度,因为我们只修改了VerticalOptions.

在这里,您可以找到相应的高分辨率屏幕截图.

Answer 2

当前版本的Xamarin.Forms中存在一些错误; 也许它已经有一段时间了.

CenterAndExpand 通常不会扩展,并且解决它可能会令人困惑.

例如,如果你有一个StackLayout设置CenterAndExpand,那么你在里面放一个标签也设置为CenterAndExpand你期望一个标签的全宽StackLayout.不.它不会扩大.您必须设置StackLayout为" FillAndExpand"以使嵌套的Label对象扩展到其全宽StackLayout,然后告诉Label将文本居中,而不是将其自身作为对象HorizontalTextAlignment="Center".根据我的经验,FillAndExpand如果你真的想要确保它扩展到适合,你需要设置父和嵌套子.

        <StackLayout HorizontalOptions="FillAndExpand"
                     Orientation="Vertical"
                     WidthRequest="300">
            <Label BackgroundColor="{StaticResource TileAlerts}"
                   HorizontalOptions="FillAndExpand"
                   Style="{StaticResource LabelStyleReversedLrg}"
                   HorizontalTextAlignment="Center"
                   Text="Alerts" />