TableView - RowFactory 不应用 CSS 样式

Question

我有一个显示 "incomes" 和 "expenses" 的表格视图。我想将收入行（即实体的值 >= 0）的背景颜色设置为与费用不同的颜色。我将样式类添加到特定行，但它们似乎没有应用样式。它有效，如果我像这样直接应用样式：行工厂中的setStyle("...");。

这是我的：

FXML:

<!-- ....... -->
                <TableView fx:id="expensesTableView" editable="true" VBox.vgrow="ALWAYS">
                    <columns>
                        <TableColumn text="Title" prefWidth="${expensesTableView.width*0.35}">
                            <cellValueFactory>
                                <PropertyValueFactory property="title" />
                            </cellValueFactory>
                        </TableColumn>
                        <TableColumn text="Category" prefWidth="${expensesTableView.width*0.25}">
                            <cellValueFactory>
                                <PropertyValueFactory property="category" />
                            </cellValueFactory>
                        </TableColumn>
                        <TableColumn text="Period" prefWidth="${expensesTableView.width*0.25}">
                            <cellValueFactory>
                                <PropertyValueFactory property="period" />
                            </cellValueFactory>
                        </TableColumn>
                        <TableColumn text="Value" prefWidth="${expensesTableView.width*0.15}">
                            <cellValueFactory>
                                <PropertyValueFactory property="value" />
                            </cellValueFactory>
                            <!--<cellFactory>
                                <HighlightIncomeCellFactory />
                            </cellFactory>-->
                        </TableColumn>
                    </columns>
                </TableView>
<!-- ....... -->

CSS:

.positive-value {
    rgb(255, 255, 255);
}

Java-Class:

    //......
            expensesTableView.setRowFactory(new Callback<TableView<Transaction>, TableRow<Transaction>>() {
                @Override
                public TableRow<Transaction> call(TableView<Transaction> tableView) {
                    return new TableRow<Transaction>() {
                        @Override
                        protected void updateItem(Transaction person, boolean empty){
                            super.updateItem(person, empty);
                            if (person == null || !person.getValue().contains("-")) {
                                getStyleClass().remove("income-row");
                                //setStyle("-fx-background-color: red;"); //This would actually work...
                            } else {
                                getStyleClass().add("income-row");
                            }
                        }
                    };
                }
            });
    //......

如有任何想法，我们将不胜感激。

这是我应用于场景的样式表的 link：https://github.com/TrudleR/ExpensesCalculator/blob/master/src/main/resources/stylesheet.css

Answer 1

你的css风格不对。它应该是这样的：

.income-row {
    -fx-background: white;
}

请注意，您还应该注意选定行的样式。否则，您无法根据背景颜色区分具有正收入的选定行和具有正收入的未选定行，例如

.table-view:row-selection .income-row:selected {
    -fx-background: gray;
}

此外，您可能不希望将空行设置为收入行的样式。此外，您需要确保不要多次添加样式 class。你可以使用

if (person == null || person.getValue().contains("-")) {
    getStyleClass().remove("income-row");
} else if (!getStyleClass().contains("income-row")) {
    getStyleClass().add("income-row");
}

相反。

编辑

在您的样式表中，您有额外的样式行规则：

.table-row-cell{
    -fx-background-color: rgb(153, 102, 51);
    -fx-background-insets: 0, 0 0 1 0;
}

.table-row-cell:odd{
    -fx-background-color: rgb(165, 114, 63);
    -fx-background-insets: 0, 0 0 1 0;
    /*-fx-padding: 0.0em; /* 0 */
}

.table-row-cell:selected {
    -fx-background-color: #005797;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
}

由于规则中的属性仅在它是具有最高优先级的最后一条规则时才使用，所以上面的样式会被规则覆盖，例如.table-row-cell:odd.

除了其他选择器之外，您还可以通过指定 income-row class 选择器来获得优先权，例如

.table-row-cell.income-row,
.table-row-cell.income-row:odd{
    -fx-background-color: rgb(255, 255, 255);
}

.table-row-cell.income-row:selected {
    -fx-background-color: rgb(200, 200, 200);
}

使用 setStyle 设置样式有效，因为内联样式始终优先于样式表规则。

TableView - RowFactory 不应用 CSS 样式

TableView - RowFactory does not apply CSS style

css

javafx

fxml

javafx-8

编辑