java - 如何在JavaFX中复制2-1布局？

我已经研究了文档中的所有布局选项，并且不允许使用FXML。我不知道从哪里开始配置场景中的3个容器。

最佳答案

您可以通过多种方式执行此操作。可能最直接的方法是将两个窗格放在VBox的左侧，然后使用BorderPane，将VBox放在左侧，将“ CCTV”窗格放在中间。看起来像：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class LayoutExample extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Pane lighting = new Pane();
        lighting.getChildren().add(new Label("Lighting"));
        Pane heating = new Pane();
        heating.getChildren().add(new Label("Heating"));
        Pane cctv = new Pane();
        cctv.getChildren().add(new Label("CCTV"));

        lighting.getStyleClass().add("control-pane");
        heating.getStyleClass().add("control-pane");
        cctv.getStyleClass().add("control-pane");

        BorderPane root = new BorderPane() ;
        VBox left = new VBox();
        left.getChildren().add(lighting);
        left.getChildren().add(heating);

        // expand both panes in left to full width of vbox:
        left.setFillWidth(true);
        // add vertical space between panes:
        left.setSpacing(5);
        // allocate extra vertical space equally to both panes in left:
        VBox.setVgrow(lighting, Priority.ALWAYS);
        VBox.setVgrow(heating, Priority.ALWAYS);

        root.setLeft(left);
        root.setCenter(cctv);

        // Add a left margin to the center pane to give it some space:
        BorderPane.setMargin(cctv, new Insets(0, 0, 0, 10));

        Scene scene = new Scene(root);
        scene.getStylesheets().add(getClass().getResource("layout-style.css").toExternalForm());

        primaryStage.setScene(scene);

        primaryStage.setWidth(800);
        primaryStage.setHeight(640);
        primaryStage.show();

    }

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

}

该CSS不太正确，但是可以让您了解如何添加边框：

.control-pane {
  -fx-background-color: -fx-body-color, -fx-outer-border, -fx-body-color ;
  -fx-background-insets: 0, 1, 2 ;
  -fx-background-radius: 0, 1, 0 ;
  -fx-padding: 3 ;

  /** Just to demo empty boxes: **/
  -fx-min-width: 300px ;
  -fx-min-height: 300px ;
 }

看起来像：



您也可以使用HBox作为根，并在每个CC上设置hgrow，以便在CCTV窗格上优先分配额外的水平空间。或使用GridPane，并将CCTV窗格的行跨度设置为2。可能有许多其他方法可以执行此操作。