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 (基本上,查找的颜色是继承的),并且显示箭头自动具有与文本相同的颜色。