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

Question

我正在使用 Scene Builder 来创建我的场景，我已将卡片 (ImageViews) 添加到 VBoxes 中，所有 12 张卡片似乎都不太适合，尽管它们确实适合我拥有的 HBoxes。我找不到任何可以减少 VBox 内节点间距的属性。我已经展示了我的 VBox 的外观图片，还有一张我的 HBox 的图片（这就是我想要的外观）。如果这不可能，那么我希望能够重叠图像以使其适合。

Answer 1

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();
}