是什么Xamarin.Form的LayoutOptions之间的差异，特别是填充和展开？ [英] What is the difference between Xamarin.Form's LayoutOptions, especially Fill and Expand?

问题描述

在Xamarin.Forms每个查看有两个属性 Horizo​​ntalOptions 和 VerticalOptions 。两者都是键入 LayoutOptions 的，可以有以下值：

In Xamarin.Forms every View has the two properties HorizontalOptions and VerticalOptions. Both are of type LayoutOptions and can have one of the following values:

• LayoutOptions.Start


• LayoutOptions.Center


• LayoutOptions.End


• LayoutOptions.Fill


• LayoutOptions.StartAndExpand


• LayoutOptions.CenterAndExpand


• LayoutOptions.EndAndExpand


• LayoutOptions.FillAndExpand

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

显然，它控制视图的父视图对齐。但究竟是每个选项的行为？而正是之间和后缀展开差异填写？

Apparently it controls the view's alignment on the parent view. But how exactly is the behavior of each individual option? And what is the difference between Fill and the suffix Expand?

推荐答案

开始，中心，结束和填写其空间中定义的视图的定位

Short answer

Start, Center, End and Fill define the view's alignment within its space.

扩展定义的是否占用更多的空间（如果可用）。

Expand defines whether it occupies more space if available.

结构 LayoutOptions 控制两种截然不同的行为：

The structure LayoutOptions controls two distinct behaviors:

1. 对齐： 是如何视图的父视图中排列的

• 开始：对于垂直排列的视图移动到顶部。为水平取向，这通常是左手侧。 （但是请注意，这与从右到左语言设置设备这是对准周围的其他方式，即正确的。）


• 中心：视图是中心
。

• 结束：通常的观点是底部或右对齐。 （从右至左书写的语言，当然，左对齐。）


• 填写：这对准略有不同。该视图将在父视图的全尺寸拉伸。

• Start: For vertical alignment the view is moved to the top. For horizontal alignment this is usually the left-hand side. (But note, that on devices with right-to-left language setting this is the other way around, i.e. right aligned.)
• Center: The view is centered.
• End: Usually the view is bottom or right aligned. (On right-to-left languages, of course, left aligned.)
• Fill: This alignment is slightly different. The view will stretch across the full size of the parent view.

如果父，但是，是不是更大的话它的孩子，你不会注意到这些路线之间的差异。对齐仅适用于具有额外的可用空间父视图的问题。

If the parent, however, is not larger then its children, you won't notice any difference between those alignments. Alignment only matters for parent views with additional space available.

扩展： 请问元素占据更多的空间（如果可用）的

• 后缀扩展：如果父视图比其所有儿童的总大小，即额外的可用空间越大，那么空间比例当中与孩子的意见后缀。这些儿童会占据自己的空间，但并不一定补了。我们必须对这种行为在下面的例子来看看。


• 没有后缀：无孩子们展开后缀不会得到额外的空间，即使更多的可用空间

• Suffix Expand: If the parent view is larger than the combined size of all its children, i.e. additional space is available, then the space is proportioned amongst child views with that suffix. Those children will "occupy" their space, but do not necessarily "fill" it. We'll have a look on this behavior in the example below.
• No suffix: The children without Expand suffix won't get additional space, even if more space is available.

此外，如果父视图并不比其子大，扩展后缀不作任何差别也是如此。

Again, if the parent view is not larger than its children, the expansion suffix does not make any difference as well.

让我们对以下示例的外表看所有八个布局选项之间的差。

Example

Let's have a look on the following example to see the difference between all eight layout options.

该应用程序包含一个深灰色 StackLayout 有8个嵌套白色的按钮，每一个都标有它的垂直布局选项。当对按钮中的一个点击，它assignes其垂直布局选项堆栈布局。这样我们就可以轻松地测试与父母意见的互动，都与不同的布局选项。

The app contains a dark gray StackLayout with eight nested white buttons, each of which is labeled with its vertical layout option. When clicking on one of the buttons, it assignes its vertical layout option to the stack layout. This way we can easily test the interaction of views with parents, both with different layout option.

（code的最后几行添加额外的黄色方框，我们会回来的这一刻。）

(The last few lines of code add additional yellow boxes. We'll come back to this in a moment.)

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,
        });
    }
}

下面的截图在每个八个按钮的点击时显示结果。我们提出以下意见：

The following screenshots show the result when clicking on each of the eight buttons. We make the following observations:

• 只要父 stackLayout 紧（不填写页）的，垂直布局选项每个按钮是微不足道的。


• 垂直布局选项仅事项若 stackLayout 较大（例如通过填写对齐）和各个按​​钮有展开后缀。


• 额外的空间evently比例在所有按键与展开后缀。看到这更清楚我们增加每两个相邻按钮之间的黄色水平线。


• 与比自己身高要求更多的空间，按键并不一定补了。在这种情况下，实际的问题是由它们的对准的控制。例如。他们是在自己的空间的上方，中心或按钮或者对齐或完全填满它。


• 所有按钮跨越整个布局的整个宽度，因为我们只修改 VerticalOptions 。

• As long as the parent stackLayout is tight (does not Fill the page), the vertical layout option of each Button is negligible.
• The vertical layout option only matters if the stackLayout is larger (e.g. via Fill alignment) and the individual buttons have the Expand suffix.
• Additional space is evently proportioned amongst all buttons with Expand suffix. To see this more clearly we added yellow horizontal lines between every two neighboring buttons.
• Buttons with more space than their requested height do not necessarily "fill" it. In this case the actual behavior is controlled by their alignment. E.g. they are either aligned on top, center or button of their space or fill it completely.
• All buttons span across the whole width of the layout, since we only modify the VerticalOptions.

<一个href=\"https://docs.google.com/drawings/d/19400CzxB40toFhVxb8AXVHerr9_a6kEMM7kDDN0psQ8/edit?usp=sharing\">Here你找到相应的高分辨率屏幕截图。

这篇关于是什么Xamarin.Form的LayoutOptions之间的差异，特别是填充和展开？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！