Vaadin Web应用开发课程(29):UI布局-VerticalLayout和HorizontalLayout布局

Vaadin Web应用开发教程(29):UI布局-VerticalLayout和HorizontalLayout布局
VerticalLayout和HorizontalLayout 分别垂直和水平安排其中的UI组件。这是Vaadin框架中两个最为重要的布局方式。比如Window及其父类Panel 缺省的布局就为VerticalLayout。

这两种布局的基本用法如下：

改成使用HorizontalLayout ,显示如下：

此外可以通过setSpacing() 来修改UI组件之间的空隙，setComponnetAlignment 来修改UI组件的对齐方式。
要注意的是，布局中UI组件的实际占据的大小和位置和UI组件自身宽度和长度设置的不同有所不同。

比如对于VerticalLayout来说，如果其高度使用Sizeable.SIZE_UNDEFINED 将其设为“未定义”，则其高度自适应其包含的UI组件的高度，同理HorizontalLayout 布局的宽度为“未定义”HorizontalLayout 宽度也取决于其所包含的其她UI组件。
注： 如果布局包含的UI组件使用了“百分比”来定义高度或宽度，则要求Layout必须定义对应的宽度或高度。但如果通过其中包含的某些UI组件可以确定布局的宽度或高度，在这种情况下可以不定义布局类的大小
比如：
在指定指定布局大小的情况下，缺省情况是将其包含的UI组件均匀间隔排列。
例如使用HorizontalLayout，并指定其宽度为400px

有些情况下，你可以希望其中某个UI组件占据所有剩余空间，可以为UI组件设置扩展比例（类似于Android 中权重）。扩展比例由方法Layout对象setExpandRatio()指定，第二个参数为扩展的权重。
比如修改上面代码，不均匀安排三个按钮，而是让阿第三个按钮占据所剩余的空间。

然而，如果Layout所包含的UI组件没有定义大小，（如没有使用如setWidth(100%))时，扩展比例则是应用到UI组件之间的空间。