JAVAFX: problema de agrupación y alineación de elementos de GUI

TAREA: escribir una aplicación GUI JavaFX que permita al usuario elegir un conjunto de ingredientes para pizza usando un conjunto de casillas de verificación. Suponiendo que cada aderezo cuesta 50 centavos y una pizza normal cuesta $10, muestre el costo de la pizza. Tenga en cuenta que, una vez que se marca o desmarca un ingrediente, el costo de la pizza debería actualizarse automáticamente.

Su aplicación debe parecerse mucho al siguiente formato de salida, aunque la elección de los ingredientes podría ser diferente:

SOLICITUD: una forma eficiente de alinear todos los elementos como se muestra en la imagen "expectativa". No estoy seguro de cómo agrupar el costo de la pizza y los ingredientes en un conjunto de grupos para mostrarlos como un panel de manera eficiente.

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import java.text.NumberFormat;
import javafx.scene.Group;
public class DisplayPizzaCost extends Application{ 
 private static final double TOPPING_COST = 0.5d;
 private static final NumberFormat COST_FORMAT = NumberFormat.getCurrencyInstance();
 private static final String PIZZA_COST = "Pizza Cost: ";
 private double pizzaCost = 10.0d;
 private Label totalPizzaCostLabel;
 
 @Override
 public void start(Stage primaryStage) throws Exception {
 CheckBox extraCheesCheckBox = getCheckBox("Extra Cheese");
 CheckBox greenPepperCheckBox = getCheckBox("Green Pepper");
 CheckBox PepperoniCheckBox = getCheckBox("Pepperoni");
 CheckBox OnionCheckBox = getCheckBox("Onion");
 CheckBox SausageCheckBox = getCheckBox("Sausage");
 CheckBox AnchoviesCheckBox = getCheckBox("Anchovies");
 totalPizzaCostLabel = new Label(PIZZA_COST + COST_FORMAT.format(pizzaCost));
 totalPizzaCostLabel.setFont(new Font(13.0d));
 
 VBox toppings1V = new VBox(extraCheesCheckBox, PepperoniCheckBox, SausageCheckBox);
 toppings1V.setSpacing(20); 
 VBox toppings2V = new VBox(greenPepperCheckBox, OnionCheckBox, AnchoviesCheckBox);
 toppings2V.setSpacing(20);
 HBox hBox = new HBox(toppings1V, toppings2V);
 hBox.setSpacing(30);
 hBox.setAlignment(Pos.CENTER);
 
 VBox CostLabel = new VBox(totalPizzaCostLabel);
 CostLabel.setAlignment(Pos.CENTER);
 
 Group root = new Group(hBox,CostLabel);
 Scene scene = new Scene(root,400,170);
 
 primaryStage.setScene(scene);
 primaryStage.setTitle("Pizza Cost");
 primaryStage.show();
 }
 
 private CheckBox getCheckBox(String text) {
 CheckBox cb = new CheckBox(text);
 cb.setOnAction(this::processCheckBoxAction);
 return cb;
 }
 private void processCheckBoxAction(ActionEvent event) {
 CheckBox cb = (CheckBox) event.getSource();
 if (cb.isSelected()) {
 pizzaCost += TOPPING_COST;
 }
 else {
 pizzaCost -= TOPPING_COST;
 }
 totalPizzaCostLabel.setText(PIZZA_COST + COST_FORMAT.format(pizzaCost));
 }
 public static void main(String[] args) {
 launch(args);
 }
}

Solución del problema

Hay muchas maneras de hacer esto, pero yo usé BorderPaneen este ejemplo. Cuando empecé, siempre creaba vistas SceneBuilderprimero. Después de eso, usaría la configuración de SceneBuilderpara construir mi GUI en código. La mayoría de las veces, si es Labelsnecesario TextFieldsalinearlo, GridPanees probablemente lo que necesitará.

FXMLdesdeSceneBuilder

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="345.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1">
 <center>
 <StackPane BorderPane.alignment="CENTER">
 <children>
 <GridPane alignment="CENTER" hgap="50.0" maxHeight="-Infinity" maxWidth="-Infinity" vgap="10.0">
 <columnConstraints>
 <ColumnConstraints hgrow="SOMETIMES" />
 <ColumnConstraints hgrow="SOMETIMES" />
 </columnConstraints>
 <rowConstraints>
 <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
 <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
 <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
 </rowConstraints>
 <children>
  <CheckBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Extra Cheese">
  <font>
  <Font size="25.0" />
  </font>
  </CheckBox>
  <CheckBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Pepperoni" GridPane.rowIndex="1">
  <font>
  <Font size="25.0" />
  </font>
  </CheckBox>
  <CheckBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Sausage" GridPane.rowIndex="2">
  <font>
  <Font size="25.0" />
  </font>
  </CheckBox>
  <CheckBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Green Pepper" GridPane.columnIndex="1">
  <font>
  <Font size="25.0" />
  </font>
  </CheckBox>
  <CheckBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Onion" GridPane.columnIndex="1" GridPane.rowIndex="1">
  <font>
  <Font size="25.0" />
  </font>
  </CheckBox>
  <CheckBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Anchovies" GridPane.columnIndex="1" GridPane.rowIndex="2">
  <font>
  <Font size="25.0" />
  </font>
  </CheckBox>
 </children>
 </GridPane>
 </children>
 </StackPane>
 </center>
 <bottom>
 <Label alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="Pizza Cost: $10.00" BorderPane.alignment="CENTER">
 <font>
 <Font name="System Bold" size="39.0" />
 </font>
 <padding>
 <Insets bottom="40.0" />
 </padding>
 </Label>
 </bottom>
</BorderPane>

Código puro

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import static javafx.scene.layout.Region.USE_PREF_SIZE;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;
public class App extends Application
{
 
 @Override
 public void start(Stage primaryStage)
 {
 
 BorderPane root = new BorderPane();
 
 //Create center root nodes. 
 //Create left nodes.
 CheckBox cbExtraCheese = new CheckBox("Extra Cheese");
 cbExtraCheese.setFont(Font.font("System", 25));
 CheckBox cbPepperoni = new CheckBox("Pepperoni");
 cbPepperoni.setFont(Font.font("System", 25));
 CheckBox cbSausage = new CheckBox("Sausage");
 cbSausage.setFont(Font.font("System", 25));
 
 //Create right nodes.
 CheckBox cbGreenPeppers = new CheckBox("GreenPeppers");
 cbGreenPeppers.setFont(Font.font("System", 25));
 CheckBox cbOnions = new CheckBox("Onions");
 cbOnions.setFont(Font.font("System", 25));
 CheckBox cbAnchovies = new CheckBox("Anchovies");
 cbAnchovies.setFont(Font.font("System", 25)); 
 
 GridPane gridPane = new GridPane();
 gridPane.setMaxSize(USE_PREF_SIZE, USE_PREF_SIZE);
 gridPane.setVgap(10);
 gridPane.setHgap(50); 
 gridPane.add(cbExtraCheese, 0, 0);
 gridPane.add(cbPepperoni, 0, 1);
 gridPane.add(cbSausage, 0, 2); 
 gridPane.add(cbGreenPeppers, 1, 0);
 gridPane.add(cbOnions, 1, 1);
 gridPane.add(cbAnchovies, 1, 2);
 
 StackPane centerRoot = new StackPane(gridPane);
 root.setCenter(centerRoot);
 
 //Create bottom root nodes.
 Label lblCost = new Label("Pizza Cost: $10.00");
 lblCost.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
 lblCost.setAlignment(Pos.CENTER);
 lblCost.setFont(Font.font("System", FontWeight.BOLD, 39));
 lblCost.setPadding(new Insets(0, 0, 40, 0));
 
 root.setBottom(lblCost);
 
 Scene scene = new Scene(root, 800, 345);
 primaryStage.setTitle("Printing FX");
 primaryStage.setScene(scene);
 primaryStage.show();
 }
 /**
 * @param args the command line arguments
 */
 public static void main(String[] args)
 {
 launch(args);
 }
}

Producción