Dynamische Änderung der ListCell-Breite von ListView in JavaFX

Question

Dies ist die Schnittstelle einer Chat-App, die javaFX verwendet. Das Chat-Fenster ist eine ListView-Komponente und ich verwende CSS, um es ein wenig zu verbessern. Hier sind die CSS und die Screenshot:

.list-cell { 
    display: inline-block; 
    -fx-min-width: 50px; 
    -fx-background-color: lightyellow; 
    -fx-background-radius: 30px; 
    -fx-border-radius: 20px; 
    -fx-border-width: 2px; 
    -fx-border-style: solid; 
    -fx-border-color: #666666; 
} 
.list-cell:empty { 
    -fx-background-color: transparent; 
    -fx-border-width: 0px; 
} 

Das Problem ist, dass ich die Breite der einzelnen listCell in Abhängigkeit von der Länge des Textes ändern möge. Ich habe versucht, minWidthprefWidth (zum Beispiel 50px) in der CSS-Datei oder listView.setCellFactory setzen, aber nichts passiert. Die Länge ändert sich überhaupt nicht. Ich frage mich, ob ich die Länge jeder Zelle in einem listView ändern kann oder nicht (oder dafür muss ich eine HBox/VBox/seperator benutzen ...)

Answer 1

Verwenden Sie eine Zellenfactory, die setzt die Grafik zu einem Label, und style das Etikett. ZB:

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.control.Label; 
import javafx.scene.control.ListCell; 
import javafx.scene.control.ListView; 
import javafx.stage.Stage; 

public class FormattedListCell extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     ListView<String> listView = new ListView<>(); 
     listView.getItems().addAll("One", "Two", "Three", "Four"); 

     listView.setCellFactory(lv -> new ListCell<String>() { 
      private final Label label = new Label(); 
      @Override 
      protected void updateItem(String item, boolean empty) { 
       super.updateItem(item, empty); 
       if (empty) { 
        setGraphic(null); 
       } else { 
        label.setText(item); 
        setGraphic(label); 
       } 
      } 
     }); 

     Scene scene = new Scene(listView, 400, 400); 
     scene.getStylesheets().add("formatted-list-cell.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

und ändern Sie das Stylesheet:

.list-cell .label { 
    display: inline-block; 
    -fx-min-width: 50px; 
    -fx-background-color: lightyellow; 
    -fx-background-radius: 30px; 
    -fx-border-radius: 20px; 
    -fx-border-width: 2px; 
    -fx-border-style: solid; 
    -fx-border-color: #666666; 
} 
.list-cell:empty .label { 
    -fx-background-color: transparent; 
    -fx-border-width: 0px; 
} 

Sie müssen möglicherweise tatsächlich die Liste Zellenformat (wie auch das Etikett im Inneren), um die genaue Art, die Sie wollen, aber dies sollte fang an.

Hier ist eine vollständige CSS-Datei, die -fx-background so verwendet, dass die Textfarbe anpassen, automatisch die Auswahlfarbe verwaltet, und fügt auch einige Arten in die Liste Zelle selbst:

.list-cell { 
    -fx-background-color: transparent ; 
    -fx-padding: 0 ; 
} 

.list-cell .label { 
    display: inline-block; 
    -fx-background: lightyellow; 
    -fx-background-color: -fx-background ; 
    -fx-background-radius: 30px; 
    -fx-border-radius: 20px; 
    -fx-border-width: 2px; 
    -fx-border-style: solid; 
    -fx-border-color: #666666; 
    -fx-padding: 12px ; 
} 
.list-cell:empty .label { 
    -fx-background-color: transparent; 
    -fx-border-width: 0px; 
} 
.list-cell:selected .label { 
    -fx-background: -fx-selection-bar ; 
}