展开选项
您可能注意到,HorizontalOptions和VerticalOptions属性是复数形式,就好像有多个选项一样。 这些属性通常设置为LayoutOptions结构的静态字段 - 另一个复数。
迄今为止的讨论集中在以下静态只读LayoutOptions字段,它们返回预定义的LayoutOptions值:
LayoutOptions.Start
LayoutOptions.Center
LayoutOptions.End
LayoutOptions.Fill
由View类默认建立的是LayoutOptions.Fill,这意味着视图会填充它的容器。
正如你所看到的,当Labelis是一个垂直StackLayout的子元素时,Label上的VerticalOptions设置并没有什么不同。 StackLayout本身将孩子的身高限制在他们需要的高度,所以孩子没有自由在该插槽内垂直移动。
准备好这个规则稍作修改!
LayoutOptions结构有四个尚未讨论的额外静态只读字段:
LayoutOptions.StartAndExpand
LayoutOptions.CenterAndExpand
LayoutOptions.EndAndExpand
LayoutOptions.FillAndExpand
LayoutOptions还定义了两个名为Alignment和Expands的实例属性。 由以AndExpand结尾的静态字段返回的LayoutOptions的四个实例都将Expands属性设置为true。
此扩展属性仅由StackLayout识别。 这对于管理页面布局可能非常有用,但在第一次遇到时可能会造成混淆。 以下是Expandsto在垂直StackLayout中扮演角色的要求:
StackLayout的内容必须具有小于StackLayout本身高度的总高度。 换句话说,StackLayout中必须存在一些额外的未使用的垂直空间。
第一个要求意味着垂直StackLayout不能将其自己的VerticalOptions属性设置为Start,Center或End,因为这会导致StackLayout的高度等于其子级的聚合高度,并且它没有额外的空间
StackLayout的至少一个子项必须具有VerticalOptions设置,并将Expands属性设置为true。
如果满足这些条件,则StackLayout将在VerticalOptions设置为Expands等于true的所有子项之间平均分配额外的垂直空间。 这些孩子中的每一个在StackLayout中的插槽都比正常的要大。 小孩如何占用该插槽取决于LayoutOptions值的对齐设置:开始,中央,结束或填充。
这里有一个名为VerticalOptionsDemo的程序,该程序使用反射来创建具有垂直StackLayout中所有可能的VerticalOptions设置的Label对象。 背景颜色和前景颜色交替出现,以便您可以看到每个标签占据多少空间。 该程序使用语言集成查询(LINQ)以更具视觉效果的方式对LayoutOptions结构的字段进行排序:
点击(此处)折叠或打开
public class VerticalOptionsDemoPage : ContentPage
{
public VerticalOptionsDemoPage()
{
Color[] colors = { Color.Yellow, Color.Blue };
int flipFlopper = 0;
// Create Labels sorted by LayoutAlignment property.
IEnumerable<Label> labels =
from field in typeof(LayoutOptions).GetRuntimeFields()
where field.IsPublic && field.IsStatic
orderby ((LayoutOptions)field.GetValue(null)).Alignment
select new Label
{
Text = "VerticalOptions = " + field.Name,
VerticalOptions = (LayoutOptions)field.GetValue(null),
HorizontalTextAlignment = TextAlignment.Center,
FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
TextColor = colors[flipFlopper],
BackgroundColor = colors[flipFlopper = 1 - flipFlopper]
};
// Transfer to StackLayout.
StackLayout stackLayout = new StackLayout();
foreach (Label label in labels)
{
stackLayout.Children.Add(label);
}
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
Content = stackLayout;
}
}
你可能想稍微研究一下结果:
在蓝色背景上带有黄色文本的标签视图是那些将VerticalOptions属性设置为LayoutOptions值而没有设置展开标志的视图。如果展开标志未在垂直StackLayout中的项目的LayoutOptions值上设置,则VerticalOptions设置将被忽略。正如你所看到的,标签只占用纵向StackLayout所需的垂直空间。
此StackLayout中的子级的总高度小于StackLayout的高度,因此StackLayout具有额外的空间。它包含四个将VerticalOptions属性设置为LayoutOptions值并使用扩展标志设置的四个子项,因此这四个子项中的这些额外空间是平均分配的。
在这四种情况下 - 在黄色背景上带有蓝色文本的标签视图 - LayoutOptions值的对齐属性指示子对象在包含额外空间的区域内的对齐方式。第一个 - VerticalOptions属性设置为LayoutOptions.StartAndExpand - 高于此额外空间。第二个(CenterAndExpand)位于额外空间的中间。第三个(EndAndExpand)低于额外空间。然而,在所有这三种情况下,标签只获得尽可能多的垂直空间,如背景颜色所示。剩下的空间属于StackLayout,它显示页面的背景颜色。
最后一个Label将其VerticalOptions属性设置为LayoutOptions.FillAndExpand。在这种情况下,标签会占用包含额外空间的整个插槽,如黄色背景的大面积所示。文本在这个领域的顶部;这是因为VerticalTextAlignment的默认设置是TextAlignment.Start。将其设置为其他内容以便在该区域内垂直放置文本。
LayoutOptions的Expands属性仅在视图是StackLayout的子项时才起作用。 在其他情况下,它被忽略。