带有自定义 CellFactory 的 ListView 修剪不可见节点

Question

我的布局问题

我对@9​​87654325@ 有一点问题，我不确定是因为我缺少一些知识还是我的方法有缺陷。不得不承认，在许多可能的情况下，我还不清楚 JavaFX 如何处理布局。

上面的屏幕截图显示了我使用完全相同的代码两次得到的结果，除了 在第二个上一个不可见的形状我用于连贯布局对调试可见.

CellFactory 所涉及的各种类扩展了Group，我尝试了其他一些Parent，到目前为止没有太大的成功。

---

如何重现

我没有分享我的StarShape、StarRow 和其他一些杂项课程（如果有要求，我很乐意）我写了一个重现该问题的示例。该类扩展 Application 并覆盖 start(...) 方法，如下所示：

@Override
public void start(Stage primaryStage) throws Exception {
    final StackPane root = new StackPane();
    final Scene scene = new Scene(root, 400, 600);

    final ListView<Boolean> listView = new ListView<>();
    listView.setCellFactory(this::cellFactory);

    for (int i = 0; i < 5 ; i++) {
        listView.getItems().add(true);
        listView.getItems().add(false);
    }

    root.getChildren().add(listView);

    primaryStage.setScene(scene);
    primaryStage.setTitle("ListView trims the invisible");
    primaryStage.show();
}

this::cellFactory 在哪里

private ListCell<Boolean> cellFactory(ListView<Boolean> listView) {
    return new ListCell<Boolean>() {
        @Override
        protected void updateItem(Boolean item, boolean empty) {
            super.updateItem(item, empty);

            if (empty || item == null) {
                setText(null);
            } else {
                final Rectangle tabShape = new Rectangle();
                tabShape.setHeight(20);
                tabShape.setWidth(40);
                tabShape.setVisible(item);

                final Label label = new Label(item.toString());
                label.setLayoutX(40);

                final Group cellRoot = new Group();
                cellRoot.getChildren().add(tabShape);
                cellRoot.getChildren().add(label);

                setGraphic(cellRoot);
            }
        }
    };
}

上面将在true 项目前面显示一个带有黑色形状的ListView<Boolean>（因为tabShape.setVisible(item); 位）。 false 项目看起来像普通的 Label 对象，好像它们的 Group 中的不可见形状不存在（但确实存在）。

---

关闭 cmets

对此进行调试，结果发现具有不可见形状的组被赋予负的 layoutX 属性值。因此Label 控件没有像我希望的那样对齐。当我在 ListView 之外调用 setLayoutX 和 setLayoutY 时不会发生这种情况（不可见的形状会强制偏移），但它可能不是唯一会发生这种情况的地方。

发生了什么以及如何避免它？或者，我猜我正在接近这个错误，正确的方法是什么？换句话说，我应该问什么问题而不是这个？

Answer 1

取自@dlatikay's comment，您可以将它们的不透明度设置为0.0，而不是将占位符项目设置为不可见，而使其透明。

从您的问题应用于 MCVE，这将通过替换来完成：

tabShape.setVisible(item);

与：

tabShape.setOpacity(item ? 1.0 : 0.0);

在用户体验方面，您可以更进一步。您可以将它们设置为接近透明，而不是将“非活动”星星设置为完全透明，就像在这个模型中一样（不透明度设置为0.1）：

我看到的好处是：

1. 它不仅表示列表中某个项目的评分，还表示最高评分。
2. 它避免了零星列表项的尴尬空白。

Answer 2

我猜我走错了

不，你不是。与所有布局一样，通常有多种方法可以解决相同的问题。您的方法实际上是正确的，并且您非常接近可行的解决方案。

您只需更改 1 行即可实现您的目标。即，将Group 更改为HBox。

HBox 确保元素水平排列，一个接一个。它们还允许不可见的元素仍然占用空间。

我还注释掉了一行：label.setLayoutX(40)。我这样做是因为HBox 不会尊重这个设置，实际上你不需要它。它会根据需要自动水平移动元素。

@Override
protected void updateItem(Boolean item, boolean empty) {
    super.updateItem(item, empty);

    if (empty || item == null) {
        setText(null);
    }
    else {
        final Rectangle tabShape = new Rectangle();
        tabShape.setHeight(20);
        tabShape.setWidth(40);
        tabShape.setVisible(item);

        final Label label = new Label(item.toString());
        //label.setLayoutX(40);

        final HBox cellRoot = new HBox();
        cellRoot.getChildren().add(tabShape);
        cellRoot.getChildren().add(label);

        setGraphic(cellRoot);
    }
}

当我进行这些更改时，您的布局将呈现如下：

---

重要提示：您的示例和屏幕截图略有不同。您可能希望使用VBox 作为星形示例（V 表示“垂直”，H 表示“水平”）。