如何设置多个按钮并将它们添加到 gridPane答案

【问题标题】：How to set multiple buttons and add them to a gridPane如何设置多个按钮并将它们添加到 gridPane
【发布时间】：2016-10-10 03:25:30
【问题描述】：

对于 GUI，我必须将多个按钮设置为 GridPane。为此，我想问是否有一种方法可以比我更优雅的方式在网格中添加多个按钮。这是我的代码的摘录。

Button button0 =new Button("0");
    Button button1 =new Button("1");
    Button button2 =new Button("2");
    Button button3 =new Button("3");
    Button button4 =new Button("4");
    Button button5 =new Button("5");
    Button button6 =new Button("6");
    Button button7 =new Button("7");
    Button button8 =new Button("8");
    Button button9 =new Button("9");
    Button cancel = new Button("C");
    Button plus = new Button("+");
    Button minus = new Button("-");
    Button multiplicate = new Button("*");
    Button divide = new Button("/");
    Button equal = new Button("=");

对于所有这些按钮，我必须分别设置行索引和列索引。

root.setPadding(new Insets(5,5,5,5));
    GridPane.setConstraints(root, 4, 3);
    root.getChildren();
    root.add(label, 1, 1, 3, 1);
    root.add(button1, 2, 2);
    root.add(button2, 3, 2);
    root.add(button3, 4, 2);
    root.add(button4, 2, 3);
    root.add(button5, 3, 3);
    root.add(button6, 4, 3);
    root.add(button7, 2, 4);
    root.add(button8, 3, 4);
    root.add(button9, 4, 4);
    root.add(button0, 2, 5);
    root.add(cancel, 3, 5);
    root.add(plus, 5,2);
    root.add(minus, 5,3);
    root.add(multiplicate, 5, 4);
    root.add(divide, 5,5);
    root.add(equal, 4, 5);

如果有任何建议，我将不胜感激。

【问题讨论】：

@Marko Jakob 我建议你改用 FXML
或者，至少为 Button 0 到 Button 9 使用一个循环
OP 应该为此使用场景构建器，我也不喜欢为此使用 GridPane，因为它似乎是一个计算器，并且某些按钮（例如“+”）比其他按钮大.. .. 我会将所有内容设置到 SceneBuilder 中的 AnchorPane 上，然后使用分隔符将所有内容拆分。当然，您可以将按钮设置为任何您想要的大小，如果您想更改某些按钮的大小，那就更难了。但是对于某些人来说，可能是一个 PITA 来排列所有分隔符（尽管只看 x，y）。
@Lasagna 感谢您的评论我也更喜欢 StackPane 但我想将按钮设置为看起来像一张桌子。想象一下，窗口应该看起来像一个计算器，实际上我想编写一个计算器，问题是我不知道 FXML。
Marco, , 你想要AnchorPane 请去搜索“Scene Builder”并从 Oracle 网站下载。这本质上是一个 GUI 构建器，可以根据您构建的内容创建 FXML 代码，您可以将其导入代码中。您需要学习使用 JavaFX 的 FXML 加载和控制器，但是当您有很多组件时，使用 Scene Builder 会容易得多。它真的一点都不难，而且你真的不需要自己了解 FXML，只需了解文件的加载以及如何与它们交互即可。

标签： java user-interface javafx gridpane

【解决方案1】：

您也应该使用评论中建议的 FXML 文件。

但如果你想坚持使用 Java 代码，你可以这样做（我的建议仍然是 FXML 文件）：

Main.java

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            GridPane root = new GridPane();
            Scene scene = new Scene(root, 400, 400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

            Button b = new Button();
            b.setOnAction(new EventHandler<ActionEvent>() {

                @Override
                public void handle(ActionEvent event) {
                }
            });

            GridHelper.addToGrid(root, new Button("0"), 2, 5);
            GridHelper.addToGrid(root, new Button("1"), 2, 2);
            GridHelper.addToGrid(root, new Button("2"), 3, 2);
            GridHelper.addToGrid(root, new Button("3"), 4, 2);
            GridHelper.addToGrid(root, new Button("4"), 2, 3);
            GridHelper.addToGrid(root, new Button("5"), 3, 3);
            GridHelper.addToGrid(root, new Button("6"), 4, 3);
            GridHelper.addToGrid(root, new Button("7"), 2, 4);
            GridHelper.addToGrid(root, new Button("8"), 3, 4);
            GridHelper.addToGrid(root, new Button("9"), 4, 4);

            GridHelper.addToGrid(root, new Button("C"), 3, 5, e -> System.out.println("C"));
            GridHelper.addToGrid(root, new Button("+"), 5, 2, e -> System.out.println("+"));
            GridHelper.addToGrid(root, new Button("-"), 5, 3);
            GridHelper.addToGrid(root, new Button("*"), 5, 4);
            GridHelper.addToGrid(root, new Button("/"), 5, 5);
            GridHelper.addToGrid(root, new Button("="), 4, 5);

            root.setPadding(new Insets(5, 5, 5, 5));

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

        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    static class GridHelper {

        static void addToGrid(GridPane grid, Node c, int col, int r) {
            grid.add(c, col, r);
        }

        static void addToGrid(GridPane grid, Node c, int col, int r, EventHandler<ActionEvent> event) {
            grid.add(c, col, r);
            addButtonEvent(c, event);
        }

        static void addToGrid(GridPane grid, Node c, int col, int r, int cs, int rs) {
            grid.add(c, col, r, cs, rs);
        }

        static void addToGrid(GridPane grid, Node c, int col, int r, int cs, int rs, EventHandler<ActionEvent> event) {
            grid.add(c, col, r, cs, rs);
            addButtonEvent(c, event);
        }

        static void addButtonEvent(Node button, EventHandler<ActionEvent> event) {
            if (button instanceof Button)
                ((Button) button).setOnAction(event);
        }

    }

    public static void main(String[] args) {
        launch(args);
    }
}

它只是简单地引入了一个静态类，该类公开了一些静态方法以将Node 添加到GridPane 到指定位置，并可选择设置跨度（行/列）。如果是Button，您也可以添加新闻事件。当然可以进一步概括，这只是确切问题的一个样本。

您还可以为Buttons 0 - 9 制作一个循环（正如评论中所建议的那样）。

【讨论】：

【解决方案2】：

public class MainController implements Initializable {

    int z1=0,y2=0,x=0; 

    @FXML
    GridPane gp;

    public void initialize(URL arg0, ResourceBundle arg1) {
        // TODO Auto-generated method stub
        while(z1<4){    //add 4 buttons
            addButton();
            z1++;
        }   
    }   

    private void addButton() {
        // TODO Auto-generated method stub
        final Button temp1=new Button("Button "+ y2);
        final int numberButton=y2;
        temp1.setId(""+y2);
        temp1.setText("whatever u want!!");
        temp1.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent arg0) {
                // TODO Auto-generated method stub
                System.out.println("id("+temp1.getId()+")="+numberButton);
            }
        });
        gp.add(temp1, x, 0);  //x is column index and 0 is row index
        x++;
    }
}

【讨论】：