HorizontalLayout 中的 Vaadin 按钮对齐

Question

尝试在 HorizontalLayout 中设置按钮时，按钮往往会与布局中其他组件的标题部分而不是组件本身对齐。例如

HorizontalLayout hl = new HorizontalLayout();
h1.addComponent(new TextField("Test");
h1.addComponent(new Button("Do Something");

将导致按钮不与文本字段对齐，而是与其标题文本对齐。

如何修复对齐方式，使其与文本字段对齐？

Answer 1

HorizontalLayout 有 setComponentAlignment() 方法，您可以使用它。

HorizontalLayout hl = new HorizontalLayout();
TextField tF= new TextField("Test");
h1.addComponent(tF);
Button btn= new Button("Do Something");
h1.addComponent(btn);
h1.setComponentAlignment(tF, Alignment.MIDDLE_CENTER);
h1.setComponentAlignment(btn, Alignment.MIDDLE_CENTER);

也许您需要另一种对齐方式，具体取决于您希望如何对齐 HorizontalLayout 中的组件

Answer 2

以防其他人在 2021 年偶然发现此问题。HorizontalLayout 现在可以通过一个方法调用 (setAlignItems) 对齐所有项目，如下所示：

HorizontalLayout hl = new HorizontalLayout();
hl.addComponent(new TextField("Test"));
hl.addComponent(new Button("Button"));
hl.setAlignItems(Alignment.CENTER);

Answer 3

以防如您的示例：一个文本字段和一个按钮你可以这样做：

 HorizontalLayout hl = new HorizontalLayout();
 h1.addComponent(new TextField("Test");
 Button btn = new Button("Do somethind");
 btn.getElement().getStyle().set("margin-top","32px");
 h1.addComponent(btn);

32px 是 16px margin + 16px padding

万一它是你项目中积累的东西在您的样式中创建 css class :

 .btn-with-margin {
   margin-top:32px !important;
 }

并添加到 btn

HorizontalLayout 中的 Vaadin 按钮对齐

Vaadin button alignment in HorizontalLayout

java

vaadin

vaadin7

Horizo​​ntalLayout 中的 Vaadin 按钮对齐

Vaadin button alignment in HorizontalLayout

java

vaadin

vaadin7

HorizontalLayout 中的 Vaadin 按钮对齐