未聚焦的选定行的 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;
}

即使我点击 table

以外的行，所选行的文本也是白色的

对于 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;
}

所选行的文本为白色，但当我点击 table 之外的文本时，文本变为黑色

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

谢谢

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 的“查找颜色”。这被设置为一个“阶梯”，它是一个基于另一种 looked-up 颜色 -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（基本上，looked-up 颜色是继承的），并且显示箭头自动具有与文本相同的颜色。

未聚焦的选定行的 JavaFX TreeTableView Css

JavaFX TreeTableView Css for unfocused selected line

css

javafx

treetableview