c# - Xamarin.Form 的 LayoutOptions，尤其是 Fill 和 Expand 之间有什么区别？

Question

在 Xamarin.Forms 中，每个 View 都有两个属性 Horizo​​ntalOptions 和 VerticalOptions。两者都是 LayoutOptions 类型并且可以具有以下值之一:

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

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

Answer 1

简答

Start、Center、End 和 Fill 定义 View 在其空间内的对齐方式.

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

理论

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

1. 对齐: View 在父 View 中如何对齐？

   • 开始:对于垂直对齐， View 移至顶部。对于水平对齐，这通常是左侧。 (但请注意，在具有从右到左语言设置的设备上，这是相反的方式，即右对齐。)
   • Center: View 居中。
   • End:通常 View 是底对齐或右对齐。 (当然，对于从右到左的语言，左对齐。)
   • Fill:这种对齐方式略有不同。该 View 将横跨父 View 的整个尺寸。

   但是，如果父对象不比其子对象大，您将不会注意到这些对齐方式之间的任何差异。对齐仅对具有额外可用空间的父 View 很重要。

2. 扩展: 元素是否会占用更多空间(如果可用)？

   • Suffix Expand:如果父 View 大于其所有 subview 的组合大小，即有额外空间可用，则空间将按比例分配给具有该后缀的 subview 。那些 child 会“占据”他们的空间，但不一定会“填满”它。我们将在下面的示例中查看此行为。
   • 无后缀:没有Expand后缀的 child 不会获得额外空间，即使有更多空间可用。

   同样，如果父 View 不大于其子​​ View ，则扩展后缀也没有任何区别。

例子

让我们看一下下面的例子，看看所有八个布局选项之间的区别。

该应用程序包含一个深灰色 StackLayout，它带有八个嵌套的白色按钮，每个按钮都标有其垂直布局选项。单击其中一个按钮时，它会将其垂直布局选项分配给堆栈布局。这样我们就可以轻松地测试 View 与 parent 的交互，两者都具有不同的布局选项。

(最后几行代码添加了额外的黄色框。我们稍后会回到这一点。)

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。

Here you find the corresponding high-resolution screenshots.