Как выровнять четыре кнопки в одну строку с помощью GridPane в JavaFx - PullRequest
Новая
       54

Как выровнять четыре кнопки в одну строку с помощью GridPane в JavaFx

0 голосов
/ 13 июля 2020

У меня есть gridPane, который выровнен по центру, но четыре кнопки в 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();

Кнопки выглядят как: Просмотр изображения

После двух кнопок есть пробел. Как устранить этот пробел?

Ответы [ 2 ]

2 голосов
/ 13 июля 2020

По умолчанию в 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);
    }

}

enter image description here

or by making the text fields preferred size smaller (so the column's width is determined by the button):

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

}

enter image description here

Alternatively, you can make the text fields fill all three columns occupied by buttons 2-4 (using the version of the add method that takes a column and row span, as well as an index):

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

}

enter image description here

Note in this last version, the width of the cell containing the labels is the same as the width of the cell containing the first button, which is probably not what you want either. Probably the best approach is to put the buttons in a HBox, and let that HBox span the full width of the grid pane (which now only has two columns):

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

}

введите описание изображения здесь

0 голосов
/ 13 июля 2020

Попробуйте этот код. Я считаю, что это небольшое исправление подойдет. 

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