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，这与我的屏幕截图明显一致。

谢谢您的帮助 ！

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;
}

或者为每个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在其实现中做了很多工作。

Answer 2

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

无论我多么努力，我都无法摆脱它，即使填充0px 。 在我的情况下，每个其他单元格仍然可以看到红色背景。

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

因此，唯一有效的方法是使用负填充来移除任何间距 | 填充 | 单元格之间的边距。

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