第四章：滚动堆栈（3）

布局对象默认情况下通常具有透明背景。 尽管它们占据了屏幕上的一个区域，但它们并不直接可见。 给布局对象临时颜色是一种很好的方式来查看它们在屏幕上的确切位置。 这对复杂布局来说是一个很好的调试技术。
你会发现蓝色的StackLayout在各个Labelviews之间的空间中窥视。 这是StackLayout的默认Spacing属性的结果。 通过Color.Default标签，StackLayout也是可见的，它具有透明背景。
尝试将所有标签视图的HorizontalOptions属性设置为LayoutOptions.Start：

return new Label
{
    Text = name,
    TextColor = color,
    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
    BackgroundColor = backgroundColor,
    HorizontalOptions = LayoutOptions.Start
};

现在，StackLayout的蓝色背景更加突出，因为所有的Labelviews只占用文本所需的水平空间，并且它们都被推送到左侧。 因为每个标签视图都是不同的宽度，所以这个显示看起来比第一个版本更丑！
现在从Label中移除HorizontalOptions设置，并在StackLayout上设置HorizontalOptions：

StackLayout stackLayout = new StackLayout
{
    BackgroundColor = Color.Blue,
    HorizontalOptions = LayoutOptions.Start
};

现在，StackLayout变得和最宽的Label（至少在iOS和Android上）一样宽，ScrollView的红色背景现在清晰可见。
当你开始构建一个可视对象树时，这些对象获得一个父子关系。父对象有时被称为其子项的容器，因为子项的位置和大小包含在其父项中。
默认情况下，HorizontalOptions和VerticalOptions设置为LayoutOptions.Fill，其中
意味着每个子视图都试图填充父容器。 （至少与容器到目前为止遇到过。正如你所看到的，其他的布局类有几分不同的行为。）即使一个标签默认填充其父容器，尽管没有背景颜色，标签似乎只占据尽可能多的空间因为它需要。
将视图的HorizontalOptions或VerticalOptions属性设置为LayoutOptions.Start，Center或End可以有效地强制视图向下缩小 - 水平，垂直或两者缩小至视图所需的大小。
StackLayout在其子级的垂直尺寸上具有相同的效果：StackLayout中的每个子级只占用其所需的高度。将StackLayout的子项的VerticalOptions属性设置为Start，Center或End不起作用！但是，子视图仍然会展开以填充StackLayout的宽度，除非子级被赋予HorizontalOptions属性而不是LayoutOptions.Fill。
如果将StackLayout设置为ContentPage的Content属性，则可以在StackLayout上设置HorizontalOptions或VerticalOptions。这些属性有两个作用：首先，它们将StackLayout宽度或高度（或两者）缩小为其子级大小;其次，它们决定了StackLayout相对于页面的位置。
如果StackLayout位于ScrollView中，ScrollView将使StackLayout只与其子级高度的总和一样高。这是ScrollView如何确定如何垂直滚动StackLayout。您可以继续在StackLayout上设置HorizontalOptions属性来控制宽度和水平位置。
但是，您应该避免将ScrollView上的VerticalOptions设置为LayoutOptions-.Start，Center或End。 ScrollView必须能够滚动它的子内容，并且ScrollView可以做到的唯一方法是通过强制它的子元素（通常是StackLayout）来设定一个高度，该高度仅反映孩子需要的高度，然后使用这个孩子的高度和它自己的高度来计算滚动该内容的量。如果将ScrollView上的VerticalOptions设置为LayoutOptions.Start，Center或End，则可以有效地告诉ScrollView只有它应该达到的高度。但那是什么高度？因为ScrollView可以滚动它的内容，所以它不需要任何特定的高度，所以理论上它会缩小到无。 Xamarin.Forms可以保护您免受这种可能性的影响，但您最好避免使用暗示您不想发生的事情的代码。
尽管在ScrollView中放置StackLayout是正常的，但将ScrollView放入StackLayout似乎并不正确。 从理论上讲，StackLayout将强制ScrollView的高度仅为需要的高度，而所需的高度基本上为零。 同样，Xamarin.Forms可以防止这种可能性，但是您应该避免使用这种代码。
有一种合适的方式可以将ScrollView放入StackLayout中，这与Xamarin.Forms布局原则完全一致，并且很快就会演示。
前面的讨论适用于垂直定向的StackLayout和ScrollView元素。 StackLayout有一个名为Orientation的属性，您可以将其设置为StackOrientation枚举的成员 - 垂直（默认）或水平。 同样，ScrollView也有一个方向属性，您可以将其设置为ScrollOrientation枚举的成员。 尝试这个：

public ReflectedColorsPage()
{
    StackLayout stackLayout = new StackLayout
    {
        Orientation = StackOrientation.Horizontal
    };
    …
    Content = new ScrollView
    {
        Orientation = ScrollOrientation.Horizontal,
        Content = stackLayout
    };
}

现在Label视图是水平堆叠的，ScrollView垂直填充页面，但允许水平滚动StackLayout，它垂直填充ScrollView：

它使用默认的垂直布局选项看起来很奇怪，但可以修复它们使其看起来更好一些。