在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

根据您的代码，问题在于承载按钮的网格窗格永远不会改变其形状。您还需要向该网格窗格添加约束和侦听器。

这是一个例子：

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

}

Answer 2

只需在您的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（在这种情况下）