JavaFX - 自定義ListView外觀

Question

我使用listview作爲排行榜，並顯示由字符串完成的球員名稱和總得分。但我想自定義列表視圖，因此它包含位置和平均分數。我已經在下面提供了一個關於我希望如何的草圖。

現在，我增加了普通字符串可觀察名單，觀察它的列表視圖，但有麻煩，定製它。我不知道如何去做，最好的方法是什麼？使用CSS或javafx？我確實有一些關於listview的問題，例如是否可以使用靜態頭文件（如tableview）？

UPDATE

我試圖創建一個自定義HBox中的細胞，並用它嘗試過，但似乎我做錯了什麼。我嘗試使用一個gridpane來調整文本位置。但是Listview看起來像這樣。

我已經添加了兩個球員在這個（強尼59分，邁克15分）

我所看到的例子使用listcell元素裏面(Link)代替HBOX但我之所以選擇這個人方式，是因爲我想通過totalScore將我的playerStats數組排序後的playerName，totalScore &平均值。所以listview可以按他們的totalscore的升序顯示玩家。如果有更好的方法，請分享。

控制器類

全局字段：

ListView<CustomCellHBox> leaderBoard = new ListView<CustomCellHBox>(); 
ObservableList<CustomCellHBox> rank = FXCollections.observableArrayList(); 

UpdateListView（）方法：

public void updateListView() { 
     rank.clear(); 

     List<CustomCellHBox> data = new ArrayList<CustomCellHBox>(); 

     for(Statistics s : playerStats){ 
      data.add(new CustomCellHBox(s.getPlayer(),s.getTotalScore(),s.getAverage())); 
     } 

     rank = FXCollections.observableArrayList(data); 
     leaderBoard.setItems(rank); 
} 

CustomCellHBox類

public class CustomCellHBox extends HBox { 


    private Label playerName = new Label(); 
    private Label totalScore = new Label(); 
    private Label averageScore = new Label(); 
    private GridPane grid = new GridPane(); 

    CustomCellHBox(String playerName, int totalScore, double averageScore) { 
     super(); 

     this.playerName.setText(playerName); 
     this.totalScore.setText(String.valueOf(totalScore)); 
     this.averageScore.setText(String.valueOf(averageScore)); 

     grid.setHgap(10); 
     grid.setVgap(4); 
     this.playerName.setMaxWidth(Double.MAX_VALUE); 
     this.averageScore.setMaxWidth(Double.MAX_VALUE); 
     this.totalScore.setMaxWidth(Double.MAX_VALUE); 


     grid.add(this.playerName,0,0); 
     grid.add(this.totalScore,0,1); 
     grid.add(this.averageScore,0,2); 
     this.setHgrow(grid,Priority.ALWAYS); 

     this.getChildren().addAll(grid); 
    } 


} 

當我使用時，listcell工作正常。但它不是我想要的。

grid.add(this.playerName,0,0); 
     grid.add(this.totalScore,1,0); 
     grid.add(this.averageScore,2,0); 

結果：

Answer 1

也許controlsFX的SpreadSheetView是做到這一點的好辦法：http://fxexperience.com/controlsfx/features/#spreadsheetview