JavaFX：如何将 TilePane 居中，但将 TilePane 子项从左到右放置？

Question

就像标题所暗示的那样，我试图在其父容器中居中 TilePane，但同时，我希望 TilePane 的子节点从左到右放置。

@Override
public void start(final Stage primaryStage) throws Exception {
    final VBox root = new VBox();
    final Scene sc = new Scene(root);
    primaryStage.setScene(sc);
    
    final TilePane tp = new TilePane();
    root.getChildren().add(tp);
    
    tp.setPrefColumns(3);
    tp.setAlignment(Pos.TOP_LEFT);
    tp.setStyle("-fx-background-color: green;");
    root.setAlignment(Pos.CENTER);
    root.setFillWidth(true);

    Stream.iterate(0, i -> i + 1).limit(5).forEach(i -> {
        Region r = new Region();
        r.setPrefSize(200, 200);
        r.setStyle("-fx-background-color: red; -fx-border-color: blue; -fx-border-width: 1;");

        tp.getChildren().add(r);
    });

    primaryStage.show();
}

这会创建一个像这样的窗口：

增加窗口宽度会导致：

继续增加窗口高度会导致：

设置root.setFillWidth(false) 原因：

我能做些什么来确保整个TilePane 保持居中，而Region 子节点继续从左侧放置在每一行？

更新

为了更清楚起见，TilePane 应在调整大小期间尝试在除顶行之外的所有行中尽可能多地放入图块（本示例中为区域）。换句话说，第一行的右侧不应该有任何绿地。或者，左侧和右侧的绿地应该相等。此外，瓷砖必须从左到右放置。设置TilePane.setAlignment(Pos.CENTER) 会将任何“剩余”图块放置在最后一行的中心，这是不可接受的。

Answer 1

通过TilePane 设置图块的首选大小。通过将fillWidth 设置为false 并使用VBox 的width 属性的侦听器设置prefColumns 属性，防止父级将TilePane 的大小调整到超出其首选大小：

@Override
public void start(Stage primaryStage) {
    final VBox root = new VBox();
    final Scene sc = new Scene(root);
    primaryStage.setScene(sc);

    final TilePane tp = new TilePane();
    tp.setPrefTileWidth(200);
    tp.setPrefTileHeight(200);
    root.getChildren().add(tp);

    tp.setPrefColumns(3);
    tp.setAlignment(Pos.TOP_LEFT);
    tp.setStyle("-fx-background-color: green;");
    root.setAlignment(Pos.CENTER);
    root.setFillWidth(false);

    // set prefColumns from a listener instead of a binding
    // to prevent the initial value from being set to 0
    root.widthProperty().addListener((o, oldValue, newValue) -> {
        // allow as many columns as fit the parent but keep it in
        // range [1, childCount]
        tp.setPrefColumns(Math.min(tp.getChildren().size(),
                Math.max(1, (int) (newValue.doubleValue() / tp.getPrefTileWidth()))));
    });

    Stream.iterate(0, i -> i + 1).limit(5).forEach(i -> {
        Region r = new Region();
        r.setStyle("-fx-background-color: red; -fx-border-color: blue; -fx-border-width: 1;");

        tp.getChildren().add(r);
    });

    primaryStage.show();
}

由 OP 更新

我对这种方法感到惊讶，我尝试了一些更动态的方法。

root.widthProperty().addListener((o, oldValue, newValue) -> {
    double maxWidth = tp.getChildren()
                        .stream()
                        .filter(n -> n instanceof Region)
                        .map(n -> ((Region) n).getWidth())
                        .max(Double::compareTo)
                        .orElse(0d);

    tp.setPrefColumns(Math.min(tp.getChildren().size(),
            Math.max(1, (int) (newValue.doubleValue() / maxWidth))));
});

Stream.iterate(0, i -> i + 1).limit(5).forEach(i -> {
    Region r = new Region();
    Random random = new Random();
    r.setPrefSize(random.nextInt(150) + 50, random.nextInt(150) + 50);
    System.out.println(r.getPrefWidth());
    System.out.println(r.getPrefHeight());
    r.setStyle("-fx-background-color: red; -fx-border-color: blue; -fx-border-width: 1;");

    tp.getChildren().add(r);
});

这消除了为每个图块设置静态宽度/高度的需要。

虽然这在这个基本示例中有效，但我还没有在更复杂的 tile child 上尝试过。