[英]TreeView expanding/collapsing strange behaviour
我對TreeView<Playlist>
建模,使得具有子節點的節點具有圖形形式的文件夾圖標,而其他節點具有播放列表圖標。 樣式幾乎有效,但是在展開/折疊節點時,圖形圖標會損壞。
單擊節點時,它始終顯示正確的樣式,但在展開/折疊或添加新節點時, 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;
}
我在這里缺少什么?
我使用 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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.