Динамическое изменение ширины ListCell ListView в JavaFX

Question

Это интерфейс приложения чата с помощью javaFX. Окно чата представляет собой компонент ListView, и я использую CSS для его полировки немного. Вот CSS и скриншот:

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

Проблема заключается в том, что я хочу изменить ширину каждого listCell в зависимости от длины текста. Я попытался установить minWidthprefWidth (например, 50px) в файле CSS или используя listView.setCellFactory, но ничего не происходит. Длина не меняется вообще. Интересно, могу ли я изменить длину каждой ячейки в спискеView так или нет (или для этого я должен использовать что-то вроде HBox/VBox/seperator ...)

Answer 1

Используйте фабрику ячеек, которая устанавливает графику до Label и стиль этикетки. Например:

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

и изменить таблицу стилей:

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

Возможно, вам на самом деле стиль списка ячейки (а также этикетку внутри него), чтобы получить точный стиль, который вы хотите, но это должно начните.

Вот более полный CSS файл, который использует -fx-background так, что цвет текста будет автоматически регулировать, управляет цветом выбора, а также добавляет некоторые стили к самой ячейке списка:

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