JavaFX ListView - 移除单元格之间的间距/填充/边距

Question

由于我为特定的 ListView 使用了 自定义单元格，因此我很难理解如何删除每个单元格之间“自然”边距/间距以及更糟糕的是单元格的右侧和左侧的空白。

以下是示例：

]1

正如您所看到的，我使用一种颜色来突出显示每个单元格。您无法看到单元格末尾的空格（在其右侧），因为我需要滚动，但您可以相信我，白色空间在每侧都是相等的（尽管左右两边更大…），这与设计这些单元格的目的不符，因为它们的宽度应该与ListView一样大，从而无需使用水平滚动。我的问题有点违背了我的初衷...

每个单元格由一个具有图像和一个标签的 AnchorPane 组成。AnchorPane 以黄色绘制（-fx-background-color: yellow;）。

如您所见，单元格周围都有这些空白区域。

顺便提一下，我正在使用 JavaFX 8 / 2.2 SDK，但我打算使用 JFoenix 的 JFXListView 和 JFXListCell。然而，使用它们的间距更大。

奇怪的是：我还将 ListView 绘制成绿色，但是并没有看到这样的颜色。我想所有的单元格（包括空的单元格）都覆盖了 ListView 的内容，因此不看到其背景是有道理的。然而，这意味着单元格在某种程度上被“损坏”，因为我的单元格周围添加了白色空白。

我尝试将所有内容的填充设置为0，但是无效。

最后，在 onUpdateItem 方法中，我调用了 super 方法，当单元格未被标记为空时，我将图形设置为上述 AnchorPane，否则我将其设置为null，这与我的屏幕截图完全一致。

感谢您的帮助！

- Mackovich

Answer 1

如果您查看JavaFX的默认CSS样式表，modena.css，您会看到:

.list-cell {
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
}

这里是的填充来自的地方。要删除这个填充，只需添加您自己的样式表，其中包含以下内容：

.list-cell {
    -fx-padding: 0px;
}

或者为您的每个 ListCell 调用 setStyle：

setStyle("-fx-padding: 0px;");

第二个选项最好使用自定义的单元格工厂来完成。 单元格工厂。

listView.setCellFactory(v -> new ListCell<>() {

    {
        setStyle("-fx-padding: 0px");
    }

    @Override
    protected void updateItem(Object item, boolean empty) {
        super.updateItem(item, empty);
        if (empty || item == null) {
            setText(null);
            setGraphic(null);
        } else {
            // your custom display logic
        }
    }

});

此外，通过对JFoenix进行快速测试，看起来使用上述方法也适用于JFXListCell; 但需要注意覆盖updateItem，因为JFXListCell在其实现中进行了很多操作。

- Slaw

---

我想知道 JavaFx 的 Skins 故事是什么，我知道这与问题无关。 - Ahmed Emad

您先生，谢谢您的帮助。我在自定义ListCell的构造函数中添加了setStyle("-fx-padding: 0px;");，并且在使用普通的ListView时它起到了作用。接下来是JFXListView和JFXListCell。但是它没有起作用。因为正如您所说，“onUpdateitem”做了很多事情。其中一个明显的错误是，如果item不是一个Node，则会调用setText(item.toString())。这会在我的graphic右侧显示实例和类名。此外，它还覆盖了样式。因此，我必须在调用超级方法后调用setStyle("-fx-padding: 0px;");以及setText(null)。我会标记您的答案;-) - Mackovich

@AhmedEmad 阅读一份基础教程 - 可以查看 JavaFX 标签的信息选项卡 :) - kleopatra

我已经使用JavaFX工作了一段时间，但我不是CSS的忠实粉丝。虽然我可以制作自定义CSS文件并将它们分配给任何组件，但当我想选择某个类时（例如滚动条箭头和拇指），我就会四处搜寻，直到找到一些资料，但这些并没有在文档中提到。 - Ahmed Emad

@AhmedEmad 你看过JavaFX CSS参考指南吗？它提供了关于如何为标准布局/控件/图表设置样式的文档。这包括对滚动条组件进行样式设置。 - Slaw

我之前见过它，设计有点丑陋，而且我不知道如何使用一些选择器，比如说如果我们谈论滚动条组件，我无法确定如何选择拇指或者有哪些选项可供我选择。 - Ahmed Emad

Answer 2

我将单元格的红色背景设置为默认值，以确保我在单元格之间看到的伪影实际上是由.list-cell创建的。

无论我怎么努力，甚至使用 0px 的填充，仍然可以在我的情况中看到每个其他单元格的红色背景。

我想，这可能是一个舍入误差...

所以，唯一有效的方法就是使用负填充来消除单元格之间的任何间隔| 填充| 边距。

.list-cell{
    -fx-font-weight: normal;
    -fx-text-fill: white;
    -fx-padding: -1px;
    -fx-background-color: red;
}

- Eugene Kartoyev