JavaFx 使用什么布局

Question

我一直在尝试不同的布局，以重现 Brandi 的百吉饼屋

但是我无法弄清楚这里使用的是什么布局。 到目前为止，我已经尝试过BorderPane、FlowPane、GridPane、HBox 和VBox，但我仍然没有得到正确的布局。我不允许实现任何 Swing 或 AWT。它必须是纯 JavaFX，并且我不允许使用任何 GUI 构建器，例如 WindowBuilder。在 JavaFX 中重新创建此 [Swing] GUI 布局的任何提示、提示或建议？

Answer 1

您有一个 Swing GUI [图像]，并且想要将其转换为 JavaFX。

您需要多种布局组合。对于节点图的根，使用BorderPane。

• 顶部节点是 Label，但由于您希望 Label 居中，您需要将其放在 HBox 中。
• 左侧节点是Bagel 窗格。 RadioButtons 被放置在 VBox 中。
• 中心节点是 Toppings 窗格。 CheckBoxes 被放置在 VBox 中。
• 右侧节点是Coffee 窗格。 RadioButtons 被放置在 VBox 中。
• 底部节点包含Buttons。由于您希望Buttons 居中，因此您需要将它们放在HBox 中。

以下代码演示。请注意，BorderedTitledPane 类的代码来自该问题的公认答案：GroupBox / TitledBorder in JavaFX 2?
（因为 JavaFX 不像 Swing 那样有 TitledBorder。）

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class OrdaCalc extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        BorderPane root = new BorderPane();
        Label label = new Label("Welcome to Brandi's Bagel House");
        HBox labelHBox = new HBox(label);
        labelHBox.setAlignment(Pos.CENTER);
        root.setTop(labelHBox);
        root.setLeft(createLeftPane());
        root.setCenter(createCenterPane());
        root.setRight(createRightPane());
        root.setBottom(createBottomPane());
        Scene scene = new Scene(root);
        scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private HBox createBottomPane() {
        Button calculate = new Button("Calculate");
        Button exit = new Button("Exit");
        HBox buttonsHBox = new HBox(10.0d, calculate, exit);
        buttonsHBox.setAlignment(Pos.CENTER);
        return buttonsHBox;
    }

    private BorderedTitledPane createCenterPane() {
        CheckBox creamCheese = new CheckBox("Cream Cheese");
        CheckBox butter = new CheckBox("Butter");
        CheckBox peachJelly = new CheckBox("Peach Jelly");
        CheckBox blueberryJam = new CheckBox("Blueberry Jam");
        VBox vBox = new VBox(5.0d, creamCheese, butter, peachJelly, blueberryJam);
        BorderedTitledPane center = new BorderedTitledPane("Toppings", vBox);
        return center;
    }

    private BorderedTitledPane createLeftPane() {
        RadioButton white = new RadioButton("White");
        RadioButton wheat = new RadioButton("Wheat");
        ToggleGroup group = new ToggleGroup();
        group.getToggles().addAll(white, wheat);
        VBox vBox = new VBox(30.0d, white, wheat);
        BorderedTitledPane left = new BorderedTitledPane("Bagel", vBox);
        return left;
    }

    private BorderedTitledPane createRightPane() {
        RadioButton none = new RadioButton("None");
        RadioButton regular = new RadioButton("Regular");
        RadioButton decaf = new RadioButton("Decaf");
        RadioButton cappuccino = new RadioButton("Cappuccino");
        ToggleGroup group = new ToggleGroup();
        group.getToggles().addAll(none, regular, decaf, cappuccino);
        VBox vBox = new VBox(5.0d, none, regular, decaf, cappuccino);
        BorderedTitledPane right = new BorderedTitledPane("Coffee", vBox);
        return right;
    }

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

class BorderedTitledPane extends StackPane {
    BorderedTitledPane(String titleString, Node content) {
        Label title = new Label(" " + titleString + " ");
        title.getStyleClass().add("bordered-titled-title");
        StackPane.setAlignment(title, Pos.TOP_CENTER);

        StackPane contentPane = new StackPane();
        content.getStyleClass().add("bordered-titled-content");
        contentPane.getChildren().add(content);

        getStyleClass().add("bordered-titled-border");
        getChildren().addAll(title, contentPane);
    }
}

这里是文件application.css，它与OrdaCalc类位于同一个包中。

.bordered-titled-title {
  -fx-background-color: white;
  -fx-translate-y: -16;
}

.bordered-titled-border {
  -fx-content-display: top;
  -fx-border-insets: 20 15 15 15;
  -fx-background-color: white;
  -fx-border-color: black;
  -fx-border-width: 2;
}

.bordered-titled-content {
  -fx-padding: 26 10 10 10;
}

这是一个屏幕截图。