css - 使用 CellFactory 时的 Javafx ListView 选择栏文本颜色

Question

有没有办法改变 ListView 中选择栏文本的颜色？最好使用 CSS。在 TableView 中，您可以使用:

-fx-selection-bar-text: white;

但这不适用于 ListView。

更新:上述情况发生在使用 CellFactories 渲染单元格时。

lvRooms.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
        @Override public ListCell<String> call(ListView<String> list) {
            return new RoomCell();
        }
    });

在 Cell Factory 类(class)中，我很乐意介绍选中该行的情况。

但是:它只在开始时调用一次，而不是每次移动选择栏时调用，因此 isSelected() 方法总是呈现 false。

更新 2:这是 RoomCell 实现:

class RoomCell extends ListCell<String> {
        @Override
        public void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);

            if (item != null) {
                Log.debug("RoomCell called, item: "+item);
                final Label lbl = new Label(item); // The room name will be displayed here
                lbl.setFont(Font.font("Segoe UI", FontWeight.BOLD, 18));
                lbl.setStyle("-fx-text-fill: black");

                //lbl.setTextFill(isSelected()?Color.WHITE: Color.BLACK);
                if (isSelected())  // This is always false :(
                   lbl.setStyle("-fx-text-fill: yellow");

                if (Rooms.getBoolean(item, "OwnerStatus")) {
                    lbl.setEffect(new DropShadow(15, Color.BLUEVIOLET));
                    lbl.setGraphic(new ImageView(
                                    new Image(getClass().getResourceAsStream("images/universal.png"))));
                } else  {
                    lbl.setGraphic(new ImageView(
                                    new Image(getClass().getResourceAsStream("images/yin-yang.png"))));
                    lbl.setEffect(new DropShadow(15, Color.WHITE));
                } 
                setGraphic(lbl); 

            }
        }
    }

Answer 1

-fx-selection-bar-text 是在根默认 CSS 选择器中定义的调色板(不是 css 属性)，它是 Scene 的选择器。我不知道你是如何使用它的，但如果你定义它(全局因为它是场景的选择器)，比如:

.root{
    -fx-selection-bar-text: red;
}

在您的 CSS 文件中，所有使用 -fx-selection-bar-text 的控件的 css 属性都将变为红色。 ListView 也会受到影响(请参阅下面注释掉的原始用法)。
但是，如果您只想自定义 ListView 的样式，请以这种方式覆盖默认属性
(注意:只有 -fx-text-fill 被覆盖。原始值被注释掉，其中使用了 -fx-selection-bar-text):

/* When the list-cell is selected and focused */
.list-view:focused .list-cell:filled:focused:selected {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    -fx-background: -fx-accent;
    /* -fx-text-fill: -fx-selection-bar-text;  */
    -fx-text-fill: red;
}

/* When the list-cell is selected and selected-hovered but not focused. 
    Applied when the multiple items are selected but not focused */
.list-view:focused .list-cell:filled:selected, .list-view:focused .list-cell:filled:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    /* -fx-text-fill: -fx-selection-bar-text;  */
    -fx-text-fill: green;
}

/* When the list-cell is selected, focused and mouse hovered */
.list-view:focused .list-cell:filled:focused:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    /* -fx-text-fill: -fx-selection-bar-text;  */
    -fx-text-fill: yellow;
}

这些 CSS 属性以及更多内容在内置的 caspian.css 中可用。

---

更新:我强烈建议您阅读 Cell API .从那里

... We represent extremely large data sets using only very few Cells. Each Cell is "recycled", or reused.

请注意不同的字符串项可能使用相同的单元格，以误导性的视觉效果/渲染结束，例如代码中的 isSelected()。另外在 API 中它说

Because by far the most common use case for cells is to show text to a user, this use case is specially optimized for within Cell. This is done by Cell extending from Labeled. This means that subclasses of Cell need only set the text property, rather than create a separate Label and set that within the Cell.

所以我重构了你的代码如下。

class RoomCell extends ListCell<String> {
    @Override
    public void updateItem(String item, boolean empty) {
        super.updateItem(item, empty);

        if (item != null) {
            Log.debug("RoomCell called, item: "+item);
            setFont(Font.font("Segoe UI", FontWeight.BOLD, 18));
            ImageView iView = new ImageView();
            if (Rooms.getBoolean(item, "OwnerStatus")) {
                iView.setEffect(new DropShadow(15, Color.BLUEVIOLET));
                iView.setImage(new Image(getClass().getResourceAsStream("images/universal.png")));
            } else  {
                iView.setEffect(new DropShadow(15, Color.WHITE));
                iView.setImage(new Image(getClass().getResourceAsStream("images/yin-yang.png")));
            } 
            setGraphic(iView);  // The image will be displayed here
            setText(item); // The room name will be displayed here
        }
    }
}

单元格文本的所有 -fx-text-fill 样式将根据 CSS 文件中的定义进行更改。

现在这里是单元格的文本阴影效果和 CSS 文件中的填充颜色之间的权衡:
-- 如果你想使用阴影效果，你应该像现在的方式一样，即创建标签，设置它的文本，给标签添加阴影效果和setGraphic(label)。但是这次您不希望设置单元格的文本 (setText(item))，因此 CSS 文件中的文本颜色样式将不起作用。
-- 另一方面，如果您更喜欢我重构的代码，那么您应该通过将其设置为 transparent 或 null 并在 CSS 文件中将 -fx-effect 设置为 dropshadow 以便能够直接对文本应用阴影效果.清除单元格的背景不是 IMO 的首选方法。代码解释:

Label lbl = new Label("This text will have a dropshadow on itself directly");
lbl.setEffect(new DropShadow(15, Color.BLUE));

Label another_lbl = new Label("This text will have a dropshadow applied on the background bounds, not to text");
another_lbl.setEffect(new DropShadow(15, Color.BLUE));
another_lbl.setStyle("-fx-background-color:gray");

测试它们以了解差异。就这样。