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

用CSS突出显示JavaFX TableRow的顶部

1 个答案: