JavaFX Custom ListView erstellt ghost Element

ffghts

Mitglied
Hallo,

ich habe mir ein custom ListView erstellt, um Gruppen in meinem Programm anzuzeigen.
Es funktioniert auch ganz gut, nur wird immer ein weiteres Zellen Element erstellt, dass zwar nicht den Namen, die Beschreibung, oder das Bild hat, aber beim drauf klicken das selbe macht. 😕

Hier ist meine ListCell Klasse.
Java:
public class GroupListCell extends ListCell<Group> {

    @FXML
    private Label lblName;

    @FXML
    private Label lblGameName;

    @FXML
    private GridPane gridPane;

    private FXMLLoader mLoader;


    @Override
    protected void updateItem(Group item, boolean empty) {
        super.updateItem(item, empty);

        if (empty || item == null) {

            setText(null);
            setGraphic(null);

        } else {

            if (mLoader == null) {
                mLoader = new FXMLLoader(getClass().getResource("/FXML/ListCell.fxml"));
                mLoader.setController(this);

                try {
                    mLoader.load();

                } catch (Exception ex) {
                    ex.printStackTrace();
                }
            }
            try {

                lblName.setText(item.getName());
                lblGameName.setText(item.getGameName());

                if (item.getGames().equals(Group.GAMES.OTHER)) {
                    gridPane.setStyle(  "-fx-background-image: url('BildURL');" +
                                        "-fx-background-size: stretch;");
                }
            }   catch(Exception ex){
                ex.printStackTrace();
            }

            setText(null);
            setGraphic(gridPane);
        }
    }
}



Auf dem Bild sind zwei Zellen zu sehen, die obere, mit einem Bild und die darunter ohne irgendwas. Aber die soll eigentlich gar nicht da sein. Oder ist es normal, dass sich ein ListView mit leeren Zellen auffüllt?

Grüße
 
Hm... Ich muss es mal versuchen nachzuvollziehen, aber ich glaube, dass liegt mitunter am CSS. Und es sieht ja so aus, als ob du da auch schon heftig eingegriffen hättest.

Zusätzlich würde ich der Zelle noch anweisen, den Text komplett zu ignorieren/nicht zu rendern: #setContentDisplay(ContentDisplay#GRAPHIC_ONLY)
Das wird aber keinen Einfluss darauf haben.

Mein CSS sieht folgendermassen (hässlich) aus:
CSS:
/*
* ListView and other components
*/

.scroll-pane,
.split-pane,
.list-view,
.tree-view,
.table-view,
.tree-table-view,
.html-editor {
    -fx-background-color: -neutral-white;
    -fx-background-insets: 0, 1;
    -fx-padding: 1;
}
.scroll-pane:focused,
.split-pane:focused,
.list-view:focused,
.tree-view:focused,
.table-view:focused,
.tree-table-view:focused,
.html-editor:contains-focus {
    -fx-background-color: -neutral-white;
    /*-fx-background-insets: -1.4, -0.3, 1;
    -fx-background-radius: 2, 0, 0;*/
}
/* ones with grey -fx-background not lighter -fx-control-inner-background */
.scroll-pane,
.split-pane {
    -fx-background-color: -neutral-white;
}
.scroll-pane:focused,
.split-pane:focused {
    -fx-background-color: -neutral-white;
}
/* standard cell */
.list-cell,
.tree-cell {
    -fx-background: -fx-control-inner-background;
    -fx-background-color: -neutral-white;
    -fx-text-fill: -fx-text-background-color;
}
/* Selected rows */
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected {
    -fx-background: -brand-secondary; /*-fx-selection-bar;*/
    -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}
/* Selected when control is not focused */
.list-cell:filled:selected,
.tree-cell:filled:selected,
.table-row-cell:filled:selected,
.tree-table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected,
.tree-table-row-cell:filled > .tree-table-cell:selected {
    -fx-background: -brand-secondary; /*-fx-selection-bar-non-focused;*/
    -fx-background-color: -brand-secondary;
    -fx-table-cell-border-color: derive(-brand-secondary, 20%);/*derive(-fx-selection-bar-non-focused, 20%);*/
}
/* focused cell (keyboard navigation) */
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused,
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:focused,
.table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:focused,
.tree-table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:focused,
.table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused,
.tree-table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused {
    -fx-background-color: -brand-secondary; /*-fx-background, -fx-cell-focus-inner-border, -fx-background;*/
    /*-fx-background-insets: 0, 1, 2;*/
}

.list-view.bordered {
    -fx-border-color: -neutral-light-gray-1;
}

/* ListView and ListCell */
.list-cell {
    /*-fx-padding: 0.25em 0.583em 0.25em 0.583em;*/ /* 3 7 3 7 */
}
.list-cell:odd {
    /*-fx-background: -fx-control-inner-background-alt;*/
    -fx-background: -neutral-white;
}

.list-cell:selected {
    -fx-background-color: -brand-secondary;
}

/* other overrides of a separate CSS in a sub-project */

.list-view,
.list-view:focused {
    -fx-background-insets: 0;
    -fx-padding: 0;
    -fx-background-color: -neutral-light-gray-1;
}
.list-view .virtual-flow,
.list-view .clipped-container,
.list-view .sheet,
.list-view Group {
    -fx-background-color: transparent;
}
.list-view .list-cell.hover-pane:hover {
    -fx-background-color: -brand-tertiary;
}
.list-view .list-cell.background {
    -fx-background-color: transparent;
}
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused {
    -fx-background-color: -neutral-light-gray-1;
}

.list-view .corner {
    -fx-background-color: transparent;
}

/* list-cell override */
.list-cell,
.list-cell:odd,
.list-cell:selected,
.list-cell:filled:selected {
    -fx-background-color: -neutral-light-gray-1;
}
 
Hey,

erstmal vielen dank für deine Antwort.

An CSS habe ich gar nicht gedacht. 🙄
Manchmal sieht man den Wald vor lauter Bäumen einfach nicht.
Ich habe jetzt einfach die leeren Zellen der Hintergrundfarbe angepasst.

CSS:
.list-view .list-cell:empty {
    -fx-background-color: #333333;
}

Ich danke dir auf jeden Fall für deinen Denkanstoß.
Und ich muss sagen, gegen mein CSS, sieht deins noch echt gut aus. 😀

Grüße
 

Zurück
Oben