如何在 FXML (JavaFX) 中制作响应式 ImageView

Question

我有一个显示 3 个图像的场景，我希望每个图像占据场景宽度的三分之一。 从现在开始，我制作了 3 个窗格，每个窗格的 30%，它有效。 但在这些窗格中，我无法让我的 ImageView 仅使用窗格的宽度。

<GridPane GridPane.rowIndex="1" GridPane.columnIndex="0">
        <ImageView GridPane.columnIndex="0" fx:id="imgChasseur" preserveRatio="true" onMouseClicked="#handleChoixChasseur"/>
        <ImageView GridPane.columnIndex="1" fx:id="imgMage" preserveRatio="true" onMouseClicked="#handleChoixMage"/>
        <ImageView GridPane.columnIndex="2" fx:id="imgGuerrier" preserveRatio="true" onMouseClicked="#handleChoixGuerrier"/>
    <columnConstraints>
        <ColumnConstraints percentWidth="33" />
        <ColumnConstraints percentWidth="33" />
        <ColumnConstraints percentWidth="33" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints percentHeight="100" />
    </rowConstraints>        
</GridPane>

使用该代码示例，我看不到这三个，因为它们太大了，并且在 3 ImageView 中使用“fitWidth =”100“”，它们太小了。

我理解的方式是“fitWidth”以像素为单位工作，但它不是响应式方式，所以它对我没有多大帮助......

GridPane 是唯一一个似乎具有百分比值的窗格，因此我认为它可以帮助我使它们具有响应能力，但似乎并非如此。 有没有办法，无论我应该使用什么窗格？

Answer 1

我找到了解决方案： 我在周围的窗格上添加了一个侦听器，它修改了控制器中 ImageView 的 fitWidth

    paneOriginal.widthProperty().addListener((ChangeListener<? super Number>) new ChangeListener<Number>() {
        @Override
        public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) {
            imgChasseur.setFitWidth(paneOriginal.getWidth() / 3);
            imgMage.setFitWidth(paneOriginal.getWidth() / 3);
            imgGuerrier.setFitWidth(paneOriginal.getWidth() / 3);
        }
    });

有了这个，我可以随时调整场景大小，并且它仍然适合（当然，我必须在加载 FXML 时至少调用一次这三行代码。

Answer 2

您可以简单地将

ImageViews

宽度属性绑定到

GridPanes

尺寸除以 3。

假设您

fx:id

的

GridPane

等于“gridPane”：

imgChassour.fitWidthProperty().bind(gridPane.widthProperty().devide(3));
imgMage.fitWidthProperty().bind(gridPane.widthProperty().devide(3));
imgGuerrier.fitWidthProperty().bind(gridPane.widthProperty().devide(3));