Question

我有一个GridPane，其中包含任意数量的行和列，并使用ImageView填充每个单元格。

现在，这个GridPane包含在一个AnchorPane中，所以当Window调整大小时，GridPane会增长或缩小，但ImageViews不会改变它的大小。

我需要做些什么才能让ImageView在GridPane中获取其单元格的大小？

Answer 1

这可能有两个原因。

1）您可能没有为网格窗格定义行和列约束。即使GridPane增长，它的细胞也不一定超出其首选大小。实现此目的的最佳方法是使用百分比宽度/高度定义约束，如下所示：

public class ImageGrid extends Application {
    @Override
    public void start(final Stage stage) throws Exception {
        final GridPane pane = new GridPane();
        for (int i = 0; i < 10; i++) {
            final ImageView imageView = new ImageView(new Image("..."));
            pane.getChildren().add(imageView);
            GridPane.setConstraints(imageView, i%5, i/5);
        }

        pane.getColumnConstraints().addAll(
             columnWithPercentage(20),
             columnWithPercentage(20),
             columnWithPercentage(20),
             columnWithPercentage(20),
             columnWithPercentage(20)
        );

        pane.getRowConstraints().addAll(
                rowWithPercentage(50),
                rowWithPercentage(50)
        );

        final Scene scene = new Scene(pane);
        stage.setScene(scene);
        stage.setWidth(800);
        stage.setHeight(600);
        stage.show();
    }

    private ColumnConstraints columnWithPercentage(final double percentage) {
        final ColumnConstraints constraints = new ColumnConstraints();
        constraints.setPercentWidth(percentage);
        return constraints;
    }

    private RowConstraints rowWithPercentage(final double percentage) {
        final RowConstraints constraints = new RowConstraints();
        constraints.setPercentHeight(percentage);
        return constraints;
    }
    public static void main(String[] args) {
        Application.launch(args);
    }
}

这将创建一个ImageView的5x2网格，它将平均填充网格窗格的整个空间。

2）上面的解决方案会增加您的图片视图，但ImageView类本身不会将图像拉伸超出其正常大小，直到被告知。如果您希望在网格扩展时图像按比例放大，则可能必须绑定ImageView#fitWidthProperty和ImageView#fitHeightProperty。

Answer 2

我是JavaFX的初学者，我遇到了类似的问题。我有一个包含BorderPane的AnchorPane。 BorderPane的中心包含一个GridPane（gridPaneMaze）。这个gridPaneMaze使用一个数组ImageView [7] [7]图像用方形.png文件填充我的网格窗格的每个单元格。

我希望我的图像随窗口的高度而变化。因为我使用了正方形，所以列的宽度应该会自动改变。

起初，当我调整窗口大小时，我的列比我的图像更宽，图像的高度对于行来说是大的。

经过反复试验，我发现这就是诀窍：

图片我在行和列之间进行了循环遍历，在每个单元格中，我将Imageview设置为相应的图像（总是一个正方形）并使用此高度绑定（我将网格窗格的高度除以行数）：

,

我认为您也可以使用widthProperty并除以列数。但是因为大多数显示器的高度都比宽度小，所以我使用了高度。

<强> GRIDPANE：

我使用FXML创建了gridPane，但这对值没有影响。

images[i][j].fitHeightProperty().bind(gridPaneMaze.heightProperty().divide(7)); images[i][j].setPreserveRatio(true);

BORDERPANE：我在我的anchorpane中添加了一个borderpane，所以我将所有锚点设置为＆＃39; 0＆＃39;。

GRIDPANE：的minWidth为0，minHeight为0.我没有设置prefWidth，prefHeight，maxWidth或maxHeight。

ROWS：我只设置了垂直对齐到中心（没有minHeight，maxHeight的prefHeight）

COLUMNS：我只设置了水平对齐到中心（没有minWidth，prefWidth为maxWidth）

希望这会有所帮助......

当窗口调整大小时，如何使Imageview调整自身大小

2 个答案: