TreeViewが奇妙な動作を拡大/縮小する

Question

子を持ち、フォルダアイコンがグラフィックであり、他のノードがプレイリストアイコンを持つようにTreeView<Playlist>をモデル化しました。スタイルがほぼの場合はですが、ノードを展開/折りたたむときにグラフィックアイコンが壊れます。

ノードをクリックすると、それは常に正しいスタイルを示しているが、拡大したときに/崩壊、または新しいノードが追加されたとき、このようなTreeView行為：ここ

はの一部でありますTreeView

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

でTreeCell定義されており、これらは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; 
}