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