在JavaFX中動態更改ListView的ListView寬度

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取決於文本的長度，寬度。我試圖在CSS文件中設置minWidthprefWidth（例如50px），或者使用listView.setCellFactory但沒有任何反應。長度根本不會改變。我想知道是否我可以改變列表視圖中每個單元格的長度（或者爲了做到這一點，我必須使用像HBox/VBox /分隔符...）

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