JavaFX中如何使Info标签后的节点跨剩余列及3行显示？

需求：已声明GridPane的行列数量后，让“Info”标签所在行第二列的节点（infoFld）跨越剩余所有列并向下占据3行。

当前输出效果：

当前代码：

public class Test extends Application {

    @Override
    public void start(Stage primaryStage) {
        GridPane root = new GridPane();
        root.setGridLinesVisible(true);
        final int numCols = 5 ;
        final int numRows = 12 ;
        for (int i = 0; i < numCols; i++) {
            ColumnConstraints colConst = new ColumnConstraints();
            colConst.setPercentWidth(100.0 / numCols);
            root.getColumnConstraints().add(colConst);
        }
        for (int i = 0; i < numRows; i++) {
            RowConstraints rowConst = new RowConstraints();
            rowConst.setPercentHeight(100.0 / numRows);
            root.getRowConstraints().add(rowConst);         
        }
        
        Label nameLbl = new Label("Name");
        Label nameFld = new Label();
        Label infoLbl = new Label("Info : ");
        Label infoFld = new Label();
        infoFld.setStyle("-fx-background-color: lavender;-fx-font-size: 7pt;-fx-padding: 10 0 0 0;");   

        Button okBtn = new Button("OK");
        Button cancelBtn = new Button("Cancel");
        
        Label commentBar = new Label("Status: Ready");
        commentBar.setStyle("-fx-background-color: lavender;-fx-font-size: 7pt;-fx-padding: 10 0 0 0;");       
        
        root.add(nameLbl, 0, 0, 1, 1);   
        root.add(nameFld, 1, 0, 1, 1);   
        root.add(infoLbl, 0, 1, 1, 1);  
        root.add(infoFld, 1, 1, 4, 4);  
        root.add(okBtn, 3, 9, 1, 1);    
        root.add(cancelBtn, 2, 9, 1, 1); 
        root.add(commentBar, 0, 11, GridPane.REMAINING, 1);     
        
        primaryStage.setScene(new Scene(root, 900, 500));
        primaryStage.show();
    }

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

解决方案 #

要实现需求，只需修改infoFld的添加参数：

将：

root.add(infoFld, 1, 1, 4, 4);  

替换为：

root.add(infoFld, 1, 1, GridPane.REMAINING, 3);  

参数说明：

• GridPane.REMAINING：自动计算从当前列（索引1）到GridPane最后一列的列数，无需硬编码数值，当总列数numCols变动时无需手动修改。
• 第四个参数3：设置节点向下占据3行，满足需求。

修改后的完整代码：

public class Test extends Application {

    @Override
    public void start(Stage primaryStage) {
        GridPane root = new GridPane();
        root.setGridLinesVisible(true);
        final int numCols = 5 ;
        final int numRows = 12 ;
        for (int i = 0; i < numCols; i++) {
            ColumnConstraints colConst = new ColumnConstraints();
            colConst.setPercentWidth(100.0 / numCols);
            root.getColumnConstraints().add(colConst);
        }
        for (int i = 0; i < numRows; i++) {
            RowConstraints rowConst = new RowConstraints();
            rowConst.setPercentHeight(100.0 / numRows);
            root.getRowConstraints().add(rowConst);         
        }
        
        Label nameLbl = new Label("Name");
        Label nameFld = new Label();
        Label infoLbl = new Label("Info : ");
        Label infoFld = new Label();
        infoFld.setStyle("-fx-background-color: lavender;-fx-font-size: 7pt;-fx-padding: 10 0 0 0;");   

        Button okBtn = new Button("OK");
        Button cancelBtn = new Button("Cancel");
        
        Label commentBar = new Label("Status: Ready");
        commentBar.setStyle("-fx-background-color: lavender;-fx-font-size: 7pt;-fx-padding: 10 0 0 0;");       
        
        root.add(nameLbl, 0, 0, 1, 1);   
        root.add(nameFld, 1, 0, 1, 1);   
        root.add(infoLbl, 0, 1, 1, 1);  
        root.add(infoFld, 1, 1, GridPane.REMAINING, 3);  
        root.add(okBtn, 3, 9, 1, 1);    
        root.add(cancelBtn, 2, 9, 1, 1); 
        root.add(commentBar, 0, 11, GridPane.REMAINING, 1);     
        
        primaryStage.setScene(new Scene(root, 900, 500));
        primaryStage.show();
    }

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

内容的提问来源于stack exchange，提问作者Space