v4_08 应用布局

v4_08 laying out an application 应用布局

 

这部分主要讲

组件之间的父子关系,以及如何用精确的数值和百分比数值来定义子组件的位置和尺寸

一个子组件可以是一个容器或者是一个控件

在应用程序中对某个组件进行布局或定义其尺寸时,必须考虑到父组件,组件本身以及它的同级组件的属性

子组件受到它的直接父组件的约束

 

可以通过以下三种方式在容器中对组件进行布局

绝对位置方式:使用BasicLayout类

 如果不希望所有的子元素都相互堆叠在容器的左上角,就必须明确的定义它们的x,y属性值

相对定位方式:使用VerticalLayout,HorizontalLayout或者TileLayout类

所有子元素都会在垂直方向处依次堆放,在水平方向顺次排列或以行列方式平面分布

基于约束的布局方式:使用BasicLayout类

但它不会定义xy属性值,取而代之的是,子元素通过使用锚点位置和像素值来确定其相对于父容器的位置

 

可以通过下列甲种方法来确定组件的尺寸

1.使用默认尺寸

2.将宽度和高度的属性值设定为确切的像素尺寸

   这样,该组件将会一直保持这个尺寸而忽略它的父容器的尺寸

3.百分比大小

子组件的尺寸随着父容器尺寸的变化而变化,保持相对于父容器尺寸的百分比

4.基于约束的布局方式

  通过定义子组件相对于父容器内锚点的平移像素值来确定其自身的显示位置

   同时也会随着父容器的大小而改变

 

 

这部分都是调整布局的一些东西,以下罗列这部分提到的一些点

1.子组件定义width="100%",父组件却没有定义大小,同样是不行的

2.将三个components放到HGroup中,这样对于上层容器来说,就不需要管理多个组件,而只要管理一个HGroup

3.gap属性的作用是指定子组件的间隔

4.子组件的调整要与父组件一起来,因为父组件会约束子组件

5.在不指定width height时,它会使用默认的尺寸,而不是100%

6.可以在同一个容器内的同级组件之间混合使用绝对尺寸值和相对尺寸值

   一旦固定尺寸的组件被声明,应用程序会将剩余的空间分配给基于百分比尺寸的组件

7.调整浏览器大小后,会发现固定尺寸的没有变化,而百分比的发生很大变化,而页面很难看

8.设定最大最小尺寸minWidth maxWidth