如何在 javafx 中手动跨越网格窗格的列？

Question

我正在尝试使用包含 2 行和 2 列的网格窗格设计布局。左上区域和右上区域共享宽度，它们都获得了 50% 的宽度。但在第二行，我需要右下区域来获得 60% 的宽度，所以左下区域是 40%。

我也尝试过像 [[2col.,2col][1col,3col]] 矩阵这样的跨列。也没有用。

这是我的代码；

public class Main extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
    Group root = new Group();
    primaryStage.setTitle("Hello World");
    Scene scene = new Scene(root, 1700, 1200);


    //zoneTopLeft, spans 2 column
    VBox zoneTopLeft = createBaseContainer();
    //zoneTopRight, spans 2 columns
    VBox zoneTopRight = createBaseContainer();
    //zoneBottomLeft, spans 1 columns
    VBox zoneBottomLeft = createBaseContainer();
    //zoneBottomRight,spans 3 columns
    VBox zoneBottomRight = createBaseContainer();



    ColumnConstraints topRight=new ColumnConstraints();
    topRight.setPrefWidth(300);
    ColumnConstraints topLeft=new ColumnConstraints();
    topRight.setPrefWidth(300);
    ColumnConstraints bottomRight=new ColumnConstraints();
    topRight.setPrefWidth(400);
    ColumnConstraints bottomLeft=new ColumnConstraints();
    topRight.setPrefWidth(200);

    GridPane page=new GridPane();
    page.getColumnConstraints().addAll(topLeft,topRight,bottomLeft,bottomRight);
    page.setHgap(10);
    page.setVgap(10);
    page.add(zoneTopLeft, 0, 0);
    //        page.setColumnSpan(zoneTopLeft, 2);
    page.add(zoneTopRight, 1, 0); //2,0 for spaning
    //        page.setColumnSpan(zoneTopRight,2);
    page.add(zoneBottomLeft, 0, 1);
    //        page.setColumnSpan(zoneBottomLeft,1);
    page.add(zoneBottomRight, 1, 1);
    //        page.setColumnSpan(zoneBottomRight,3);

    root.getChildren().addAll(page);


    primaryStage.setScene(scene);
    primaryStage.show();


}

private VBox createBaseContainer() {
    VBox base = new VBox(); // box
    base.setPrefWidth(250);
    base.setPrefHeight(200);
    base.setStyle("-fx-border-width: 1;-fx-border-color: red");
    //  base.prefWidthProperty().bind(scene.widthProperty());

    BorderPane top = new BorderPane(); // top area of base
    top.prefWidthProperty().bind(base.prefWidthProperty());
    top.setPrefHeight(33);
    top.setLeft(setBaseTitle());
    top.setRight(setBaseButtons());
    top.setStyle("-fx-border-width: 1;-fx-border-color: blue");

    StackPane bottom = new StackPane(); // bottom are of base, content keeper

    base.getChildren().addAll(top, bottom);
    return base;
}


private Node setBaseButtons() {
    return new HBox();
}

private Node setBaseTitle() {

    return new Label();
}


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

Answer 1

要使用GridPane 执行此操作，请将其视为具有宽度分别为 40%、10% 和 50% 的三列。左上角的节点跨越第一列和第二列，右上角仅第三列。左下角只在第一列，右下角跨越第二列和第三列。

类似：

|   c1   |c2|     c3    |
_________________________
|-----------|-----------|
|--------|--------------|

在代码中，执行如下操作：

Node topLeft ;
Node topRight ;
Node bottomLeft ;
Node bottomRight ;

GridPane page = new GridPane();
// page.add(Node, colIndex, rowIndex, colSpan, rowSpan):
page.add(topLeft, 0, 0, 2, 1);
page.add(topRight, 2, 0, 1, 1);
page.add(bottomLeft, 0, 2, 1, 1);
page.add(bottomRight, 1, 1, 2, 1);


ColumnConstraints col1Constraints = new ColumnConstraints();
col1Constraints.setPercentWidth(40);
ColumnConstraints col2Constraints = new ColumnConstraints();
col2Constraints.setPercentWidth(10);
ColumnConstraints col3Constraints = new ColumnConstraints();
col3Constraints.setPercentWidth(50);
page.getColumnConstraints().addAll(col1Constraints, col2Constraints, col3Constraints);

编辑：文本从 getColumnContraints 更改为 getColumnConstraints。

Answer 2

@James_D 有一个非常好的解决方案。在我的代码中，我为所有 vBox 分配了相同的大小。所以这个问题还有另一个解决方案——实际上我们可以称之为修复基本错误。这是工作代码：

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Group root = new Group();
        primaryStage.setTitle("Hello World");
        Scene scene = new Scene(root, 650, 550);



        VBox zoneTopLeft = createBaseContainer(300,300);
        VBox zoneTopRight = createBaseContainer(300,300);
        VBox zoneBottomLeft = createBaseContainer(200,200);
        VBox zoneBottomRight = createBaseContainer(400,200);


        GridPane page=new GridPane();
        page.setHgap(10);
        page.setVgap(10);
        page.add(zoneTopLeft, 0, 0);
        page.setColumnSpan(zoneTopLeft, 2);
        page.add(zoneTopRight, 2, 0);
        page.setColumnSpan(zoneTopRight,2);
        page.add(zoneBottomLeft, 0, 1);
        page.add(zoneBottomRight, 1, 1);
        page.setColumnSpan(zoneBottomRight,3);

        root.getChildren().addAll(page);


        primaryStage.setScene(scene);
        primaryStage.show();


    }

    private VBox createBaseContainer(double width,double height) {
        VBox base = new VBox(); // box
        base.setPrefWidth(width);
       base.setPrefHeight(height);
        base.setStyle("-fx-border-width: 1;-fx-border-color: red");
        //  base.prefWidthProperty().bind(scene.widthProperty());

        BorderPane top = new BorderPane(); // top area of base
        top.prefWidthProperty().bind(base.prefWidthProperty());
        top.setPrefHeight(33);
        top.setLeft(setBaseTitle());
        top.setRight(setBaseButtons());
        top.setStyle("-fx-border-width: 1;-fx-border-color: blue");

        StackPane bottom = new StackPane(); // bottom are of base, content keeper

        base.getChildren().addAll(top, bottom);
        return base;
    }


    private Node setBaseButtons() {
        return new HBox();
    }

    private Node setBaseTitle() {

        return new Label();
    }


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