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

【问题标题】：Highlight top of a JavaFX TableRow with css使用 css 突出显示 JavaFX TableRow 的顶部
【发布时间】：2019-03-04 22:18:00
【问题描述】：

我正在尝试找出用于突出显示 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;
}

【问题讨论】：

标签： css javafx-8

【解决方案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;
}

【讨论】：