当窗口调整大小时，如何使Imageview调整自身大小-Java 学习之路

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

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

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

2 回答

这可能有两个原因 .

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

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

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

回复于 2024-04-28T03:49:01+08:00

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

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

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

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

IMAGES 我在行和列之间进行了循环遍历，在每个单元格中，我将Imageview设置为相应的图像（总是一个正方形）并使用此高度绑定（我将网格窗格的高度除以行数）：
```
images[i][j].fitHeightProperty().bind(gridPaneMaze.heightProperty().divide(7));
images[i][j].setPreserveRatio(true);
```
我认为你也可以使用widthProperty并除以列数 . 但是因为大多数显示器的高度都比宽度小，所以我使用了高度 .

GRIDPANE:

我使用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：我在我的锚板上添加了一个borderpane，所以我将所有锚点设置为'0' .

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

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

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

希望这有助于......
回复于 2024-04-28T03:49:01+08:00

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

2 回答

相关问题