了解【布局元素】元素

hxznhf

UI元素 - 布局元素

在窗口内的展现给用户的元素称为UI元素，是窗口的组成部分，是可见的，拥有事件,所有的UI元素从UI基础元素扩展,上级元素的方法，下层都可以使用.相当于C++的继承.

在设计器中创建一个布局元素，在运行状态下布局元素默认没有任何内容，在设计状态下会显示蓝色的虚线框和红色的边界框。

布局元素类似网页中的div（盒子），提供一系列属性自定义其内子元素的排列显示方式。

水平/垂直 属性：决定布局元素内容是按水平方向依次排列还是垂直方向依次排列。

比如下图为水平方式排列，按钮1、2、3依次从左到右排列，当右边剩余空间不足以放下按钮4，因此按钮4自动排列到第二行。

水平对齐 属性：控制所有行内元素在水平方向的对齐。

如下图，水平对齐设置为居中，第一行三个按钮被作为一个整体，在布局元素内居中显示，第二行只有按钮4，按钮4独自居中显示。

垂直对齐 属性：以水平布局方向为例，所有行元素作为一个整体。

比如下图两行元素作为一个整体在垂直方向被设置为居中显示

基线对齐 属性：控制行内元素的对齐方式。

如下图，第一行有三个按钮元素，取最大高度的按钮1作为当前行的行高，然后三个元素在行内垂直方向被设置为 基线对齐：居中。

自动换行 属性：默认值为真，如下图所示设置为假时，所有元素只会在同一行内显示。

溢出隐藏 属性：默认值为假，IDE提示的是对超出布局盒子边界外的内容进行隐藏。

下面左图为溢出隐藏真，右图为假，当按钮4为右边图示宽度时，设置溢出隐藏为真，按钮4宽度被强行调整为布局盒子内可显示的最大宽度了。

子项间距 与 行间距 属性：这个直接看下图，子项间距就是行内元素之间的间隔距离，行间距就是两个布局行之间的间隔。

以上就是布局元素的基本用法，上面的图示都是以水平方向布局为例，假设为垂直方向布局时，以上提到的行和列的关系就是相反的，应该很好理解吧。

布局盒子属性不仅仅时布局元素独有的，其它支持对子元素布局控制的都有这些属性，包括窗口本身也支持启用布局功能。