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