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

最新推荐文章于 2025-09-01 20:22:09 发布

原创

最新推荐文章于 2025-09-01 20:22:09 发布 · 1w 阅读

收录于

当前文章被以下社区和专栏收录：

本文详细介绍了Vaadin框架中的VerticalLayout和HorizontalLayout两种基本布局方式，包括它们的使用方法和特性。通过setSpacing()可调整组件间距，setComponentAlignment()能改变组件对齐方式。当布局高度或宽度设为Sizeable.SIZE_UNDEFINED时，会根据包含的组件自适应大小。若组件使用百分比尺寸，布局需明确尺寸，否则会导致不确定性。例如，VerticalLayout中宽度未定义且Button宽度设为100%，需依赖其他组件如Label来确定宽度。

VerticalLayout和HorizontalLayout 分别垂直和水平安排其中的UI组件。这是Vaadin框架中两个最为重要的布局方式。比如Window及其父类Panel 缺省的布局就为VerticalLayout。

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

VerticalLayout vertical = new VerticalLayout ();
vertical.addComponent(new TextField("Name"));
vertical.addComponent(new TextField("Street address"));
vertical.addComponent(new TextField("Postal code"));
main.addComponent(vertical);

改成使用HorizontalLayout ,显示如下：