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方法，并且当单元格未标记为 empty 时，我将图形设置为前面提到的AnchorPane，否则我将其设置为null，这显然与我的屏幕截图一致。

感谢您的帮助！

Answer 1

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

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

这是ListCell的填充来源。要删除此填充，只需添加自己的样式表即可，其中包括：

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

或为每个setStyle致电ListCell：

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

第二个选项最好通过使用自定义cell factory来完成。

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在实现过程中做了很多 。

Answer 2

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

无论我多么努力，即使使用填充0px，我也无法摆脱它。在我的情况下，其他所有单元格仍然可见红色背景。

我想这是一个舍入错误...

因此，唯一可行的方法是使用负填充删除任何间距|填充|细胞之间的边缘。

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