listview - JavaFX - 自定义 ListView 外观

Question

我将 ListView 用作排行榜并显示玩家姓名和总分，这是由字符串完成的。但我想自定义 ListView ，以便它也包括位置和平均分数。我在下面提供了我想要的草图。

现在，我正在向 Observable 列表添加一个纯字符串并在 ListView 中查看它，但在自定义它时遇到了问题。我不确定该怎么做，最好的方法是什么？使用 css 或 javafx？我确实有一些关于 listview 的问题，例如是否可以有一个静态标题，如 tableview？

UPDATE

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

我在其中添加了两名球员(Jonny 59 分，Mike 15 分)

我见过人们使用 listcell (Link) 的例子而不是 Hbox 但我选择这种方式的原因是因为我想在按 totalScore 对 playerStats 数组进行排序后传递 playerName、totalScore 和平均值。所以 ListView 可以按照总分的升序显示球员。如果有更好的方法，请分享。

Controller 类

全局字段:

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