JavaFx 中的 TableView 选择是否有 z-index

Question

如何为 TableView 中的选择设置 z-index。有些行是条件格式的，格式覆盖了选择。 Screenshot of what I mean。看看最后一行！

这是我的 RowFactory：

public void createRowFactory(){
    final String CSS_OUTOFSTOCK = "outofstock";

    mainTableView.setRowFactory(row -> {
        return new TableRow<Artikel>(){
            @Override
            protected void updateItem(Artikel article, boolean empty){
                super.updateItem(article, empty);
                getStyleClass().removeAll(CSS_OUTOFSTOCK);
                if(article != null){
                    if(article.mengeLagerProperty().get() == 0){
                        getStyleClass().add(CSS_OUTOFSTOCK);
                    }
                }
            }
        };
    });
}

那是我的 CSS

.outofstock{
    -fx-background-color: rgba(255, 159, 160, .4);
}

Answer 1

以下是来自摩德纳的默认 CSS 如何适用于 table 行和 table 单元格：

table 行的背景颜色设置为嵌套背景，具体取决于查找到的两种颜色：

.table-row-cell {
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
}

插图设置为

.table-row-cell {
    -fx-background-insets: 0, 0 0 1 0;
}

所以这样做的效果是底部有一个使用 -fx-table-cell-border-color 的 1 像素边框，该行的其余部分用 -fx-background 着色。

-fx-background 本身定义为

.table-row-cell {
    -fx-background: -fx-control-inner-background;
}

并用

覆盖奇数行

.table-row-cell:odd {
    -fx-background: -fx-control-inner-background-alt;
}

赋予条纹效果。

单个单元格没有背景色（因此行的背景色可见），但它们在每个单元格的右侧定义了一个 1 像素的边框

.table-cell {
    -fx-background-color: null;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
}

选中该行后，查询颜色 -fx-background 会修改为采用不同的查询颜色（默认情况下基本上是亮蓝色）的值。类似地，单元格的边框颜色被修改为该颜色的较浅版本：

.table-row-cell:filled:selected {
    -fx-background: -fx-selection-bar;
    -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}

由于您只是直接更改了 table 行的背景颜色，因此您丢失了 "nested background"（即行底部的边框）。各个单元格仍绘制其边框，边框为灰白色（如果未选中该行）或蓝色（如果选中该行）。

因此，您可能希望为 CSS class 重新定义每个关键的查找颜色，以继承所有基本功能（选择、边框等）。例如：

.outofstock {
    -fx-control-inner-background: rgba(255, 159, 160, .4);
    -fx-selection-bar: rgba(255, 79, 80, .4);
}

如果需要，您也可以重新定义 -fx-table-cell-border-color，但默认值非常中性：#ececec.

Answer 2

尽管阅读了 1000 倍，但我还是不太理解接受的答案。它过于复杂，无法提供确切的 css 来让它工作。 -fx-control-inner-background 在定义自定义单元工厂时不设置单元格的背景颜色。

这是我发现的简单 css。

.table-row-cell:selected .outofstock {
  -fx-background-color: -fx-accent;
  -fx-border-color: -fx-accent;
}

-fx-accent 在 .root 中定义（签出 javafx caspian.css）。它的颜色定义了 table 行选择是什么。

JavaFx 中的 TableView 选择是否有 z-index

Is there a z-index for the TableView Selection in JavaFx

javafx

tableview

selection