TreeView expanding/collapsing 奇怪的行为

Question

我对一个 TreeView<Playlist> 进行了建模，使得有子节点的节点有一个文件夹图标作为图形，而其他节点有一个播放列表图标。样式几乎有效，但是当 expanding/collapsing 个节点时，图形图标会损坏。

当一个节点被点击时，它总是显示正确的样式，但是当expanding/collapsing，或者当添加新的节点时，TreeView表现得像这样：

这是代码的一部分，其中定义了 TreeView

中的 TreeCell

public class PlaylistTreeView extends TreeView<Playlist> {

    public PlaylistTreeView() {
    ...

    setShowRoot(false);
    setCellFactory(treeView -> new PlaylistTreeCell());

    ...
    }

    private class PlaylistTreeCell extends TreeCell<Playlist> {

        @Override
        public void updateItem(Playlist p, boolean empty) {
            super.updateItem(p, empty);
            if(p == null || empty) {
                textProperty().unbind();
                setText("");
                setGraphic(null);
            }
            else {
                if(p.isFolder())
                    setId("playlist-folder-tree-cell");
                else
                    setId("playlist-tree-cell");
                textProperty().bind(p.nameProperty());
            }
        }
    }
}

这些是影响这些组件的唯一样式 css:

.tree-cell, .list-cell {
    -fx-background-color: rgb(243, 243, 243);
}

#playlist-tree-cell {
    -fx-graphic: url('../icons/playlist-black-icon.png');
}

#playlist-tree-cell:selected {
    -fx-graphic: url('../icons/playlist-white-icon.png');
}

#playlist-folder-tree-cell {
    -fx-graphic: url('../icons/playlist-folder-black-icon.png');    
}

#playlist-folder-tree-cell:selected {
    -fx-graphic: url('../icons/playlist-folder-white-icon.png');
}

.list-cell:selected, .tree-cell:selected {  
    -fx-background-color: black;
    -fx-text-fill: white;
}

我在这里错过了什么？

Answer 1

我用 css 伪类解决了它。

public class PlaylistTreeView extends TreeView<Playlist> {

    private PseudoClass playlist = PseudoClass.getPseudoClass("playlist");
    private PseudoClass playlistSelected = PseudoClass.getPseudoClass("playlist-selected");
    private PseudoClass folder = PseudoClass.getPseudoClass("folder");
    private PseudoClass folderSelected = PseudoClass.getPseudoClass("folder-selected");

    public PlaylistTreeView() {
        setShowRoot(false);
        setCellFactory(treeView -> new PlaylistTreeCell());
    }

    private class PlaylistTreeCell extends TreeCell<Playlist> {

        public PlaylistTreeCell() {
            super();

            ChangeListener<Boolean> isFolderListener = (obs, oldPlaylist, newPlaylist) -> {
                boolean isFolder = newPlaylist.booleanValue();
                boolean isSelected = selectedProperty().get();
                updatePseudoClassesStates(isFolder, isSelected);
            };

            ChangeListener<Boolean> isSelectedListener = (obs, oldValue, newValue) -> {
                boolean isFolder = itemProperty().getValue().isFolder();
                boolean isSelected = newValue.booleanValue();
                updatePseudoClassesStates(isFolder, isSelected);
            };

            itemProperty().addListener((obs, oldPlaylist, newPlaylist) -> {

                if(oldPlaylist != null) {
                    textProperty().unbind();
                    setText("");
                    oldPlaylist.folderProperty().removeListener(isFolderListener);
                    selectedProperty().removeListener(isSelectedListener);
                }

                if(newPlaylist != null) {
                    textProperty().bind(newPlaylist.nameProperty());
                    newPlaylist.folderProperty().addListener(isFolderListener);
                    selectedProperty().addListener(isSelectedListener);

                    updatePseudoClassesStates(newPlaylist.isFolder(), selectedProperty().get());
                }
                else {
                    pseudoClassStateChanged(folder, false);
                    pseudoClassStateChanged(folderSelected, false);
                    pseudoClassStateChanged(playlist, false);
                    pseudoClassStateChanged(playlistSelected, false);
                }
            });
        }

        private void updatePseudoClassesStates(boolean isFolder, boolean isSelected) {
            pseudoClassStateChanged(folder, isFolder && !isSelected);
            pseudoClassStateChanged(folderSelected, isFolder && isSelected);
            pseudoClassStateChanged(playlist, !isFolder && !isSelected);
            pseudoClassStateChanged(playlistSelected, !isFolder && isSelected);
        }
}

style.css 文件:

.tree-cell, .list-cell {
    -fx-background-color: rgb(243, 243, 243);
}

.tree-cell:empty {
    -fx-graphic: none;
}

.tree-cell:playlist {
    -fx-graphic: url('../playlist-black-icon.png');
}

.tree-cell:playlist-selected {
    -fx-graphic: url('../playlist-white-icon.png');
}

.tree-cell:folder {
    -fx-graphic: url('../playlist-folder-black-icon.png');
}

.tree-cell:folder-selected {
    -fx-graphic: url('../playlist-folder-white-icon.png');
}

.tree-cell:playlist-selected, .tree-cell:folder-selected {
    -fx-background-color: black;
    -fx-text-fill: white;
}

TreeView expanding/collapsing 奇怪的行为

TreeView expanding/collapsing strange behaviour

css

java

treeview

javafx

treecell