Question

我有一个显示“收入”和“费用”的桌面视图。我想将收入行（均值，实体的值＆gt; = 0）的背景颜色设置为与费用不同的颜色。我将styleclasses添加到特定的行，但它们似乎不适用于样式。它是有效的，如果我直接在行工厂中应用这样的样式：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

Answer 1

你的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设置样式有效，因为内联样式始终优先于样式表规则。

TableView - RowFactory不应用CSS样式

1 个答案:

修改