java - 尝试正确设置研磨 Pane

Question

我正在开始学习，我想像屏幕截图中那样设置 GridPane: PIC1 但它看起来像这样:PIC2

如果您提供有关如何从 PIC1 实现布局的任何提示，我将非常感激。 网格 Pane 适合这个吗？我的主要问题是按钮或标签粘在其列上，调整其他列的大小。

代码:

public class Main extends Application {

final double MAX_FONT_SIZE = 30;

@Override
public void start(Stage primaryStage) throws Exception{
    Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
    primaryStage.setTitle("Hello World");
    primaryStage.setScene(new Scene(root, 400, 300));
    primaryStage.show();
    BorderPane borderPane = new BorderPane();

    Thread superThreat = new Thread();
    superThreat.start();


    Label mainClicksWindow = new Label("0");
    mainClicksWindow.setMinSize(200,100);
    mainClicksWindow.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    mainClicksWindow.setAlignment(Pos.CENTER);
    mainClicksWindow.setFont(new Font(MAX_FONT_SIZE));
    mainClicksWindow.setStyle("-fx-border-color:black; -fx-background-color: grey;");
    mainClicksWindow.setGraphic(new Label("main window"));
    mainClicksWindow.getGraphic().setStyle("-fx-text-fill: #c4d8de;");



    Label timeRemainwindow = new Label("TIME");
    timeRemainwindow.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Label infoLabel = new Label("INFO HERE");
    infoLabel.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

    Button coolButton = new Button("CLICK!");
    coolButton.setAlignment(Pos.CENTER);
    coolButton.setMinSize(200,40);
    coolButton.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button1 = new Button("1");
    button1.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

    Button button2 = new Button("2");
    button2.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button3 = new Button("3");
    button3.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button4 = new Button("4");
    button4.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button5 = new Button("5");
    button5.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button6 = new Button("6");
    button6.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button7 = new Button("7");
    button7.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button8 = new Button("8");
    button8.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);


    GridPane gridPane = new GridPane();
    gridPane.setHgap(10.0);
    gridPane.setVgap(10.0);



    GridPane.setConstraints(mainClicksWindow,0,0);

    GridPane.setConstraints(infoLabel,0,1);
    GridPane.setConstraints(timeRemainwindow,1,1);

    GridPane.setConstraints(coolButton,0,2);

    GridPane.setConstraints(button1,0,3);
    GridPane.setConstraints(button2,1,3);
    GridPane.setConstraints(button3,2,3);
    GridPane.setConstraints(button4,3,3);

    GridPane.setConstraints(button5,0,4);
    GridPane.setConstraints(button6,1,4);
    GridPane.setConstraints(button7,2,4);
    GridPane.setConstraints(button8,3,4);

    borderPane.setCenter(gridPane);

    gridPane.getChildren().addAll(mainClicksWindow,infoLabel,timeRemainwindow,coolButton,button1,button2,button3,button4,button5,button6,button7,button8);
    primaryStage.setScene(new Scene(borderPane, 300, 250));

Answer 1

您想要在这里做的是让您的元素跨越多个列和/或行。例如，您的顶部标签的 colspan 为 2。

更改 setConstraints 方法以包含 rowspan 和 colspan 参数:

GridPane.setConstraints(mainClicksWindow,0,0,2,1);

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/GridPane.html#setConstraints-javafx.scene.Node-int-int-int-int-

您还可以在现有代码之后对每个需要的节点使用 setColumnSpan(Node child, Integer value) 和 setRowSpan(Node child, Integer value) 进行设置。