第四章:滚动堆栈(4)

简介:

展开选项
您可能注意到,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;
    }
}

你可能想稍微研究一下结果:
2018_03_19_210003

在蓝色背景上带有黄色文本的标签视图是那些将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的子项时才起作用。 在其他情况下,它被忽略。

目录
相关文章
|
2月前
crash —— 获取内核地址布局、页大小、以及栈布局
crash —— 获取内核地址布局、页大小、以及栈布局
|
6月前
|
存储 安全 编译器
C/C++面试题:堆栈的作用
C/C++面试题:堆栈的作用
50 0
|
JavaScript 测试技术 Python
WebUI自动化测试中隐藏的元素如何操作?三种元素等待方式如何理解?
WebUI自动化测试中隐藏的元素如何操作?三种元素等待方式如何理解?
76 0
|
传感器 安全 物联网
0x00 . BlueNRG-1堆栈架构编程 记录总结
0x00 . BlueNRG-1堆栈架构编程 记录总结
|
存储 C语言 C++
Win32程序入口识别,定位回调函数,具体事件处理的定位,ESP寻址方式,压栈方式复习
Win32程序入口识别,定位回调函数,具体事件处理的定位,ESP寻址方式,压栈方式复习
|
存储 运维 安全
基于VS调试分析 + 堆栈观察问题代码段
面对眼前两段有问题的代码,你会通过什么去解决这个问题?本文将通过调试进行逐步分析💻,带你步步观察程序的运行逻辑
21380 0
基于VS调试分析 + 堆栈观察问题代码段
|
JavaScript 测试技术
软件测试面试题:如何去定位页面上动态加载的元素?
软件测试面试题:如何去定位页面上动态加载的元素?
427 0
|
测试技术
软件测试面试题:如何定位动态元素?
软件测试面试题:如何定位动态元素?
152 0
|
Android开发 iOS开发 容器