我有一个显示“收入”和“费用”的表格视图。我想将作为收入(均值,实体的值> = 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类:

    //......
            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");
                            }
                        }
                    };
                }
            });
    //......


任何想法将不胜感激。

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

最佳答案

您的CSS样式错误。应该是这样的:

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


请注意,您还应注意对选定行进行样式设置。否则,您将无法根据背景颜色区分收入为正数的选定行和收入为正数的未选定行,例如

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


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

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类选择器来优先使用其他选择器,例如

.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设置样式是可行的,因为内联样式始终优先于样式表规则。

09-10 13:47
查看更多