JavaFX实现图片完美适配ToggleButton问题求助

问题核心 #

你的按钮会随GridPane自动拉伸，但之前的两种方案都没实现图片与按钮尺寸的实时联动：

• 初始方案用按钮当前尺寸创建图片，仅在点击时生效一次，窗口调整或网格布局变化后图片不会同步更新
• 修改后的固定fitWidth/fitHeight会导致按钮拉伸时图片尺寸不变，最终出现按钮变形

解决步骤 #

1. 缓存图片实例：避免每次点击重复加载图片，提升性能
2. 绑定ImageView尺寸到按钮可用区域：让图片跟随按钮尺寸实时变化，同时扣除按钮内边距避免超出边界
3. 调整对齐与填充属性：确保图片完全贴合按钮，无间隙或变形

完整代码修改 #

// 类成员变量，提前初始化一次图片
private Image cardImage;

// 在类的构造方法或初始化块中加载图片
public YourGameClass() {
    // 替换为你的实际图片路径
    cardImage = new Image(getClass().getResource("1.png").toExternalForm());
    // 其他初始化代码...
    initGridPane();
}

private void initGridPane() {
    this.gameBoard = new GridPane();
    this.gameBoard.setPrefSize(600, 600);
    this.gameCards = new ToggleButton[this.boardSize * this.boardSize];
    EventHandler<ActionEvent> cardSelectedHandler = this::onCardSelected;
    
    for (int i = 0; i < this.gameCards.length; i++) {
        this.gameCards[i] = new ToggleButton();
        this.gameCards[i].setPrefSize(Region.USE_COMPUTED_SIZE, Region.USE_COMPUTED_SIZE);
        this.gameCards[i].setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        this.gameCards[i].setOnAction(cardSelectedHandler);
        // 设置按钮内边距，避免图片紧贴按钮边缘
        this.gameCards[i].setPadding(new Insets(2));
        this.gameBoard.add(this.gameCards[i], i % this.boardSize, i / this.boardSize);
        GridPane.setHgrow(this.gameCards[i], Priority.ALWAYS);
        GridPane.setVgrow(this.gameCards[i], Priority.ALWAYS);
    }
}

private void onCardSelected(ActionEvent event) {
    ToggleButton tg = (ToggleButton) event.getTarget();
    
    ImageView view = new ImageView(cardImage);
    // 绑定ImageView尺寸到按钮的可用宽度/高度（扣除内边距）
    view.fitWidthProperty().bind(
        tg.widthProperty().subtract(tg.getPadding().getLeft() + tg.getPadding().getRight())
    );
    view.fitHeightProperty().bind(
        tg.heightProperty().subtract(tg.getPadding().getTop() + tg.getPadding().getBottom())
    );
    // 关闭比例保持，让图片完全填充按钮区域（如果需要保持比例，设为true）
    view.setPreserveRatio(false);
    // 开启平滑缩放，提升图片拉伸后的显示效果
    view.setSmooth(true);
    
    // 设置按钮内容居中，确保图片在按钮内部居中填充
    tg.setAlignment(Pos.CENTER);
    // 清空按钮文本，避免占位影响图片布局
    tg.setText("");
    
    tg.setGraphic(view);
}

额外说明 #

• 如果需要保持图片原有比例，将view.setPreserveRatio(false)改为true，此时图片会按比例缩放，按钮空余区域会留空白（可搭配view.setFillWidth(true)优化）
• 若按钮动态调整尺寸（比如窗口缩放），绑定的属性会自动更新ImageView的大小，无需额外监听

内容的提问来源于stack exchange，提问作者CforLinux