Vaadin Flow中如何调整HorizontalLayout等布局内的按钮间距

前置说明 #

你当前提供的代码存在一处写法错误：horizontalLayout.addThemeVariants(ButtonVariant.LUMO_SMALL)是将按钮的主题变体绑定到了布局组件上，正确写法是将变体绑定到Button实例：button.addThemeVariants(ButtonVariant.LUMO_SMALL)。

现有布局效果参考：

解决方案 #

方法1：直接调整布局间距属性（最便捷） #

HorizontalLayout默认使用Flex布局，且开启了Lumo主题预设的间距，你可以关闭默认间距后自定义组件间隔：

HorizontalLayout horizontalLayout = new HorizontalLayout();
horizontalLayout.setWidthFull();
horizontalLayout.setJustifyContentMode(JustifyContentMode.END);
// 关闭默认预设间距
horizontalLayout.setSpacing(false);
// 自定义相邻组件的间距，数值可根据需求调整，支持px、rem等单位
horizontalLayout.getStyle().set("gap", "4px");

buttons.forEach(button -> {
    button.addThemeVariants(ButtonVariant.LUMO_SMALL);
    horizontalLayout.add(button);
});

方法2：单独调整按钮外边距 #

如果仅需要调整部分按钮的间距，可以直接给按钮设置外边距：

buttons.forEach(button -> {
    button.addThemeVariants(ButtonVariant.LUMO_SMALL);
    // 给按钮左侧添加4px间距，仅控制按钮之间的间隔
    button.getStyle().set("margin-left", "4px");
    horizontalLayout.add(button);
});

方法3：自定义主题类（适合复用场景） #

如果需要在多个页面复用相同的紧凑按钮组样式，可以在你的Vaadin前端主题CSS文件中添加自定义规则：

/* 你项目的自定义主题CSS文件中添加 */
.compact-button-group {
    gap: 4px;
}

之后在Java代码中给布局绑定该类即可：

horizontalLayout.addClassName("compact-button-group");

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