JavaFX+SceneBuilder：如何通过滑块值调整矩形网格尺寸？

嘿，你已经把基础的控制器结构搭好啦！接下来咱们可以通过监听滑块的数值变化，实时调整矩形网格的尺寸，我给你整理了具体的实现步骤和代码补充：

1. 给滑块添加值变化监听器 #

首先，让控制器实现Initializable接口，然后在initialize()方法里给两个滑块绑定监听器——这样每次拖动滑块，都会触发网格更新，同时更新对应的标签显示当前数值：

import javafx.fxml.Initializable;
import javafx.beans.value.ChangeListener;
import javafx.scene.shape.Rectangle;
import java.net.URL;
import java.util.ResourceBundle;

public class Controller implements Initializable {
    @FXML private AnchorPane grid;
    @FXML private Slider heightSlider;
    @FXML private Slider widthSlider;
    @FXML private Label heightLbl;
    @FXML private Label widthLabel;
    @FXML private Button robotBtn;
    private int space = 1; // 矩形之间的间距

    @Override
    public void initialize(URL url, ResourceBundle resourceBundle) {
        // 监听高度滑块的数值变化
        heightSlider.valueProperty().addListener((observable, oldVal, newVal) -> {
            updateGrid();
            heightLbl.setText("高度: " + newVal.intValue());
        });

        // 监听宽度滑块的数值变化
        widthSlider.valueProperty().addListener((observable, oldVal, newVal) -> {
            updateGrid();
            widthLabel.setText("宽度: " + newVal.intValue());
        });

        // 程序启动时先初始化一次网格
        updateGrid();
    }

2. 实现网格更新的核心方法 #

接下来写updateGrid()方法——它会先清空AnchorPane里的旧矩形，然后根据滑块的整数值（毕竟网格的行列数得是整数嘛），计算每个矩形的大小和位置，重新生成网格：

private void updateGrid() {
        // 先清空已有矩形
        grid.getChildren().clear();

        // 获取滑块的行列数（转成整数）
        int rowCount = (int) heightSlider.getValue();
        int colCount = (int) widthSlider.getValue();

        // 计算每个矩形的尺寸：根据AnchorPane的大小减去间距，平均分配
        double rectWidth = (grid.getWidth() - (colCount + 1) * space) / colCount;
        double rectHeight = (grid.getHeight() - (rowCount + 1) * space) / rowCount;

        // 循环生成每一个矩形
        for (int row = 0; row < rowCount; row++) {
            for (int col = 0; col < colCount; col++) {
                Rectangle rect = new Rectangle();
                rect.setWidth(rectWidth);
                rect.setHeight(rectHeight);
                // 设置矩形的位置：左边距+列索引*(宽度+间距)，上边距+行索引*(高度+间距)
                rect.setX(space + col * (rectWidth + space));
                rect.setY(space + row * (rectHeight + space));
                // 给矩形加个边框和填充色，方便查看
                rect.setStyle("-fx-stroke: #333; -fx-fill: #eee;");
                grid.getChildren().add(rect);
            }
        }
    }
}

3. 几个实用的优化小建议 #

• 限制滑块范围：可以在SceneBuilder里或者代码里给滑块设置min和max值，比如heightSlider.setMin(1); heightSlider.setMax(20);，避免生成过多或过少的矩形。
• 自适应窗口大小：如果AnchorPane的尺寸会随窗口变化，可以给它加个尺寸监听器，窗口大小改变时也调用updateGrid()，保证网格始终填满容器：

  grid.widthProperty().addListener((obs, oldVal, newVal) -> updateGrid());
  grid.heightProperty().addListener((obs, oldVal, newVal) -> updateGrid());
  

• 灵活调整逻辑：如果你的需求是调整矩形的大小而非行列数，直接用滑块的double值计算尺寸就行，不用转成整数~

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