如何在 JavaFX 中创建具有垂直/列标题的表格

Question

有没有办法创建带有垂直标题的表格视图？我在 javafx 中没有看到任何选项可以执行此操作。

Answer 1

您可以将图形设置为旋转的图形Label，并将文本设置为空字符串。

private void makeColumnHeader(TableColumn<?,?> column) {
    Label label = new Label();
    label.setText(column.getText());
    column.setText("");
    label.setRotate(90);
    column.setGraphic(label);
}

这是一个完整的示例：

import javafx.application.Application;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.fxml.FXMLLoader;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloApplication extends Application {

    private void makeColumnHeader(TableColumn<?,?> column) {
        Label label = new Label();
        label.setText(column.getText());
        column.setText("");
        label.setRotate(90);
        column.setGraphic(label);
    }

    @Override
    public void start(Stage stage) throws IOException {
        TableView<Item> table = new TableView<>();
        TableColumn<Item, Number> idColumn = new TableColumn<>("Id");
        idColumn.setCellValueFactory(data -> new SimpleIntegerProperty(data.getValue().id()));
        TableColumn<Item, String> itemColumn = new TableColumn<>("Item");
        itemColumn.setCellValueFactory(data -> new SimpleStringProperty(data.getValue().name()));

        makeColumnHeader(idColumn);
        makeColumnHeader(itemColumn);

        table.getColumns().add(idColumn);
        table.getColumns().add(itemColumn);

        for (int i = 1 ; i <= 20; i++) table.getItems().add(new Item(i, "Item "+i));

        BorderPane root = new BorderPane(table);
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
    }

    public static record Item(int id, String name){}

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

请注意，将列的文本设置为空字符串可能会产生不良副作用。例如，tableMenuButton依赖表列中的文本来显示菜单项。添加table.setTableMenuButtonVisible(true);上面的代码就可以看到问题所在。

稍微更稳健的解决方案是将图形中标签的文本绑定到列中的文本，然后使用 CSS 隐藏默认文本：

private void makeColumnHeader(TableColumn<?,?> column) {
    Label label = new Label();
    label.textProperty().bind(column.textProperty());
    label.setRotate(90);
    column.setGraphic(label);
}

并在外部样式表中：

.table-column > .label {
    -fx-content-display: graphic-only;
}