使用JavaFX复刻Brandi's Bagel House界面应选择哪种布局？

该界面属于典型的多区块嵌套布局结构，你之前尝试用单一BorderPane、GridPane等布局无法实现是正常的，通过嵌套组合多种布局即可1:1还原效果，具体实现方案如下：

布局结构拆解 #

你可以按照界面的区块划分，分层组合布局：

• 外层全局容器用BorderPane，分为上、中、下三个区域
  • 顶部放置品牌标题文字
  • 中间放置三个并列的选择类区块
  • 底部放置计算按钮和总价显示栏
• 中间核心内容区用HBox承载，设置合适的列间距，内部依次放入三个功能区块
• 每个功能区块（贝果选择、配料选择、饮品选择）用VBox实现，从上到下依次放置区块标题、多个选项控件：
  • 如果需要选项的文字和价格对齐，可在VBox内部嵌套GridPane，用两列分别放选择控件和价格文本，排版更规整
  • 贝果这类只能单选的品类，把CheckBox替换为RadioButton，绑定到同一个ToggleGroup即可实现互斥选择

核心实现要点 #

• 所有间距、边距可通过对应布局的setSpacing()、setPadding()方法调整，匹配原界面的视觉效果
• 三个并列的功能区块可通过setPrefWidth()设置相同的宽度，保证界面整齐
• 样式调整直接用JavaFX内置的CSS规则即可，不需要引入额外依赖

示例代码片段 #

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class BagelShopApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        // 外层根布局
        BorderPane root = new BorderPane();

        // 顶部标题区域
        Label titleLabel = new Label("Brandi's Bagel House");
        titleLabel.setStyle("-fx-font-size: 20px; -fx-font-weight: bold;");
        BorderPane.setMargin(titleLabel, new Insets(15, 15, 0, 15));
        root.setTop(titleLabel);

        // 中间内容区（三列并列）
        HBox contentContainer = new HBox(25);
        contentContainer.setPadding(new Insets(15));

        // 第一列：贝果选择区
        VBox bagelBox = new VBox(10);
        bagelBox.setPrefWidth(220);
        bagelBox.setStyle("-fx-border-color: #ccc; -fx-border-radius: 5px; -fx-padding: 10px;");
        Label bagelTitle = new Label("贝果种类");
        bagelTitle.setStyle("-fx-font-weight: bold;");
        ToggleGroup bagelGroup = new ToggleGroup();
        RadioButton whiteBagel = new RadioButton("白贝果 $1.25");
        whiteBagel.setToggleGroup(bagelGroup);
        RadioButton wheatBagel = new RadioButton("全麦贝果 $1.50");
        wheatBagel.setToggleGroup(bagelGroup);
        RadioButton blueberryBagel = new RadioButton("蓝莓贝果 $1.75");
        blueberryBagel.setToggleGroup(bagelGroup);
        bagelBox.getChildren().addAll(bagelTitle, whiteBagel, wheatBagel, blueberryBagel);

        // 第二列：配料选择区（结构同贝果区，可根据需求用CheckBox实现多选）
        VBox toppingBox = new VBox(10);
        toppingBox.setPrefWidth(220);
        toppingBox.setStyle("-fx-border-color: #ccc; -fx-border-radius: 5px; -fx-padding: 10px;");
        Label toppingTitle = new Label("可选配料");
        toppingTitle.setStyle("-fx-font-weight: bold;");
        CheckBox creamCheese = new CheckBox("奶油芝士 $0.50");
        CheckBox butter = new CheckBox("黄油 $0.25");
        CheckBox jam = new CheckBox("果酱 $0.30");
        toppingBox.getChildren().addAll(toppingTitle, creamCheese, butter, jam);

        // 第三列：饮品选择区
        VBox drinkBox = new VBox(10);
        drinkBox.setPrefWidth(220);
        drinkBox.setStyle("-fx-border-color: #ccc; -fx-border-radius: 5px; -fx-padding: 10px;");
        Label drinkTitle = new Label("饮品");
        drinkTitle.setStyle("-fx-font-weight: bold;");
        CheckBox coffee = new CheckBox("咖啡 $1.25");
        CheckBox tea = new CheckBox("茶 $1.00");
        CheckBox soda = new CheckBox("苏打水 $0.75");
        drinkBox.getChildren().addAll(drinkTitle, coffee, tea, soda);

        contentContainer.getChildren().addAll(bagelBox, toppingBox, drinkBox);
        root.setCenter(contentContainer);

        // 底部结算区
        HBox bottomBar = new HBox(20);
        bottomBar.setPadding(new Insets(0, 15, 15, 0));
        bottomBar.setAlignment(Pos.CENTER_RIGHT);
        Button calcBtn = new Button("计算总价");
        Label totalLabel = new Label("总价：$0.00");
        totalLabel.setStyle("-fx-font-size: 14px; -fx-font-weight: bold;");
        bottomBar.getChildren().addAll(calcBtn, totalLabel);
        root.setBottom(bottomBar);

        // 窗口设置
        Scene scene = new Scene(root, 780, 450);
        primaryStage.setTitle("Brandi's Bagel House");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

你可以根据原截图的细节调整边距、颜色、文字内容、控件顺序，即可实现完全一致的效果，全程仅用纯JavaFX代码实现，不需要引入WindowBuilder等第三方工具，也不需要依赖Swing/AWT组件。

内容的提问来源于stack exchange，提问作者Skye Pomerantz