创建用户输入网格 - JavaFX

Question

目标是允许用户输入一个数字N，并从中创建一个N×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

哇，我只是想通了，我的第一个代码：

'按钮createGraph =新的按钮（“创建板”）;

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(); 
}