JavaFX ListView 没有渲染足够的单元格来填充其视口

Question

我有这个音乐播放应用程序，它以网格形式显示艺术家和专辑。我使用 ListView 和自定义 ListCells 创建了这个网格。但是，ListView 在初始化时似乎不会渲染超过 2 个单元格，即使它的高度足够大，可以根据屏幕大小渲染 3 或 4 行。但是，当前 2 个单元格中的一个悬停在上面时，ListView 会渲染剩余的单元格。请查看下面的链接以了解实际问题。

demo of the issue

我检查了 ListView 的高度，它确实在扩展以填充其父级，所以我相信 ListView 决定哪些单元格需要呈现的方式有些奇怪。我希望找到一种方法来强制 ListView 呈现正确数量的单元格，如果这是根本问题，或者如果我的代码中有错误，那么对此也有一些了解会很棒。我已经在下面发布了我的控制器和我的自定义 ListCell 的代码。

初始化 ListView 的控制器：

public class ArtistsController implements Initializable {

    @FXML
    private ListView<ArrayList<Artist>> grid;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        List<Artist> artists = Library.getArtists();
        Collections.sort(artists);

        grid.setCellFactory(x -> new ArtistListCell<>());

        ObservableList<ArrayList<Artist>> rows = FXCollections.observableArrayList();
        ArrayList<Artist> row = new ArrayList<>();
        int col;

        for (int i = 0; i < artists.size(); i++) {
            col = i % 5;
            if (col == 0) {
                row = new ArrayList<>();
                rows.add(row);
            }
            row.add(artists.get(i));
        }

        grid.setItems(rows);
    }
}

自定义列表单元：

public class ArtistListCell<T extends ArrayList<Artist>> extends ListCell<T> {

    private T item;

    public ArtistListCell() {
        this.getStyleClass().setAll("artist-list-cell");
    }

    @Override
    protected void updateItem(T item, boolean empty) {
        super.updateItem(item, empty);
        if (empty || item == null) {
            setText(null);
            setGraphic(null);
        } else if (!item.equals(this.item)) {
            this.item = item;
            HBox row = new HBox();
            item.forEach(artist -> {
                VBox cell = createCell(artist);
                row.getChildren().add(cell);
            });
            setGraphic(row);
        }
    }

    private VBox createCell(Artist artist) {

        VBox cell = new VBox();
        Label title = new Label(artist.getTitle());
        ImageView image = new ImageView(artist.getArtistImage());
        image.imageProperty().bind(artist.artistImageProperty());
        VBox imageBox = new VBox();

        title.setTextOverrun(OverrunStyle.CLIP);
        title.setWrapText(true);
        title.setPadding(new Insets(10, 0, 10, 0));
        title.setAlignment(Pos.TOP_LEFT);
        title.setPrefHeight(66);
        title.prefWidthProperty().bind(this.widthProperty().subtract(102).divide(5));

        image.fitWidthProperty().bind(this.widthProperty().subtract(102).divide(5));
        image.fitHeightProperty().bind(this.widthProperty().subtract(102).divide(5));
        image.setPreserveRatio(true);
        image.setSmooth(true);

        imageBox.prefWidthProperty().bind(this.widthProperty().subtract(102).divide(5));
        imageBox.prefHeightProperty().bind(this.widthProperty().subtract(102).divide(5));
        imageBox.setAlignment(Pos.CENTER);
        imageBox.getChildren().add(image);

        cell.getChildren().addAll(imageBox, title);
        cell.setPadding(new Insets(10, 10, 0, 10));
        cell.getStyleClass().add("artist-cell");
        cell.setAlignment(Pos.CENTER);

        cell.setOnMouseClicked(event -> {
            // do something
        });

        cell.setOnDragDetected(event -> {
            // do something
        });

        return cell;
    }
}

Answer 1

我进行了一项测试，并为艺术家使用单个静态图像体验了这个问题。如果我用一个简单的矩形替换 ListCell 中的行构建，它工作正常，所以瓶颈似乎是构建你的 HBox/VBox 单元格。

在 grid.setItems 之后移动对 setCellFactory 的调用似乎可以解决它。

grid.setItems(rows);
grid.setCellFactory(x -> new ArtistListCell<>());

我会说这样做需要另一个布局通道，而另一种方式则没有正确计算所需的所有信息？

如果需要时间，使用正确的图像加载可能会得到不同的结果。如果是这样，如果您仍在体验，也许使用占位符图像？