如何删除JavaFX工具栏中分隔符后的多余空格？

Question

这是我的代码：

public class NewMain1 extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        HBox root = new HBox();
        ToolBar toolbar = new ToolBar();
        toolbar.getItems().addAll(new TextField(), new Separator(), new Button("foo"), new Button("bar"));

        root.getChildren().addAll(toolbar);
        primaryStage.setScene(new Scene(root, 400, 400));
        primaryStage.show();
    }
}

这就是结果：

如您所见，文本字段和分隔符（左边距）之间的距离小于分隔符和按钮（右边距）之间的距离。

有人能说一下如何使用 CSS 减少右边距，使右边距等于左边距吗？

Answer 1

我签入了ScenicView，分隔符中的线被渲染为每个方向填充 3 像素的区域，因此它使分隔符的宽度为 6 像素。

但是它的渲染方式将实际的分隔线放置在区域的左侧。

您可以通过调整线条的 CSS 规则来调整线条渲染（您可以在 JavaFX 发行版的 jar 文件中的

modena.css

中找到它们）。但是修改分隔符的 CSS 规则很混乱，我不推荐这样做。

而是在节点上设置边距，将其移动到您想要的位置（通常我不会推荐这样的黑客，但在这种情况下，IMO 是合适的）。

由于 ToolBar 在内部表示为 HBox，因此您可以使用 HBox 方法来设置 ToolBar 中节点的边距。

要在左侧添加额外的空间，使该行在显示中居中，请执行以下操作：

HBox.setMargin(sep, new Insets(0, 0, 0, 2.5));

或者，要删除右侧的空间，使该行在显示中居中，请执行以下操作：

HBox.setMargin(sep, new Insets(0, -2.5, 0, 0));

我提供的保证金值只是示例。根据您的要求调整值。

示例代码

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class ToolBarApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        HBox root = new HBox();
        ToolBar toolbar = new ToolBar();

        Separator sep = new Separator();
        toolbar.getItems().addAll(
                new TextField(),
                sep,
                new Button("foo"),
                new Button("bar")
        );
        HBox.setMargin(sep, new Insets(0, -2.5, 0, 0));

        root.getChildren().addAll(
                toolbar
        );

        Scene scene = new Scene(root, 400, 400);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Answer 2

您是否尝试过将场景构建器与 fxml 一起使用？这样您就可以拖动元素并设置它们之间的边距。

Answer 3

我发现了如何使用 CSS 来做到这一点。这就是解决方案：

.tool-bar > .container > .separator:vertical *.line {
    -fx-border-insets: 0 0 0 3, 0 0 0 4;
}