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

【问题标题】：JavaFX ListView - remove spacing / padding / margin between cellsJavaFX ListView - 删除单元格之间的间距/填充/边距
【发布时间】：2019-01-31 22:10:25
【问题描述】：

由于我对特定的ListView 有自定义单元格，我很难理解如何删除每个单元格之间的“自然”类型的边距/间距，甚至更糟糕的是，在所述单元格的右侧和左侧。

这是一个例子：

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

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

你可以清楚地看到，细胞周围都有这些空白。

仅供参考，这里我使用的是 JavaFX 8 / 2.2 SDK，但我打算使用 JFoenix JFXListView 和 JFXListCell。但是，使用这些间距会更糟。

奇怪的一点：我也把ListView涂成绿色，但是这种颜色是没有的。被看到。我猜所有的单元格（和空的单元格）都会覆盖ListView 内容，所以不看它的背景是有意义的。但是，这意味着单元格会以某种方式“损坏”，因为在我的单元格周围“添加”了空格。

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

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

感谢您的帮助！

【问题讨论】：

标签： java css listview javafx javafx-2

【解决方案1】：

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

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

这是ListCells 的填充的来源。要删除此填充，只需添加您自己的样式表，其中包含：

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

或为您的每个ListCells 致电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 在其实现中做了很多。

【讨论】：

我想知道 JavaFx 的 Skins 故事是什么我知道这与问题无关
先生，谢谢您。我已经在我的自定义ListCell 的构造函数中添加了setStyle("-fx-padding: 0px;");，并使用普通的ListView 就可以了。下一个：JFXListView 和 JFXListCell。它不起作用。因为正如您所说，onUpdateitem 做了很多事情。其中，如果项目不是Node，则调用setText(item.toString()) 的明显错误。在我的graphic 之后显示实例和类名。此外，它还覆盖了样式。所以我必须在超级方法和setText(null) 之后调用setStyle("-fx-padding: 0px;");。我会标记你的答案;-)
@AhmedEmad 阅读基本教程 - 参见 f.i. javafx 标签的信息标签:)
我使用 javafx 已经有一段时间了，只是我不是 CSS 的忠实粉丝，尽管我可以制作自定义 CSS 文件并将它们分配给我想要的任何组件，但后来我想选择某个类，例如（滚动条箭头和拇指），我一直在到处搜索，直到找到一些东西，而不是在文档中
@AhmedEmad 你见过JavaFX CSS Reference Guide吗？它提供了有关如何设置标准布局/控件/图表样式的不错的文档。这包括设置滚动条组件的样式。

【解决方案2】：

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

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

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

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

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

【讨论】：