JavaFX：为什么我的HBox孩子有时会重叠？

我有一个很奇怪的问题。让我试着解释一下：

我创建了一个名为

NumberPicker

的类，其基本思想来源于此。其想法是扩展

HBox

，在其中放置一个

标签

，另一个

VBox

，其中有2个

按钮

s。最后，它应该是这样的：（见（1）在我的图片上）

这是我的代码：

public class NumberPicker extends HBox {

    private Label label = null;
    private VBox vBox = null;
    private Button incrementButton = null, decrementButton = null;

    private String valueFormatString;
    private Number value;
    private Number stepWidth;
    private boolean isFloat = false;

    public Number getValue() {
        return value;
    }

    public NumberPicker(Number startValue, Number stepWidth, String valueFormatString) {
        super();

        this.valueFormatString = valueFormatString;
        value = startValue;
        this.stepWidth = stepWidth;

        if (value instanceof Float) {
            isFloat = true;
        }
    }

    public void init() {
        label = new Label();
        label.setFont(Font.font(20));
        label.setText(String.format(valueFormatString, value));

        vBox = new VBox();

        //partially taken from https://dzone.com/articles/javafx-numbertextfield-and
        int ARROW_SIZE = 4;

        Path arrowUp = new Path();
        arrowUp.getElements().addAll(new MoveTo(-ARROW_SIZE, 0), new LineTo(ARROW_SIZE, 0),
                new LineTo(0, -ARROW_SIZE), new LineTo(-ARROW_SIZE, 0));
        arrowUp.setMouseTransparent(true);

        Path arrowDown = new Path();
        arrowDown.getElements().addAll(new MoveTo(-ARROW_SIZE, 0), new LineTo(ARROW_SIZE, 0),
                new LineTo(0, ARROW_SIZE), new LineTo(-ARROW_SIZE, 0));
        arrowDown.setMouseTransparent(true);

        NumberBinding buttonHeight = label.heightProperty().divide(2);

        incrementButton = new Button();
        incrementButton.prefWidthProperty().bind(label.heightProperty());
        incrementButton.minWidthProperty().bind(label.heightProperty());
        incrementButton.maxHeightProperty().bind(buttonHeight);
        incrementButton.prefHeightProperty().bind(buttonHeight);
        incrementButton.minHeightProperty().bind(buttonHeight);
        incrementButton.setOnAction(handler);

        StackPane incPane = new StackPane();
        incPane.getChildren().addAll(incrementButton, arrowUp);
        incPane.setAlignment(Pos.CENTER);

        decrementButton = new Button();
        decrementButton.prefWidthProperty().bind(label.heightProperty());
        decrementButton.minWidthProperty().bind(label.heightProperty());
        decrementButton.maxHeightProperty().bind(buttonHeight);
        decrementButton.prefHeightProperty().bind(buttonHeight);
        decrementButton.minHeightProperty().bind(buttonHeight);
        decrementButton.setOnAction(handler);

        StackPane decPane = new StackPane();
        decPane.getChildren().addAll(decrementButton, arrowDown);
        decPane.setAlignment(Pos.CENTER);

        vBox.getChildren().addAll(incPane, decPane);

        setAlignment(Pos.CENTER);
        getChildren().addAll(label, vBox);
    }

    private EventHandler<ActionEvent> handler = (ActionEvent event) -> {
        if (event.getSource() == incrementButton) {
            if (isFloat) {
                value = value.floatValue() + stepWidth.floatValue();
            } else {
                value = value.intValue() + stepWidth.intValue();
            }
        } else {
            if (isFloat) {
                value = value.floatValue() - stepWidth.floatValue();
            } else {
                value = value.intValue() - stepWidth.intValue();
            }
        }
        if (isFloat) {
            label.setText(String.format(valueFormatString, value.floatValue()));
        } else {
            label.setText(String.format(valueFormatString, value.intValue()));
        }
    };

}

结果如下所示：（见我的图片上的（2）

这对我来说真的很奇怪。第一个

NumberPicker

看起来不错，第二个不行。更奇怪的是：如果我使用

NumberPicker

中的

按钮，则
按钮会向右跳一点，看起来像另一个，正确的
NumberPicker
：（参见我图片上的（3）

我不知道问题出在哪里。我尝试使用ScenicView进行分析，获得了以下信息：

NumberPicker: prefWidth 22,00
    Label: prefWidth 10,78
    VBox: prefWidth 30,00

这告诉我，
NumberPicker
应该有一个41的计算
prefWidth
，因为它的子项的宽度之和大约是41，但它的实际值是22。单击
按钮后，
prefWidth
值变为41

有人能帮我弄清楚吗？我显然希望
NumberPicker
看起来很好（就像我的图片中的（3）），而不必先单击按钮

顺便说一句，很抱歉这张照片有点奇怪。所以不允许我发布超过2个声誉低于10的链接
Try component。为什么要重新发明轮子？@MBec哇，说得好。我不知道这个组件-JavaFX场景生成器没有显示它。谢谢，我会试试的。无论如何，我想知道我的方法有什么问题更新SceneBuilder到最新版本，然后它将有更多的组件。
NumberPicker: prefWidth 22,00
    Label: prefWidth 10,78
    VBox: prefWidth 30,00