如何让图像在VBox中相互重叠

时间:2018-02-23 22:58:22

标签: javafx-8 scenebuilder

我正在使用Scene Builder来创建我的场景,我已经将卡片(ImageViews)添加到VBox中,并且所有12张卡片看起来都不太合适,尽管它们确实适合我拥有的HBox。我找不到任何可以让我减少VBox中节点之间间距的属性。我已经展示了我的VBox看起来如何的图片,还有我的HBox的图片(这就是我想要的样子)。如果那不可能,那么我希望能够重叠图像,使它们适合。

Vbox

Hbox

1 个答案:

答案 0 :(得分:0)

VBox不支持此功能(至少我不知道会这样做)。

然而,如果内容不适合,您可以覆盖layoutChildren以向上移动节点,并覆盖computeMinHeight以返回minHeight值的最大值:

public class OverlappingVBox extends VBox {

    @Override
    protected void layoutChildren() {
        super.layoutChildren();

        List<Node> managed = getManagedChildren();

        int count = managed.size();
        if (count == 0) {
            return;
        }

        double contentAreaMaxY = getHeight() - getInsets().getBottom();

        Node lastNode = managed.get(managed.size() - 1);
        double maxY = lastNode.getLayoutY() + lastNode.getLayoutBounds().getMaxY();

        if (contentAreaMaxY < maxY) {
            // reduce layoutY if content does not fit
            double gap = (contentAreaMaxY - maxY) / (count - 1);
            for (int i = 1; i < count; i++) {
                Node n = managed.get(i);
                n.setLayoutY(n.getLayoutY() + i * gap);
            }
        }

    }

    @Override
    protected double computeMinHeight(double width) {
        // min height = max min height
        double result = 0;
        Insets insets = getInsets();
        double contentWidth = width - insets.getLeft() - insets.getRight();
        for (Node n : getManagedChildren()) {
            double mH = n.minHeight(contentWidth);
            if (mH > result) {
                result = mH;
            }
        }
        return result + insets.getTop() + insets.getBottom();
    }

}

用法示例

@Override
public void start(Stage primaryStage) {
    OverlappingVBox root = new OverlappingVBox();

    Color c = Color.WHITE;

    for (int i = 0; i < 10; i++) {
        root.getChildren().add(new Rectangle(50, 50, c));
        c = c.invert();
    }

    Scene scene = new Scene(root);

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