javafx-2 - 调整窗口大小时，如何使 Imageview 调整自身大小

Question

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

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

我必须做什么才能使 ImageView 采用其在 GridPane 中的单元格的大小？

Answer 1

这可能有两个原因。

1) 您可能没有为网格 Pane 定义行和列约束。即使 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);
    }
}

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

2) 上面的解决方案将增加您的 ImageView ，但 ImageView 类本身不会将图像拉伸(stretch)到超出其正常大小，除非被告知。如果您希望图像在网格扩展时放大，您可能还必须绑定(bind) ImageView#fitWidthProperty 和 ImageView#fitHeightProperty。