java - 如何创建没有中心的 JavaFX BorderPane?

标签 java css javafx borderpane

我想在 JavaFX 中创建一个没有中心 Pane 的 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();
    }

}

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

enter image description here

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

enter image description here

其中左右两列宽度相等并占据窗口的整个宽度。此外,列不会随窗口改变宽度,因此中间的空白会随着窗口变大而变大。

我需要更改什么才能使列填满窗口的宽度?

(附:我还在学习,所以如果解决方案可以避免 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();
    }

给一个窗口看起来像:

enter image description here

最佳答案

有多种方法可以解决此问题。

  1. 如果您仍然想从 BorderPane 中受益(比如有顶部和底部 Pane ),您可以设置一个 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);

更新:无论哪种情况,如果您希望按钮自动拉伸(stretch),请将按钮的宽度绑定(bind)到其布局。这样你就可以在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);
    }
}

关于java - 如何创建没有中心的 JavaFX BorderPane?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53698669/

相关文章:

java - 禁用 SwipeRefreshLayout 会重置布局

java - 使用superCSV读取一个80GB的大文本文件

java - Java中的方法重写-将子类对象分配给父类变量

javascript - 如何为悬停时点缀的框边框设置动画?

HTML 和 CSS。社交按钮如何移动它们?

JavaFX ListView setItems() 无法解析符号

java - 如何访问第三方库中 protected Java 方法?

css - Angular Material design 复选框黑色前景色(符号颜色)

java - 将 JavaFX TextField 绑定(bind)到来自两个 SimpleStringValues 的字符串值

listview - 如何在 JavaFX 中更改 ListView 中的字体大小?