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

Question

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

.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 而不是样式 class，因为这样您就不需要确保不会多次添加 class。

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

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

Highlight top of a JavaFX TableRow with css

css

javafx-8