TableView setRowFactory CSS 选择器

Question

我想根据该行中的项目在 TableView 中呈现一个完整的行。我用的是TableView.setRowFactory，但是好像不行。

正如您在代码中看到的那样，如果该行中人员的姓氏是“Smith”，则该行应该使用不同的文本颜色呈现。

如果我使用 TableColumn.setCellFactory，相同的代码也可以工作。但我不想在所有不同的单元工厂中复制必要的代码。

我的错误在哪里？

public class TableViewTest extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        final Scene scene = new Scene(createContents());
        scene.getStylesheets().add(getClass().getResource("test.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private Pane createContents() {
        final ObservableList<Person> items = FXCollections.observableArrayList(
                new Person("John", "Smith"), new Person("Mary", "Smith"),
                new Person("William", "Young"));
        final TableView<Person> table = new TableView<>(items);
        final TableColumn<Person, String> c1 = new TableColumn<>("First name");
        c1.setCellValueFactory(p -> new SimpleStringProperty(p.getValue().getFName()));
        final TableColumn<Person, String> c2 = new TableColumn<>("Last name");
        c2.setCellValueFactory(p -> new SimpleStringProperty(p.getValue().getLName()));
        table.getColumns().setAll(c1, c2);
        table.setRowFactory(param -> new TableRow<Person>() {
            protected void updateItem(Person item, boolean empty) {
                super.updateItem(item, empty);
                getStyleClass().remove("own-cell");
                if (item != null && item.getLName().equals("Smith")) {
                    getStyleClass().add("own-cell");
                }
            };
        });
        return new HBox(table);
    }
}

这是只有一种样式的简单样式表 test.css：

.table-row-cell:filled .own-cell {
    -fx-text-fill: cyan;
}

Answer 1

您的 CSS 不正确：选择器

.table-row-cell:filled .own-cell

选择一个样式类为own-cell的元素，它是一个样式类为table-row-cell的元素的后代（并且具有伪类filled）。

您需要选择任何table-cell，它是具有样式类own-cell和table-row-cell的元素的后代。

以下将执行此操作：

.own-cell.table-row-cell:filled .table-cell {
    -fx-text-fill: cyan;
}

注意.own-cell 和.table-row-cell 之间没有空格。

顺便说一句，如果您有一个可以使用布尔表达式打开或关闭的 CSS 类，则使用自定义 PseudoClass 通常比在列表中添加和删除样式类更容易。您可以考虑以下修改：

    PseudoClass ownCell = PseudoClass.getPseudoClass("own-cell");
    table.setRowFactory(param -> new TableRow<Person>() {
        protected void updateItem(Person item, boolean empty) {
            super.updateItem(item, empty);
            pseudoClassStateChanged(ownCell, item != null && item.getLName().equals("Smith"));
        };
    });

您使用 CSS 的对象

.table-row-cell:filled:own-cell .table-cell {
    -fx-text-fill: cyan;
}