相等大小的图块的JavaFX GridPane在添加图像时未保持正确的大小

Question

我正在尝试使用JavaFX中的GridPane制作一个简单的国际象棋游戏，但我无法使板子GUI正常工作。当将块添加到GridPane中的图块时，其他没有任何图块的图块将被拉伸或缩小。我希望所有瓦片GridPane始终具有相同的大小。 GridPane中的图块是StackPanes。我希望将它们保留为StackPanes，以便将来将来可以在顶部覆盖另一个图像或一些文本。

这里是它的样子（对不起难看的颜色）：

请注意，当所有磁贴上都铺满碎片时，看起来就像我想要的那样：

下面是一些代码演示了我的问题。我正在使用的WrappedImageView类来自this question，骑士的图像（以及我打算使用的其他图像）来自here。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Control;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class SOQuestion extends Application{
    public static void main(String[] args) {
        Application.launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        final int boardSize = 10;
        final GridPane gridPane = new GridPane();
        gridPane.setMinSize(200, 200);
        for (int i = 0; i < boardSize; i++) {
            final ColumnConstraints columnConstraints = new ColumnConstraints(Control.USE_PREF_SIZE, Control.USE_COMPUTED_SIZE, Double.MAX_VALUE);
            columnConstraints.setHgrow(Priority.ALWAYS);
            columnConstraints.setFillWidth(true);
            gridPane.getColumnConstraints().add(columnConstraints);

            final RowConstraints rowConstraints = new RowConstraints(Control.USE_PREF_SIZE, Control.USE_COMPUTED_SIZE, Double.MAX_VALUE);
            rowConstraints.setVgrow(Priority.ALWAYS);
            rowConstraints.setFillHeight(true);
            gridPane.getRowConstraints().add(rowConstraints);
        }

        Color color1 = new Color(1.0,0,0,1);
        Color color2 = new Color(0,1.0,0, 1);

        for (int i = 0; i < boardSize; i++) {
            for (int j = 0; j < boardSize; j++) {
                StackPane child = new StackPane();

                SOQuestion.WrappedImageView img = new SOQuestion.WrappedImageView(new Image(getClass().getResourceAsStream(
                        "/resources/knight_black.png")));

                child.setBackground(new Background(
                    new BackgroundFill((i+j) % 2 == 0 ? color1 : color2, CornerRadii.EMPTY, Insets.EMPTY)));

                if(Math.random() < 0.1) //to randomly place pieces around the board for demonstration
                    child.getChildren().addAll(img);

                child.setMinSize(0,0);

                GridPane.setRowIndex(child, i);
                GridPane.setColumnIndex(child, j);
                gridPane.getChildren().add(child);
            }
        }

        Scene scene = new Scene(gridPane, 800, 600);

        primaryStage.setScene(scene);
        primaryStage.show();
    }
    class WrappedImageView extends ImageView
    {
        WrappedImageView(Image im)
        {
            super(im);
            setPreserveRatio(false);
        }

        @Override
        public double minWidth(double height)
        {
            return 40;
        }

        @Override
        public double prefWidth(double height)
        {
            Image I=getImage();
            if (I==null) return minWidth(height);
            return I.getWidth();
        }

        @Override
        public double maxWidth(double height)
        {
            return 16384;
        }

        @Override
        public double minHeight(double width)
        {
            return 40;
        }

        @Override
        public double prefHeight(double width)
        {
            Image I=getImage();
            if (I==null) return minHeight(width);
            return I.getHeight();
        }

        @Override
        public double maxHeight(double width)
        {
            return 16384;
        }

        @Override
        public boolean isResizable()
        {
            return true;
        }

        @Override
        public void resize(double width, double height)
        {
            setFitWidth(width);
            setFitHeight(height);
        }
    }
}

我曾考虑过在每个“空”图块中使用空白的占位符图像，但我敢肯定有更好的方法。

我看过以下其他SO帖子，试图使其正常工作，但无济于事：

• JavaFX creating a game board with GridPane

• JavaFX - force the child of a GridPane to fit the size of the cell

• JavaFX ImageView resize in StackPane

感谢您的帮助；抱歉，这么长的帖子！

EDIT：我还想确保在调整窗口大小时适当调整图块和网格窗格的大小，以便像当前代码一样填满整个窗口。

Answer 1

根据James_D的建议，使用setPercentWidth(100.0/boardSize)和setPercentHeight(100.0/boardSize)就像是一件魅力。我决定坚持使用GridPane而不是TilePane，因为它更适合我计划在程序中执行的其他操作。谢谢！