如何在 JavaFx 中使用 GridPane 将四个按钮排成一行

Question

我有一个位于中心的 gridPane aligned.But GridPane 中的四个按钮之间包含间隙。如何摆脱这个？我所做的是

GridPane grid= new GridPane();
   
   grid.setAlignment(Pos.CENTER); 
    grid.setVgap(5); 
    grid.setHgap(5);
    grid.add(label1, 0, 0); 
  grid.add(tf1, 1, 0); 
  grid.add(label2, 0, 1);       
  grid.add(tf2, 1, 1); 
  grid.add(btn1,0,2);
  grid.add(btn2,1,2);
  grid.add(btn3,2,2);
  grid.add(btn4,3,2);
  //Setting size of scene 
   Scene scene = new Scene(grid, 370, 170);      
    primaryStage.setScene(scene);
    primaryStage.show();

按钮显示为： View Image

两个按钮后有一个空隙。如何消除这个差距？

Answer 1

试试这个代码。我相信这个小修复会成功。

grid.add(btn1,0,2);
grid.add(btn2,1,2);
grid.add(btn3,2,2);
grid.add(btn4,3,2);

Answer 2

默认情况下，在 GridPane 中，每列的大小都调整为最宽元素的首选宽度（同样，每一行的大小都调整为最高元素的首选高度）。由于您的第二个按钮与文本字段位于同一列，默认情况下文本字段比按钮宽，因此该列的宽度将由文本字段的宽度决定。

如何解决这个问题取决于您想要的实际行为。如果您确实希望第二个按钮与文本字段在同一列中，您可以通过使按钮增长到列的全宽来消除间隙：

public class GridPaneTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        GridPane grid = new GridPane();
        
        Label label1 = new Label("Label 1");
        Label label2 = new Label("Label 2");
        TextField tf1 = new TextField();
        TextField tf2 = new TextField();
        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        Button btn3 = new Button("Button 3");
        Button btn4 = new Button("Button 4");
        
        grid.setAlignment(Pos.CENTER);
        grid.setVgap(5);
        grid.setHgap(5);
        grid.add(label1, 0, 0);
        grid.add(tf1, 1, 0);
        grid.add(label2, 0, 1);
        grid.add(tf2, 1, 1);
        grid.add(btn1, 0, 2);
        grid.add(btn2, 1, 2);
        btn2.setMaxWidth(Double.POSITIVE_INFINITY);
        GridPane.setFillWidth(btn2, true);
        grid.add(btn3, 2, 2);
        grid.add(btn4, 3, 2);
        // Setting size of scene
        Scene scene = new Scene(grid, 370, 170);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

或者通过缩小文本字段的首选大小（因此列的宽度由按钮决定）：

public class GridPaneTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        GridPane grid = new GridPane();
        
        Label label1 = new Label("Label 1");
        Label label2 = new Label("Label 2");
        TextField tf1 = new TextField();
        tf1.setPrefColumnCount(0);
        TextField tf2 = new TextField();
        tf2.setPrefColumnCount(0);
        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        Button btn3 = new Button("Button 3");
        Button btn4 = new Button("Button 4");
        
        HBox buttons = new HBox(5, btn1, btn2, btn3, btn4);

        grid.setAlignment(Pos.CENTER);
        grid.setVgap(5);
        grid.setHgap(5);
        grid.add(label1, 0, 0);
        grid.add(tf1, 1, 0);
        grid.add(label2, 0, 1);
        grid.add(tf2, 1, 1);
        grid.add(btn1, 0, 2);
        grid.add(btn2, 1, 2);
        grid.add(btn3, 2, 2);
        grid.add(btn4, 3, 2);
        // Setting size of scene
        Scene scene = new Scene(grid, 370, 170);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

或者，您可以让文本字段填充按钮 2-4 占用的所有三列（使用采用列和行跨度以及索引的 add 方法的版本）：

public class GridPaneTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        GridPane grid = new GridPane();
        
        Label label1 = new Label("Label 1");
        Label label2 = new Label("Label 2");
        TextField tf1 = new TextField();
        TextField tf2 = new TextField();
        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        Button btn3 = new Button("Button 3");
        Button btn4 = new Button("Button 4");
        

        grid.setAlignment(Pos.CENTER);
        grid.setVgap(5);
        grid.setHgap(5);
        grid.add(label1, 0, 0);
        grid.add(tf1, 1, 0, 3, 1);
        grid.add(label2, 0, 1);
        grid.add(tf2, 1, 1, 3, 1);
        grid.add(btn1, 0, 2);
        grid.add(btn2, 1, 2);
        grid.add(btn3, 2, 2);
        grid.add(btn4, 3, 2);
        // Setting size of scene
        Scene scene = new Scene(grid, 370, 170);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

请注意，在最后一个版本中，包含标签的单元格的宽度与包含第一个按钮的单元格的宽度相同，这可能也不是您想要的。可能最好的方法是将按钮放在 HBox 中，并让 HBox 跨越网格窗格的整个宽度（现在只有两列）：

public class GridPaneTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        GridPane grid = new GridPane();
        
        Label label1 = new Label("Label 1");
        Label label2 = new Label("Label 2");
        TextField tf1 = new TextField();
        TextField tf2 = new TextField();
        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        Button btn3 = new Button("Button 3");
        Button btn4 = new Button("Button 4");
        
        HBox buttons = new HBox(5, btn1, btn2, btn3, btn4);

        grid.setAlignment(Pos.CENTER);
        grid.setVgap(5);
        grid.setHgap(5);
        grid.add(label1, 0, 0);
        grid.add(tf1, 1, 0);
        grid.add(label2, 0, 1);
        grid.add(tf2, 1, 1);
        grid.add(buttons, 0, 2, 2, 1);
        // Setting size of scene
        Scene scene = new Scene(grid, 370, 170);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

如何在 JavaFx 中使用 GridPane 将四个按钮排成一行

How to align four buttons in one row using GridPane in JavaFx

javafx

class

button

alignment

gridpane