JavaFX - 自定义 ListView 外观

Question

我使用列表视图作为排行榜并显示球员姓名和总分，这是由字符串完成的。但我想自定义列表视图，使其也包含位置和平均分。我在下面提供了我想要的草图。

现在，我正在向 Observable 列表添加一个纯字符串并在列表视图中查看它，但无法自定义它。我不确定如何实际做到这一点，最好的方法是什么？使用 css 还是 javafx？我确实有一些关于列表视图的问题，例如是否可以有一个静态标题，比如一个 tableview？

更新

我尝试创建一个自定义 HBox 单元并尝试使用它，但似乎我做错了什么。我尝试使用网格窗格来调整文本位置。但是 Listview 看起来像这样。

我在其中添加了两名球员（Jonny 得到 59 分，Mike 得到 15 分）

我已经看到人们使用 listcell (Link) 而不是 Hbox 的示例，但我选择这种方式的原因是因为我想在按 totalScore 对 playerStats 数组进行排序后传递 playerName、totalScore 和 average。因此列表视图可以按总分的升序显示玩家。如果有更好的方法，请分享。

控制器类

全局字段：

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