第四章:滚动堆栈(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:
2018_03_01_211223

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

目录
相关文章
|
2月前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
64 1
前端基础(十四)_隐藏元素的方法
|
2月前
crash —— 获取内核地址布局、页大小、以及栈布局
crash —— 获取内核地址布局、页大小、以及栈布局
|
6月前
|
存储 Python Windows
文件位置标记与定位:概念、方法与实现
文件位置标记与定位:概念、方法与实现
95 0
|
传感器 安全 物联网
0x00 . BlueNRG-1堆栈架构编程 记录总结
0x00 . BlueNRG-1堆栈架构编程 记录总结
Threejs入门进阶实战案例(4):addEventListener() 方法自适应窗口显示的方案
Threejs入门进阶实战案例(4):addEventListener() 方法自适应窗口显示的方案
113 0
|
存储 C语言 C++
Win32程序入口识别,定位回调函数,具体事件处理的定位,ESP寻址方式,压栈方式复习
Win32程序入口识别,定位回调函数,具体事件处理的定位,ESP寻址方式,压栈方式复习
|
存储 运维 安全
基于VS调试分析 + 堆栈观察问题代码段
面对眼前两段有问题的代码,你会通过什么去解决这个问题?本文将通过调试进行逐步分析💻,带你步步观察程序的运行逻辑
21380 0
基于VS调试分析 + 堆栈观察问题代码段
|
前端开发
浮动的本质和4种清除方法
浮动的本质和4种清除方法
160 0
浮动的本质和4种清除方法
|
JavaScript 测试技术
软件测试面试题:如何去定位页面上动态加载的元素?
软件测试面试题:如何去定位页面上动态加载的元素?
427 0
|
vr&ar 图形学
【Unity3D 灵巧小知识点】 ☀️ | 层级面板中的 ‘小手指‘ 作用: 在Scen中将该物体设置为不可选中状态
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。
【Unity3D 灵巧小知识点】 ☀️ | 层级面板中的 ‘小手指‘ 作用: 在Scen中将该物体设置为不可选中状态