JavaFX TreeTableView Css 用于未聚焦的选定行

Question

我在 TreeTableView 上遇到 CSS 问题。

对于 TableView，当我像这样定义 CSS 时：

.table-row-cell:selected{
    -fx-background-color: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-fill: white;
}

即使我单击表格外，所选行的文本也会显示为白色

对于 TreeTableView 我定义了这样的 CSS：

.tree-table-row-cell:selected{
    -fx-background-color: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-fill: white;
}

所选行的文本为白色，但当我单击表格外时，文本变为黑色

有人知道我该如何解决这个问题吗？

谢谢

Answer 1

尝试在单元格本身而不是行单元格上设置文本填充：

.tree-table-row-cell:selected{
    -fx-background-color: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
}

.tree-table-row-cell:selected .tree-table-cell,
.tree-table-cell:selected {
    -fx-text-fill: white;
}

您可能还想要

.tree-table-row-cell:selected .tree-disclosure-node .arrow {
    -fx-background-color: white ;
}

对于稍微不同的方法：

modena 样式表的默认行为是将文本填充设置为名为 的“查找颜色” -fx-text-background-color。它被设置为一个“阶梯”，它是一个基于另一个名为 的查找颜色值的函数-fx-background。行和单元格的背景颜色是根据 定义的-fx-background。

“阶梯”的工作方式是，如果 的强度-fx-background低于 45%，则阶梯评估为-fx-light-text-color（白色），在 46% 到 59% 之间评估为-fx-dark-text-color（黑色），高于该强度评估为-fx-mid-text-color（灰色）。

因此，通常情况下，您只需更改-fx-background（而不是-fx-background-color），文本就会更改为适当的内容：

.tree-table-row-cell:selected{
    -fx-background: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
}

就您而言，这并不能完全满足您的需求。您选择的背景颜色不够深，无法触发浅色文本颜色；强度约为 58%，因此评估为黑色。

如果您使用较暗的背景，例如#d1531f，那么您会看到没有任何其他更改的白色文本。

您可以通过调整梯子本身来解决此问题，使强度阈值不同：

.tree-table-row-cell:selected{
    -fx-background: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-background-color: ladder(
        -fx-background,
        -fx-light-text-color 60%,
        -fx-dark-text-color  61%,
        -fx-dark-text-color  69%,
        -fx-mid-text-color   70%
    );
}

或者也许只是完全绕过梯子并-fx-text-background-color直接设置为浅色文本颜色：

.tree-table-row-cell:selected{
    -fx-background: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-background-color: -fx-light-text-color;
}

这（也许）更复杂，但更符合默认 CSS 的风格。它可以与单元格一起使用，而无需显式更改这些单元格的 CSS（基本上，查找的颜色是继承的），并且公开箭头自动具有与文本相同的颜色。