9

2 行 2 列のグリッドペインを使用してレイアウトを設計しようとしています。左上の領域と右上の領域は width を共有し、どちらもその 50% を取得します。しかし、2行目では、幅の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);
}
4

2 に答える 2