【问题标题】:How do I create a JavaFX BorderPane with no center?如何创建没有中心的 JavaFX BorderPane?
【发布时间】:2019-05-10 22:33:40
【问题描述】:

我想在 JavaFX 中创建一个没有中心窗格的 BorderPane 布局。

目前我写的代码只实现了左右边框,如下:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class GUI_Practice extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        String blackBorder = "-fx-border-style: solid; -fx-border-width: 1; -fx-border-color: black";

        /* Left column */
        Button save = new Button("Save");
        Button del = new Button("Delete");
        HBox settings = new HBox(save, del);
        VBox leftCol = new VBox(settings);
        leftCol.setStyle(blackBorder);

        /* Right column */
        Button calculate = new Button("Calculate");
        Button cancel = new Button("Cancel");
        HBox runButtons = new HBox(calculate, cancel);
        VBox rightCol = new VBox(runButtons);
        rightCol.setStyle(blackBorder);

        /* Set up borderpane */
        BorderPane root = new BorderPane();
        root.setPadding(new Insets(15));
        root.setLeft(leftCol);
        root.setRight(rightCol);

        Scene scene = new Scene(root, 800, 600);
        stage.setScene(scene);
        stage.show();
    }

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

}

它给出的输出如下图所示:

但是,我希望它看起来更像这样:

左右列的宽度相等并占据窗口的整个宽度。另外,列的宽度不会随着窗口的变化而变化,所以中间的空白会随着窗口的变大而变大。

我需要更改哪些内容才能使列填充窗口的宽度?

(P.S.我还在学习,所以如果解决方案可以避免FXML(我还不明白),那就太好了)

编辑: 根据@k88 的建议,我的启动方法现在看起来像这样:

public void start(Stage stage) throws Exception {
        String blackBorder = "-fx-border-style: solid; -fx-border-width: 1; -fx-border-color: black";

        Button calculate = new Button("Calculate");
        Button cancel = new Button("Cancel");
        HBox runButtons = new HBox(calculate, cancel);
        VBox rightCol = new VBox(runButtons);
        rightCol.setStyle(blackBorder);

        Button save = new Button("Save");
        Button del= new Button("Delete");
        HBox settings = new HBox(save, load);
        VBox leftCol = new VBox(settings);
        leftCol.setStyle(blackBorder);

        HBox root = new HBox(leftCol, rightCol);
        root.setPadding(new Insets(15));

        Scene scene = new Scene(root, 800, 600);
        stage.setScene(scene);
        stage.show();
    }

给出一个看起来像这样的窗口:

【问题讨论】:

  • 你不能把它放在 HBox 里吗?然后在 HBox 的每个节点中添加一个 BorderPane 或任何你想要的东西?基本上用 HBox 替换 BorderPane,因为我认为 BorderPane 在这里没有任何用处。
  • @k88 90% 的初学者使用BorderPane 却不知道他们为什么使用它。我认为这是因为它是全新安装中的默认 Pane(现在不记得了)。
  • @k88 感谢您的建议,但是当我这样做时,它看起来就像我的问题中的屏幕截图,但右列与左列接触,并且它们的右侧都有空格.
  • 这是因为您为Scene 定义了固定大小,但您的内容不需要这么多空间 - 所以空间必须放在某个地方。 BorderPane 将其分配给“中心”节点,该节点无论如何都是空的,而HBox 将其分配给右侧。
  • @JolonB 你能做的最好的就是在左右两边平均分配额外的空间。你可以试试HBox.setAlignment(Pos.CENTER)

标签: java css javafx borderpane


【解决方案1】:

有不同的方法可以解决这个问题。

  1. 如果您还想从BorderPane 中获得好处(比如有顶部和底部窗格),您可以将HBox/GridPane 设置为中心(不设置左/右)。
  2. 如果您不关心顶部和底部布局的实现,那么按照@k88 的建议,您可以直接使用HBoxGridPane 作为根节点。

使用HBox

HBox.setHGrow(leftCol,Priority.ALWAYS);
HBox.setHGrow(rightCol,Priority.ALWAYS);
HBox root = new HBox();
root.setPadding(new Insets(15));
root.getChildren().addAll(leftCol, rightCol);

使用GridPane

GridPane root = new GridPane();
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(50);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(50);
root.getColumnConstraints().addAll(col1,col2);
root.addRow(0, leftCol,rightCol);

更新:在任何一种情况下,如果您希望按钮自动拉伸,请将按钮的宽度绑定到其布局。这样您就可以控制HBox 中的按钮宽度比例。

Button calculate = new Button("Calculate");
Button cancel = new Button("Cancel");
HBox runButtons = new HBox(calculate, cancel);
calculate.prefWidthProperty().bind(runButtons.widthProperty().divide(2));
cancel.prefWidthProperty().bind(runButtons.widthProperty().divide(2));

更新 2:请在下面找到示例演示。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class Sample extends Application {

    public void start(Stage stage) throws Exception {
        String blackBorder = "-fx-border-style: solid; -fx-border-width: 1; -fx-border-color: black";

        Button calculate = new Button("Calculate");
        Button cancel = new Button("Cancel");
        HBox runButtons = new HBox(calculate, cancel);
        calculate.prefWidthProperty().bind(runButtons.widthProperty().divide(2));
        cancel.prefWidthProperty().bind(runButtons.widthProperty().divide(2));
        VBox rightCol = new VBox(runButtons);
        rightCol.setStyle(blackBorder);

        Button save = new Button("Save");
        Button del = new Button("Delete");
        HBox settings = new HBox(save, del);
        save.prefWidthProperty().bind(settings.widthProperty().divide(3)); // 1/3
        del.prefWidthProperty().bind(settings.widthProperty().divide(3).multiply(2)); // 2/3
        VBox leftCol = new VBox(settings);
        leftCol.setStyle(blackBorder);


        GridPane root = new GridPane();
        ColumnConstraints col1 = new ColumnConstraints();
        col1.setPercentWidth(50);
        ColumnConstraints col2 = new ColumnConstraints();
        col2.setPercentWidth(50);
        root.getColumnConstraints().addAll(col1,col2);
        root.addRow(0, leftCol,rightCol);

        Scene scene = new Scene(root, 800, 600);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String... a) {
        Application.launch(a);
    }
}

【讨论】:

  • 谢谢。我使用了 GridPane 实现,但是当我尝试使用 setHgrow 使按钮自动拉伸时,它不会改变任何东西。按钮的大小与最初的大小相同。 编辑:当我使用 HBox 时也是如此。
  • @JolonB 如果您尝试建议 1 会怎样?使用以 HBox 为中心的 BorderPane。让左右打开。这可能会按照你想要的方式填写。
  • 我想我明白了。我已经完成了:save.setMaxWidth(Double.MAX_VALUE); del.setMaxWidth(Double.MAX_VALUE); calculate.setMaxWidth(Double.MAX_VALUE); cancel.setMaxWidth(Double.MAX_VALUE); 这使按钮填充了 HBox 的宽度。这是典型的做法吗?它会被认为是丑陋的代码,还是在这种情况下很常见?
  • 还有什么方法可以将 VBoxes(在建议 2 中)设置为 50% 以外的宽度,比如左:70%,右 30%,还是使用 GridPane 会更好?
  • 我会说设置 maxWidth 是一种可接受的方法。或者,您可以将按钮宽度绑定到其布局(更新了我的答案)。这样,您将不会为每个按钮设置 hgrow,并且您可以控制那里的宽度比例。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-25
  • 1970-01-01
  • 1970-01-01
  • 2019-03-30
相关资源
最近更新 更多