JavaFX如何同时实现行标题与列标题？支持Scene Builder或手动编码

当然可以实现啦！在JavaFX里不管是用Scene Builder可视化搭建，还是手动写代码，都能同时搞定行标题和列标题的需求，下面给你两种常用的方案，你可以根据自己的场景选～

如果你的内容是结构化数据（比如列表型的业务数据），用TableView是最顺手的，它自带列标题，行标题只需要自定义一下就行：

1. 快速搞定顶部列标题 #

TableView本身就支持顶部列标题，你在Scene Builder里拖入TableView后，直接添加TableColumn组件，然后在属性面板设置text就能搞定列标题（比如设置成「姓名」「年龄」「邮箱」）。如果需要绑定数据，还能给TableColumn设置cellValueFactory关联你的数据模型字段。

2. 自定义左侧行标题 #

默认TableView没有行头，咱可以通过自定义TableRow来实现：
首先在Scene Builder里给TableView设置一个fx:id（比如dataTable），然后在Controller里注入它，再设置rowFactory：

@FXML
private TableView<User> dataTable;

@Override
public void initialize(URL url, ResourceBundle rb) {
    // 自定义行工厂，生成带行标题的TableRow
    dataTable.setRowFactory(tv -> new TableRow<User>() {
        private final Label rowHeader = new Label();

        {
            // 给行标题设置样式，比如宽度、对齐方式
            rowHeader.setPrefWidth(70);
            rowHeader.setAlignment(Pos.CENTER_RIGHT);
            rowHeader.setPadding(new Insets(5));
            rowHeader.getStyleClass().add("row-header"); // 加样式类方便CSS美化
        }

        @Override
        protected void updateItem(User item, boolean empty) {
            super.updateItem(item, empty);
            if (empty || item == null) {
                setGraphic(null);
            } else {
                // 这里可以用行索引当标题，也可以从数据模型里取自定义标题
                rowHeader.setText("行 " + (getIndex() + 1));
                // 把行标题和原单元格内容拼在一起
                HBox hbox = new HBox(rowHeader, getGraphic());
                hbox.setSpacing(8);
                setGraphic(hbox);
            }
        }
    });
}

如果你的内容不需要数据绑定，或者布局要更灵活（比如混合文本、按钮、输入框），用GridPane来搭会更自由，思路很简单：

• 第一行放列标题
• 第一列放行标题
• 中间区域放内容单元格

不管是手动写代码还是Scene Builder可视化搭建都很方便：

代码实现示例 #

// 创建GridPane并设置间距、内边距
GridPane gridPane = new GridPane();
gridPane.setHgap(10);
gridPane.setVgap(5);
gridPane.setPadding(new Insets(10));

// 添加顶部列标题
String[] columnTitles = {"基本信息", "联系方式", "备注"};
for (int col = 0; col < columnTitles.length; col++) {
    Label colLabel = new Label(columnTitles[col]);
    colLabel.setStyle("-fx-font-weight: bold; -fx-background-color: #f0f0f0; -fx-padding: 6;");
    gridPane.add(colLabel, col + 1, 0); // 列从1开始，行0是列标题
}

// 添加左侧行标题和内容单元格
String[] rowTitles = {"用户A", "用户B", "用户C"};
for (int row = 0; row < rowTitles.length; row++) {
    // 行标题
    Label rowLabel = new Label(rowTitles[row]);
    rowLabel.setStyle("-fx-font-weight: bold; -fx-background-color: #f0f0f0; -fx-padding: 6;");
    gridPane.add(rowLabel, 0, row + 1); // 列0，行从1开始

    // 内容单元格，这里用TextField和TextArea示例
    TextField infoField = new TextField("默认信息");
    TextField contactField = new TextField("13xxxxxxxxx");
    TextArea remarkArea = new TextArea("无备注");
    remarkArea.setPrefRowCount(2);

    gridPane.add(infoField, 1, row + 1);
    gridPane.add(contactField, 2, row + 1);
    gridPane.add(remarkArea, 3, row + 1);
}

// 把GridPane放到场景里
BorderPane root = new BorderPane(gridPane);
Scene scene = new Scene(root, 700, 350);
primaryStage.setScene(scene);
primaryStage.show();

Scene Builder可视化搭建 #

直接拖入GridPane，然后依次拖Label作为列标题（放在第0行，列1、2、3...）、行标题（放在第0列，行1、2、3...），再把内容组件拖到对应的行列位置就行，属性面板里可以直接设置行列索引，非常直观。

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