2

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

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

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

4

2 回答 2

3

这可能有两个原因。

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

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 的ImageViews 网格，它将平均填充网格窗格的整个空间。

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

于 2012-12-16T11:28:51.513 回答
3

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

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

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

经过反复试验，我发现这是成功的：

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

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

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

网格窗格：

我用 FXML 制作了我的 gridPane，但这对值没有影响。

<BorderPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<center>
    <GridPane fx:id="gridPaneMaze" centerShape="false" minHeight="0.0" minWidth="0.0"   BorderPane.alignment="TOP_LEFT">
        <columnConstraints>
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
        </columnConstraints>
        <rowConstraints>
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
        </rowConstraints>
        <children>
            //...
        </children>
        <BorderPane.margin>
            <Insets left="10.0" top="10.0" />
        </BorderPane.margin>
    </GridPane>
</center>

BORDERPANE：我在锚窗格中添加了一个边框窗格，因此我将所有锚设置为“0”。

GRIDPANE：有 minWidth 0 和 minHeight 0。我没有设置 prefWidth、prefHeight、maxWidth 或 maxHeight。

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

列：我只将水平对齐设置为中心（没有 minWidth，maxWidth 的 prefWidth）

希望这会有所帮助...

于 2016-04-27T22:12:50.960 回答