So legen Sie den Stil von Listenansichtszellen basierend auf einer Bedingung in JavaFX fest

Question

Ich versuche, den Stil einzelner Zellen in einer Listenansicht basierend auf einer Bedingung festzulegen. Die Listenansicht ist vom Typ Label und die Bedingung wird basierend auf einer anderen Klasse bestimmt, wenn Labels in die Listenansicht eingefügt werden.

Derzeit habe ich versucht, die Hintergrundfarbe jedes Etiketts in der Listenansicht einzustellen, aber es deckt nicht den gesamten Bereich ab (siehe Bild).

Ich habe auch diesen Artikel recherchiert, aber es hat meinen Fall nicht für die Hervorhebung der Listenansicht Zelle als Kennung paßt nicht in der Zeichenfolge ausgeführt.

How do I dynamically change the background of an item in a listview in JavaFX

Aktueller Code so weit:

for (Consultation c : notifications){ 
      Label l = new Label(": consult reminder - " + c.getReminderTime()); 

      if(c.getReminderRead() == 1){ //if the consultation reminder hasn't been read 
       l.setStyle("-fx-background-color: #33CEFF"); 
       counter = counter + 1; 
      } 


      notificationList.getItems().add(l); 
} 

irgendwelche Ideen?

Answer 1

Es ist im Grunde immer ein Fehler eines Knotens Unterklasse zu verwenden (wie Label) als Daten Typ für Steuerelemente wie ListView, TableView usw. (Die einzige Ausnahme, die ich denken kann, ist, wenn Sie ein Schreiben wurden GUI-Builder, wie zum Beispiel Scene Builder, wo die Daten wirklich die eigentlichen GUI-Knoten waren. Selbst dann würden Sie wahrscheinlich feststellen, dass es nicht so gut funktioniert.) GUI-Knoten-Klassen sind sehr teuer zu erstellen; Sie haben in der Regel Hunderte von Eigenschaften und viel Overhead im Zusammenhang mit Styling und CSS-Parsing, Event-Listenern usw. Vergleichen Sie das mit Ihrer tatsächlichen Datenklasse, Consultation, die wahrscheinlich ein Dutzend Eigenschaften oder weniger und keine der anderen Overhead hat. Wenn Sie eine Label oder eine andere Knotenklasse als Datentyp für Ihre ListView verwenden, erstellen Sie einen Knoten für jede Element in der Liste. Der ganze Punkt von ListView ist, dass es nur Knoten für jede sichtbare Zelle erstellt und diese Zellen wiederverwendet. Wenn Sie also eine große Liste haben, wird Ihr Ansatz wahrscheinlich zu Leistungsproblemen führen. (Der andere Punkt ist, dass man die Trennung der Ansicht verletzt (die Präsentation) aus dem Modell (die Daten).)

So sollen Sie wirklich ein ListView<Consultation> haben hier, und verwenden Sie eine Zellfabrik zu konfigurieren Sie den Text und die Art der Zellen:

ListView<Consultation> notificationList = ... ; 

notificationList.setCellFactory(lv -> new ListCell<Consultation>() { 
    @Override 
    protected void updateItem(Consultation c, boolean empty) { 
     super.updateItem(c, empty); 
     if (empty) { 
      setText(null); 
      setStyle(""); 
     } else { 
      setText(": consult reminder - " + c.getReminderTime()); 

      // Are you REALLY using an int for the reminderRead property??!? 
      // Surely this should be a boolean... 

      if (c.getReminderRead() == 1) { // I feel dirty just writing that 
       setStyle("-fx-background-color: #33CEFF"); 
      } else { 
       setStyle(""); 
      } 
     } 
    } 
}); 

notificationList.getItems().setAll(notifications); 

Es ist ein wenig besser, den Stil heraus in eine externe CSS-Datei zu berücksichtigen. Sie können eine CSS-Pseudoklasse verwenden, um die verschiedenen Arten und auszuschalten:

ListView<Consultation> notificationList = ... ; 

PseudoClass reminderRead = PseudoClass.getPseudoClass("reminder-read"); 

notificationList.setCellFactory(lv -> new ListCell<Consultation>() { 
    @Override 
    protected void updateItem(Consultation c, boolean empty) { 
     super.updateItem(c, empty); 
     if (empty) { 
      setText(null); 
     } else { 
      setText(": consult reminder - " + c.getReminderTime()); 
     } 

     // assumes Consultation.getReminderRead() returns a boolean... 
     pseudoClassStateChanged(reminderRead, c != null && c.getReminderRead()) 
    } 
}); 

notificationList.getItems().setAll(notifications); 

Jetzt in Ihrer externen CSS-Datei können Sie tun:

.list-cell:reminder-read { 
    -fx-background-color: #33CEFF ; 
}