Vaadin HorizontalLayout内组件未水平排列问题排查

HorizontalLayout 组件本身的水平排布逻辑没有问题，故障核心原因是 Vaadin 8及更早版本中，TextField 组件的默认宽度为100%。
当3个默认宽度为100%的输入框被放入水平布局时，每个组件都会尝试抢占父容器的全部可用宽度，水平布局没有足够横向空间容纳3个满宽组件时，会自动将组件折行垂直排列。之前尝试修改父布局总宽度的方案没有命中问题根源，自然无法生效。

优先调整子组件宽度配置，再按需设置父布局参数，参考如下两种常用实现：

• 固定宽度方案：直接给每个TextField设置符合业务需求的固定宽度，避免单个组件占满整行
• 自适应平分方案：配置布局展开规则，让3个输入框自动平分水平布局的可用宽度

修复后的参考代码：

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

HorizontalLayout horizontal = new HorizontalLayout();
// 固定宽度实现示例
TextField nameField = new TextField("Name");
nameField.setWidth("200px");
TextField addressField = new TextField("Street address");
addressField.setWidth("300px");
TextField postalField = new TextField("Postal code");
postalField.setWidth("120px");
horizontal.addComponents(nameField, addressField, postalField);

// 自适应平分宽度实现示例（二选一即可）
// HorizontalLayout horizontal = new HorizontalLayout();
// TextField nameField = new TextField("Name");
// TextField addressField = new TextField("Street address");
// TextField postalField = new TextField("Postal code");
// 传入组件自动设置等权展开，组件宽度默认100%填满分配到的空间
// horizontal.addComponentsAndExpand(nameField, addressField, postalField);

setWidth("100%");
addComponents(vertical, horizontal);

调试布局类问题时，可以临时给不同层级的组件加上不同颜色的边框，直观查看每个元素的实际占位范围，快速定位是父容器空间不足还是子组件宽度配置错误。

临时调试样式示例：给组件加边框标记占位范围
component.addStyleName("border: 2px solid red;");

内容的提问来源于stack exchange，提问作者fraaanz