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

Question

因为我有 自定义单元格 用于特定 ListView，我很难理解如何删除 "natural" 类型的边距/间距每个单元格之间，更糟糕的是，在所述单元格的右侧和左侧。

这是一个例子：

]1

如您所见，我使用一种颜色来突出每个单元格。你看不到单元格末尾的 space（在它们的右侧），因为我需要滚动，但你可以相信我，白色的 space 在每一侧都是相等的（在右侧更大）左和右，虽然...) 这是不正常的，因为我专门设计了这些单元格，使它们的宽度与 ListView 一样大，因此无需使用水平滚动。我的问题有点违背我的目的...

每个单元格由一个 AnchorPane 和图像和一个标签组成。 AnchorPane 涂成黄色 (-fx-background-color: yellow;)。

你可以清楚地看到，细胞周围有这些白色的 space。

仅供参考，我在这里使用 JavaFX 8 / 2.2 SDK，但我打算使用 JFoenix JFXListView & JFXListCell。但是，使用这些间距更差。

奇怪的地方：ListView我也画了绿色，但是没有这种颜色。被看到。我想所有的单元格（和空单元格）都会覆盖 ListView 内容，所以看不到它的背景是有道理的。然而，这意味着细胞不知何故 "corrupted" 因为白色 space 是 "added" 我的细胞周围。

我曾尝试将所有内容的填充设置为 0，但徒劳无功。

最后，在 onUpdateItem 方法中，我确实调用了 super 方法 并且当单元格未标记为 empty[=49= 】，我把图形设置成前面提到的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;");

第二个选项最好使用自定义 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;
}

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

JavaFX ListView - remove spacing / padding / margin between cells

css

java

listview

javafx

javafx-2