2017-01-23 17 views
2

У меня есть 2 компонента: Label & Button. Я хочу поставить их рядом друг с другом & выровнять их вместе в ЦЕНТРЕ. Но я не сделал этого, поскольку они все еще выровнены влево, но не в CENTER.JavaFX Как центрировать несколько компонентов рядом друг с другом

enter image description here

Мой код, как показано ниже:

Label sloganLbl = new Label("With cost as low as $1.99, you can own a fraction share of U.S. stock. No account yet?"); 
sloganLbl.getStyleClass().add("blue-small-font"); 


Button signUpBtn = new Button("Open account now"); 
signUpBtn.getStyleClass().add("green-btn-small-font"); 

GridPane topGrid = new GridPane(); 

topGrid.setHgap(20); 
topGrid.add(sloganLbl, 0, 0); 
topGrid.add(signUpBtn, 1, 0); 
topGrid.setGridLinesVisible(true); 

GridPane.setHalignment(sloganLbl, HPos.RIGHT); 
GridPane.setHalignment(signUpBtn, HPos.LEFT); 

BorderPane topBorder = new BorderPane(); 
topBorder.setPadding(new Insets(15, 10, 15, 10)); 
topBorder.setCenter(topGrid); 

topBorder.getStyleClass().add("blue-small-font"); 
topGrid.getStyleClass().add("blue-small-font"); 

borderPane.setTop(topBorder); 

Проблема заключается в том topBorder.setCenter(topGrid); не может центрировать содержимое в центре. Кажется, topGrid занимает полную ширину, а не только общую ширину двух столбцов.

Как достичь выравнивания по центру? Благодаря!

ответ

2

Вы можете обновить GridPane с помощью столбца заполнения пробела слева и справа.

ColumnConstraints leftFiller = new ColumnConstraints(); 
leftFiller.setHgrow(Priority.ALWAYS); // Fills the space left on the left side 
ColumnConstraints rightFiller = new ColumnConstraints(); 
rightFiller.setHgrow(Priority.ALWAYS); // Fills the space left on the right side 
topGrid.getColumnConstraints().addAll(leftFiller, new ColumnConstraints(), 
    new ColumnConstraints(), rightFiller); 

topGrid.add(sloganLbl, 1, 0); 
topGrid.add(signUpBtn, 2, 0); 

Этот фрагмент кода создаст GridPane с 4 столбцов. Первое и последнее возрастает, когда размер GridPane изменяется, а в двух внутренних колонках находятся Label и Button.

Обратите внимание, что Label и Button теперь размещены во второй и третьей колонках.

+0

Очень круто @DVarga, ваш код исправил мою проблему. Огромное спасибо! –