Динамическое изменение размера и расположение кнопок в GridPane

Question

Я пытаюсь создать окно, состоящее из левой панели и правой панели, включенных в макет GridPane. Я рисую ограничивающую рамку этих двух виджетов и вижу, что они изменяют размеры при изменении размера главного окна приложения. На левой панели макет GridPane используется для добавления кнопок. В то время как левая панель изменяет размеры должным образом, кнопки внутри левой панели не изменяют размеры и не меняют положение после изменения размера левой панели. Полный код указан ниже. Кто-нибудь может помочь?

public class PlanesJavaFxApplication extends Application {
static class ToolbarPane extends Pane 
{
    public ToolbarPane() {
        final HBox hbox = new HBox(5);
        hbox.getChildren().add(new Text("TOP"));
        this.getChildren().add(hbox);
    }
}

static class LeftPane extends Pane 
{
    public LeftPane() {
        final GridPane gridPane = new GridPane();

        ColumnConstraints col1 = new ColumnConstraints();
        col1.setPercentWidth(33);
        ColumnConstraints col2 = new ColumnConstraints();
        col2.setPercentWidth(33);
        ColumnConstraints col3 = new ColumnConstraints();
        col3.setPercentWidth(33);
        gridPane.getColumnConstraints().addAll(col1, col2, col3);

        Button selectButton = new Button("Select");
        Button rotateButton = new Button("Rotate");         
        Button upButton = new Button("Up");
        Button leftButton = new Button("Left");         
        Button rightButton = new Button("Right");
        Button downButton = new Button("Down");         
        Button doneButton = new Button("Done"); 

        gridPane.add(selectButton, 1, 0);
        gridPane.add(rotateButton, 1, 1);
        gridPane.add(upButton, 1, 2);
        gridPane.add(leftButton, 0, 3);
        gridPane.add(rightButton, 2, 3);
        gridPane.add(downButton, 1, 4);
        gridPane.add(doneButton, 1, 5); 

        //gridPane.prefWidth(300);
        this.getChildren().add(gridPane);
    }
}

static class RightPane extends Pane 
{
    public RightPane() {
        final HBox hbox = new HBox(5);
        hbox.getChildren().add(new Text("RIGHT"));
        this.getChildren().add(hbox);
    }
}       

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

@Override
public void start(Stage stage) throws Exception {
    // TODO Auto-generated method stub

    final GridPane gridPane = new GridPane();
    ColumnConstraints col1 = new ColumnConstraints();
    col1.setPercentWidth(40);
    ColumnConstraints col2 = new ColumnConstraints();
    col2.setPercentWidth(60);
    gridPane.getColumnConstraints().addAll(col1, col2);

    Pane leftPane = new LeftPane();
    leftPane.setStyle("-fx-border-color: red");
    Pane rightPane = new RightPane();
    rightPane.setStyle("-fx-border-color: blue");

    gridPane.add(leftPane, 0, 0);
    gridPane.add(rightPane,  1,  0);

    stage.setScene(new Scene(gridPane));
    stage.show();
}

}

Answer 1

Просто добавьте привязку между вашим LeftPane и вашим GridPane, как показано ниже, в LeftPane (в конце класса):

static class LeftPane extends Pane {
    public LeftPane() {
        final GridPane gridPane = new GridPane();

        ColumnConstraints col1 = new ColumnConstraints();
        col1.setPercentWidth(33);
        ColumnConstraints col2 = new ColumnConstraints();
        col2.setPercentWidth(33);
        ColumnConstraints col3 = new ColumnConstraints();
        col3.setPercentWidth(33);
        gridPane.getColumnConstraints().addAll(col1, col2, col3);

        Button selectButton = new Button("Select");
        Button rotateButton = new Button("Rotate");         
        Button upButton = new Button("Up");
        Button leftButton = new Button("Left");         
        Button rightButton = new Button("Right");
        Button downButton = new Button("Down");         
        Button doneButton = new Button("Done"); 


        gridPane.add(selectButton, 1, 0);
        gridPane.add(rotateButton, 1, 1);
        gridPane.add(upButton, 1, 2);
        gridPane.add(leftButton, 0, 3);
        gridPane.add(rightButton, 2, 3);
        gridPane.add(downButton, 1, 4);
        gridPane.add(doneButton, 1, 5);

        // In order to see the GridPane extends with the LeftPane, remove it further
        gridPane.setGridLinesVisible(true);
        // Those 2 following lines enable the gridpane to stretch/shrink according the LeftPane
        gridPane.prefWidthProperty().bind(this.widthProperty());
        gridPane.prefHeightProperty().bind(this.heightProperty());

        //gridPane.prefWidth(300);
        this.getChildren().add(gridPane);
    }
}

Вы также можете центрировать свои кнопки для лучшего эффекта (GridPane.setValignment(Node pNode, VPos pVPos) и GridPane.setHalignment(Node pNode, HPos pHPos).

Некоторые замечания (не применимо, если вы разместили код MCVE / SSCCE):

Максимально используйте файлы FXML для более чистого кода LeftPane может напрямую расширяться GridPane вместо Pane (в данном случае)

Answer 2

В зависимости от вашего кода, проблема в том, что сетка, на которой расположены кнопки, никогда не меняет свою форму. Вам также нужно добавить ограничения и слушателей в эту сетку.

вот пример:

public class PlanesJavaFxApplication extends Application {

static class ToolbarPane extends Pane {

    public ToolbarPane() {
        final HBox hbox = new HBox(5);
        hbox.getChildren().add(new Text("TOP"));
        this.getChildren().add(hbox);
    }
}

static Button upButton = new Button("Up");

static class LeftPane extends Pane {

    public LeftPane() {
        final GridPane gridPane = new GridPane();

        ColumnConstraints col1 = new ColumnConstraints();
        col1.setPercentWidth(33);
        ColumnConstraints col2 = new ColumnConstraints();
        col2.setPercentWidth(33);
        ColumnConstraints col3 = new ColumnConstraints();
        col3.setPercentWidth(33);
        gridPane.getColumnConstraints().addAll(col1, col2, col3);

        Button selectButton = new Button("Select");
        Button rotateButton = new Button("Rotate");
        Button leftButton = new Button("Left");
        Button rightButton = new Button("Right");
        Button downButton = new Button("Down");
        Button doneButton = new Button("Done");

        gridPane.add(selectButton, 1, 0);
        gridPane.add(rotateButton, 1, 1);
        gridPane.add(upButton, 1, 2);
        gridPane.add(leftButton, 0, 3);
        gridPane.add(rightButton, 2, 3);
        gridPane.add(downButton, 1, 4);
        gridPane.add(doneButton, 1, 5);

        //gridPane.prefWidth(300);
        this.getChildren().add(gridPane);
    }
}

static class RightPane extends Pane {

    public RightPane() {
        final HBox hbox = new HBox(5);
        hbox.getChildren().add(new Text("RIGHT"));
        this.getChildren().add(hbox);
    }
}

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

@Override
public void start(Stage stage) throws Exception {
    // TODO Auto-generated method stub

    final GridPane gridPane = new GridPane();
    gridPane.setGridLinesVisible(true);
    ColumnConstraints col1 = new ColumnConstraints();
    col1.setPercentWidth(40);
    ColumnConstraints col2 = new ColumnConstraints();
    col2.setPercentWidth(60);
    gridPane.getColumnConstraints().addAll(col1, col2);

    Pane leftPane = new LeftPane();
    leftPane.setStyle("-fx-border-color: red");
    Pane rightPane = new RightPane();
    rightPane.setStyle("-fx-border-color: blue");

    stage.widthProperty().addListener((observable, oldValue, newValue) -> {
        upButton.setPrefWidth(newValue.doubleValue() > oldValue.doubleValue() ? upButton.getWidth() + 5 : upButton.getWidth() - 5);
    });

    gridPane.add(leftPane, 0, 0);
    gridPane.add(rightPane, 1, 0);

    stage.setScene(new Scene(gridPane));
    stage.show();
}

}