创建用户输入网格——JavaFX

Question

目标是允许用户输入一个数字N，然后程序将创建一个 N x N 布局的按钮。按钮不必做任何事情。

我正在尝试确定如何将所有对象添加到 GUI。我尝试了两种方法（如下所示），但均未成功。任何帮助，将不胜感激。

不成功的尝试 1：

import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class CheckerBoard extends Application {

    @Override
    public void start(Stage primaryStage)
    {
        GridPane gridPane = new GridPane();
        gridPane.setHgap(0);
        gridPane.setVgap(0);
        HBox pane = new HBox(15);
        Scene scene = new Scene(pane, 800, 650);
        Scene sceneGrid = new Scene(gridPane, 444, 444);
        Label layoutInput = new Label("Input number to create graph size:");
        TextField number = new TextField();


        Button createGraph = new Button("Create Board");


        createGraph.setOnAction((ActionEvent event) -> 
        {
            int size = Integer.parseInt(number.getText());
            //GridPane.setRowSpan(rowX, numb);
            //GridPane.setColumnSpan(colY, numb);
            Button [][] board = new Button [size][size];


            for (int row = 1; row < size; row++)
            {
                for (int col = 1; col < size; col++)
                {
                   Button fill = new Button();
                   Button button = new Button();
                   GridPane.setConstraints(button, 3, 1); 
                   board[row][col] = fill;



                    GridPane.setRowIndex(board[row][col], row);

                    //GridPane.setColumnIndex(button, col);

                    if ( row + col % 2 == 0 ) { //creates color pattern
                        button.setStyle("-fx-background-color: red;");
                    } else if (row + col % 2 == 1) {
                        button.setStyle("-fx-background-color: black;");
                    }

                    gridPane.getChildren().add(board[row][col]); 
                    gridPane.add(button, col, row);
                    pane.getChildren().add(gridPane);


                }
            }
        });
    ScrollPane scrollPane = new ScrollPane(gridPane);
    pane.setAlignment(Pos.CENTER);
    pane.getChildren().addAll(layoutInput,number,createGraph);
    //pane.setPadding (top, right, bottom, left));

    pane.setPadding(new Insets(150, 0, 700, 0));


    primaryStage.setTitle("Checker grid");
    primaryStage.setScene(scene);
    primaryStage.show();
    //displays contents

}

不成功的尝试 2：

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;


public class gridfix extends Application {

    @Override
    public void start(Stage stage){
        GridPane grid = new GridPane();

        Label layoutInput = new Label("Input number to create graph size:");
        TextField number = new TextField();


        Button createGraph = new Button("Create Board");
        createGraph.setOnAction((ActionEvent event) -> 
        {
            int size = Integer.parseInt(number.getText());
            int BUTTON_PADDING = 0;
            int row = size;
            int col = size;


            grid.setPadding(new Insets(BUTTON_PADDING));
            grid.setHgap(BUTTON_PADDING);
            grid.setVgap(BUTTON_PADDING);

            for (int r = 0; r < row; r++) {
                for (int c = 0; c < col; c++) {
                    int numbers = row * r + c;
                    Button button = new Button(String.valueOf(numbers));
                    grid.add(button, c, r);

                    if ( row + col % 2 == 1 ) 
                    { //creates color pattern
                            button.setStyle("-fx-background-color: red;");
                    } 
                    else if (row + col % 2 == 1) 
                    {
                            button.setStyle("-fx-background-color: white;");
                    }
                }
            }
        });

        ScrollPane scrollPane = new ScrollPane(grid);


        stage.setScene(new Scene(scrollPane));
        stage.show();
    }       

}

Answer 1

哇，我刚刚在我的第一个代码中想通了：

`Button createGraph = new Button("Create Board");

    createGraph.setOnAction((ActionEvent event) -> 
    {
        int size = Integer.parseInt(number.getText());
        //GridPane.setRowSpan(rowX, numb);
        //GridPane.setColumnSpan(colY, numb);
        Button [][] board = new Button [size][size];


        for (int row = 0; row < size; row++)
        {
            for (int col = 0; col < size; col++)
            {

               Button button = new Button();
              // GridPane.setConstraints(button, 3, 3); 


               board[row][col] = button;



                //GridPane.setRowIndex(board[row][col], row);


                //GridPane.setColumnIndex(board[row][col], col);

                if ( row + col % 2 == 0 ) { //creates color pattern
                    button.setStyle("-fx-background-color: red;");
                } else if (row + col % 2 == 1) {
                    button.setStyle("-fx-background-color: black;");
                }


                gridPane.add(button, col, row);



            }
        }
    });
pane.getChildren().add(gridPane); //this line of code was out of place and breaking everything
//ScrollPane scrollPane = new ScrollPane(gridPane);
pane.setAlignment(Pos.CENTER);
pane.getChildren().addAll(layoutInput,number,createGraph);`

但我的颜色模式仍然损坏......它会执行前几个按钮，然后停止。为什么？

Answer 2

1. 您需要使用循环变量来确定Button 的颜色（第二种方法错误）。
2. 只需使用正确的add 方法，您就可以设置列/行索引。除此之外，无需使用setRowIndex、setColumnIndex。
3. % 是一个乘法运算符，具有该运算符的优先级，这意味着row + col % 2 == 1 等价于row + (col % 2) == 1；不过你需要(row + col) % 2 == 1。

@Override
public void start(Stage primaryStage) {
    GridPane grid = new GridPane();

    TextField number = new TextField();
    TextFormatter<Integer> formatter = new TextFormatter<>(new IntegerStringConverter());
    number.setTextFormatter(formatter);

    Button btn = new Button("Fill");
    btn.setOnAction((ActionEvent event) -> {
        Integer i = formatter.getValue();
        if (i == null) {
            return;
        }

        final int n = i;
        grid.getChildren().clear();

        for (int r = 0; r < n; r++) {
            for (int c = 0; c < n; c++) {
                Button button = new Button();
                button.setPrefSize(30, 30);
                button.setStyle("-fx-background-color:" + ((c + r) % 2 == 0 ? "red;" : "black;"));
                grid.add(button, c, r);
            }
        }
    });

    Scene scene = new Scene(new VBox(new HBox(number, btn), grid), 500, 500);

    primaryStage.setScene(scene);
    primaryStage.show();
}