您可能注意到,HorizontalOptions和VerticalOptions属性是复数形式,就好像有多个选项一样。 这些属性通常设置为LayoutOptions结构的静态字段 - 另一个复数。
迄今为止的讨论集中在以下静态只读LayoutOptions字段,它们返回预定义的LayoutOptions值:
- LayoutOptions.Start
- LayoutOptions.Center
- LayoutOptions.End
- LayoutOptions.Fill
正如你所看到的,当Labelis是一个垂直StackLayout的子元素时,Label上的VerticalOptions设置并没有什么不同。 StackLayout本身将孩子的身高限制在他们需要的高度,所以孩子没有自由在该插槽内垂直移动。
准备好这个规则稍作修改!
LayoutOptions结构有四个尚未讨论的额外静态只读字段:
- LayoutOptions.StartAndExpand
- LayoutOptions.CenterAndExpand
- LayoutOptions.EndAndExpand
- LayoutOptions.FillAndExpand
此扩展属性仅由StackLayout识别。 这对于管理页面布局可能非常有用,但在第一次遇到时可能会造成混淆。 以下是Expandsto在垂直StackLayout中扮演角色的要求:
- StackLayout的内容必须具有小于StackLayout本身高度的总高度。 换句话说,StackLayout中必须存在一些额外的未使用的垂直空间。
- 第一个要求意味着垂直StackLayout不能将其自己的VerticalOptions属性设置为Start,Center或End,因为这会导致StackLayout的高度等于其子级的聚合高度,并且它没有额外的空间
- StackLayout的至少一个子项必须具有VerticalOptions设置,并将Expands属性设置为true。
这里有一个名为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的子项时才起作用。 在其他情况下,它被忽略。