在Eclipse+SceneBuilder的JavaFX中点击按钮动态创建ImageView

嘿，这个需求其实很好实现，我来给你拆解一下步骤和代码示例～

推荐方案：用HBox/VBox自动排列（最简单） #

你当前用的是AnchorPane，但它更适合固定位置的元素；如果要动态添加并排的图片，**HBox（横向排列）或VBox（纵向排列）**是更省心的选择，不用手动计算位置。

步骤1：在SceneBuilder里调整布局 #

1. 打开你的fxml文件，在现有AnchorPane中添加一个HBox（或VBox，根据你想要的排列方向选择）。
2. 给这个HBox设置fx:id，比如imageContainer，方便在Controller里注入。
3. 可以直接在SceneBuilder里给HBox设置spacing属性（比如10），这样图片之间会自动保留间距，不用额外写代码。
4. 把你的按钮放在合适位置（比如HBox上方或旁边）。

步骤2：Controller里实现点击逻辑 #

在你的Controller类中，注入HBox，然后在按钮的点击事件方法里创建ImageView并添加到HBox中：

import javafx.fxml.FXML;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;

public class YourController {

    @FXML
    private HBox imageContainer;

    @FXML
    private void onAddImageButtonClick() {
        // 加载图片：推荐用getResource方式，避免路径问题（假设sample.png在resources目录下）
        Image image = new Image(getClass().getResourceAsStream("sample.png"));
        
        // 创建ImageView并设置大小（可选，防止图片过大撑乱界面）
        ImageView imageView = new ImageView(image);
        imageView.setFitWidth(100);
        imageView.setFitHeight(100);
        imageView.setPreserveRatio(true); // 保持图片原始比例
        
        // 添加到HBox，自动按顺序排列
        imageContainer.getChildren().add(imageView);
    }
}

备选方案：用AnchorPane手动控制位置 #

如果你一定要保留AnchorPane作为容器，那就需要手动跟踪每个ImageView的位置，每次添加时计算新的坐标：

Controller代码示例 #

import javafx.fxml.FXML;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;

public class YourController {

    @FXML
    private AnchorPane mainAnchorPane;

    // 记录当前最后一个图片的右侧位置，初始值根据你的按钮位置调整
    private double currentLeftPosition = 60; 
    private final double IMAGE_SPACING = 10; // 图片之间的间距
    private final double IMAGE_WIDTH = 100; // 图片的固定宽度

    @FXML
    private void onAddImageButtonClick() {
        // 加载图片
        Image image = new Image(getClass().getResourceAsStream("sample.png"));
        ImageView imageView = new ImageView(image);
        
        // 设置图片大小
        imageView.setFitWidth(IMAGE_WIDTH);
        imageView.setFitHeight(100);
        imageView.setPreserveRatio(true);
        
        // 设置ImageView在AnchorPane中的位置
        AnchorPane.setTopAnchor(imageView, 50.0); // 距离顶部50px，可按需调整
        AnchorPane.setLeftAnchor(imageView, currentLeftPosition);
        
        // 添加到AnchorPane
        mainAnchorPane.getChildren().add(imageView);
        
        // 更新位置，为下一张图片的摆放做准备
        currentLeftPosition += IMAGE_WIDTH + IMAGE_SPACING;
    }
}

额外注意事项 #

• 图片路径：尽量用getClass().getResource()方式加载，这样不管是IDE运行还是打包成Jar，都能正确找到图片文件。
• 图片大小：如果不设置fitWidth/fitHeight，图片会以原始尺寸显示，可能导致界面混乱，建议固定大小或者根据窗口做自适应调整。

这样每次点击按钮，就会在之前的图片旁边新增一个ImageView显示sample.png啦～

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