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

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 时,文本变为黑色

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

谢谢

回答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 的查找颜色的 value 的函数。行和单元格的背景颜色是根据 -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 (基本上,查找的颜色是继承的),并且显示箭头自动具有与文本相同的颜色。

相似文章

javafx - JavaFX 中重置场景图的问题

我遇到了快速变化的大型场景图的问题。在响应事件时,当我清除场景图(getChildren().clear)时,有时会出现以下异常:Exceptioninthread"JavaFXApplication...

最新文章