如何在javafx中手动跨过网格窗格的列? [英] How to span columns of a gridpane manually in javafx?

问题描述

我正在尝试设计一个包含2行2列的gridpane布局.左上角区域和右上角区域共享宽度，它们都获得宽度的50％.但是在第二行中，我需要右下角的区域获得60％的宽度，所以左下角的区域为40％.

I am trying to design a layout with gridpane which contains 2 rows and 2 columns. Top-left area and top right area shares width , they both get 50% of it. But in second row i need bottom right area to get 60% of width so bottom left area 40%.

我也尝试过跨[[2col.，2col] [1col，3col]]矩阵之类的列.也不行.

I've also tried spaning columns like [[2col.,2col][1col,3col]] matrix. It didn't work neither.

这是我的代码；

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);
}

推荐答案

要使用 GridPane 进行此操作，可以认为它具有三列宽度分别为40％，10％和50％的列.左上方的节点跨越第一和第二列，右上方的只是第三列.左下角仅在第一列中，右下角跨越第二和第三列.

To do this with a GridPane, think of it as having three columns with widths 40%, 10%, and 50%. The top left node spans the first and second column, the top right just the third column. The bottom left is only in the first column, the bottom right spans the second and third column.

类似的东西:

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

在代码中，请执行以下操作:

In code, do something like:

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.

text changed from getColumnContraints to getColumnConstraints.

这篇关于如何在javafx中手动跨过网格窗格的列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！