Javafx ListView selection bar text color when usin

2019-04-01 17:32发布

Is there any way to change the selection bar text color in a list view? Preferably using CSS. In a TableView, you can use:

-fx-selection-bar-text: white;

But this does not work for a ListView.

UPDATE: The above case happens when using CellFactories to render the cells.

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

In the Cell Factory class, I'd gladly cover the case when the row is selected.

But: It is called just once at the beginning, not every time the selection bar is moved, and therefore the isSelected() method always renders false.

UPDATE 2: This is the RoomCell implementation:

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

            }
        }
    }

1条回答
在下西门庆
2楼-- · 2019-04-01 18:16

-fx-selection-bar-text is a color palette (not css property) defined in a root default CSS selector, which is selector of the Scene. I don't know how are you using it but if you define it (globally since it is scene's selector) like:

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

in your CSS file then all controls' css properties using -fx-selection-bar-text will be red. ListView will be affected as well (see commented out original usages below).
However if you want to customize the ListView's style only, override the default properties this way
(Note: only -fx-text-fill are overriden. Original values are commented out, where -fx-selection-bar-text is used):

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

These CSS properties and more are avaliable in built-in caspian.css.


UPDATE: I strongly advice you to read the Cell API. From there

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

Be warned about the different String items may use the same cell, ending with misleading visual effects/renderings, like isSelected() in your code. Additionally in API it says

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.

So I refactored your code as follows.

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

All -fx-text-fill styles of the cell's text will change according to definitions in CSS file.

Now here is a trade-off between cell's text dropshadow effect and its fill colors from CSS file:
-- if you want to use dropshadow effect, you should go like current way, namely creating label, setting its text, give dorpshadow effect to the label and setGraphic(label). However this time you will not prefer to set the text (setText(item)) of the cell thus text color styles in CSS file will have no effect.
-- On other hand, if you prefer the code that I have refactored, then you should to disable -fx-background-color of the cell (which extends Labeled) by setting it to transparent or null and set the -fx-effect to dropshadow in CSS file to be able to apply dropshadow effect to the text directly. Clearing the background of the cell is not the preferred way either IMO. An explanation by the code:

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");

Test them to see the difference. That's all.

查看更多
登录 后发表回答