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

Question

我有一个显示 3 张图像的场景，我希望每张图像占据场景宽度的三分之一。从现在开始，我已经制作了 3 个窗格，每个窗格的 30%，它有效。但是在那些 Pane 中，我不能让我的 ImageView 只使用 Pane 的宽度。

<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 时调用这三行一次。

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

How can I make responsive ImageView in FXML (JavaFX)

javafx

fxml