JavaFX ListView单元格更新异常：滚动后错误着色问题求助

哥们，这个问题我太熟了——这是JavaFX ListView的单元格复用机制导致的典型坑！

问题根源 #

ListView为了提升性能，不会给每个列表项都创建全新的Cell实例，而是会复用那些滚出可视区域的Cell。你的代码里只在c.colored为true时设置了背景色，但完全没处理不满足条件时的样式重置，所以当旧Cell被复用到一个colored为false的条目上时，之前的背景色会残留下来，就出现了滚动后多个条目被错误着色的情况。

修正后的代码 #

直接在你的代码基础上修改，补上样式重置的逻辑即可：

serialNumberList.setCellFactory(lv -> new ListCell<ListData>() { 
    @Override 
    protected void updateItem(ListData c, boolean empty) { 
        super.updateItem(c, empty); 
        if (empty || c == null) { 
            setText(null);
            // 清空空单元格的样式，避免复用残留
            setStyle("");
        } else { 
            setText(c.name); 
            // 同时处理满足和不满足条件的情况
            if (c.colored) { 
                setStyle("-fx-background-color: #33CEFF"); 
            } else {
                // 重置样式，消除复用带来的残留
                setStyle("");
            }
        }
    } 
});

更优雅的优化方案（推荐） #

如果你的样式逻辑比较复杂，或者后续可能扩展样式，推荐使用CSS伪类来管理，这样可以把样式和业务逻辑分离，维护起来更方便：

private final PseudoClass COLORED_PSEUDO_CLASS = PseudoClass.getPseudoClass("colored");

serialNumberList.setCellFactory(lv -> new ListCell<ListData>() { 
    @Override 
    protected void updateItem(ListData c, boolean empty) { 
        super.updateItem(c, empty); 
        if (empty || c == null) { 
            setText(null);
            // 移除伪类状态
            pseudoClassStateChanged(COLORED_PSEUDO_CLASS, false);
        } else { 
            setText(c.name); 
            // 根据条件切换伪类状态
            pseudoClassStateChanged(COLORED_PSEUDO_CLASS, c.colored);
        }
    } 
});

然后在你的CSS文件中定义伪类样式：

.list-cell:colored {
    -fx-background-color: #33CEFF;
}

这样不仅避免了setStyle可能带来的样式冲突，也让代码逻辑更清晰，后续修改样式直接改CSS就行，不用动Java代码。

内容的提问来源于stack exchange，提问作者Johannes Schätzl