使用 css 突出显示 JavaFX TableRow 的顶部

Question

我正在尝试找出用于突出显示TableRow顶部的CSS。我正在使用它来重新排序行，以便任何重新排序它们的人都可以知道它将插入的位置。目前，我只能在行周围绘制一个矩形，但我只想要该矩形的顶线。

.table-row-cell.drag {
-fx-focus-color: #00a9d3;
-fx-faint-focus-color: #00a9d322;
-fx-highlight-fill: -fx-accent;
-fx-background-color:
-fx-focus-color,
-fx-control-inner-background,
-fx-faint-focus-color,
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: -0.2, 1, -1.4, 3;
-fx-background-radius: 3, 2, 4, 0;
}

Answer 1

您可以为边指定不同的-fx-background-insets。如果一种颜色只出现在一侧，则下一种颜色的插图与标记颜色的插图匹配，但应着色的一面除外。

此外，我建议使用PseudoClass而不是样式类，因为这样您就不需要确保不多次添加类。

final PseudoClass mark = PseudoClass.getPseudoClass("mark");
...
boolean marked = ...
row.pseudoClassStateChanged(mark, marked);

以下 CSS 有点简化，但它应该演示该方法：

.table-row-cell:mark {
-fx-background-color: -fx-table-cell-border-color, red, -fx-background;
/* show red highlight of size 2 at the top */
-fx-background-insets: 0, 0 0 1 0, 2 0 1 0;
}