JavaFX TreeItem/TreeView折叠节点时UI异常求助

问题描述 #

使用JavaFX的TreeItem/TreeView组件时，折叠已展开的节点后，窗口底部会出现多余的文件夹（子文件夹）UI元素。

复现步骤 #

• 运行提供的代码
• 若根节点未展开则将其展开
• 折叠根节点
• 窗口底部出现多余的文件夹UI

问题原因 #

TreeCell采用复用机制，节点折叠后，原显示子节点的TreeCell会被回收复用。但原代码的updateItem方法仅处理了!isEmpty()的情况，未在单元格为空时清除之前的内容（文本、图形、事件监听器），导致残留的UI元素被保留并显示在TreeView底部。

解决方案 #

在updateItem方法中必须处理空状态：当isEmpty()为true时，清空文本、设置图形为null，并移除鼠标点击事件，确保单元格完全重置。

修改后的完整代码 #

import java.io.File;
import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.Arrays;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TreeCell;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.util.Callback;

public class Main extends Application {

    Pane box;
    TreeView<String> treeView;

    @Override
    public void start(Stage stage) {

        TreeItem<String> root = new TreeItem<>("Root");
        traverse("你的文件夹路径", root);
        root.setExpanded(true);

        treeView = new TreeView<>(root);
        treeView.setShowRoot(true);
        treeView.setEditable(true);
        treeView.setPrefSize(500, 800);

        treeView.setCellFactory(new Callback<TreeView<String>, TreeCell<String>>() {
            @Override
            public TreeCell<String> call(TreeView<String> paramP) {
                return new TreeCell<String>() {
                    // 提取事件监听器，方便统一管理
                    private EventHandler<MouseEvent> clickHandler = event -> {
                        System.out.println(getItem());
                        System.out.println(treeView.getChildrenUnmodifiable().size());
                    };

                    @Override
                    protected void updateItem(String paramT, boolean paramBoolean) {
                        super.updateItem(paramT, paramBoolean);
                        if (!isEmpty()) {
                            setGraphic(new Label(paramT, importImage("你的图片路径")));
                            setOnMouseClicked(clickHandler);
                        } else {
                            // 清空单元格所有内容，避免残留
                            setText(null);
                            setGraphic(null);
                            setOnMouseClicked(null);
                        }
                    }
                };
            }
        });

        box = new Pane();
        box.getChildren().add(treeView);
        box.setPrefSize(500, 800);

        Scene scene = new Scene(box, 500, 800);

        stage.setTitle("Tree View Sample");
        stage.setScene(scene);
        stage.show();
    }

    public void traverse(String path, TreeItem<String> root) {
        File file = new File(path);

        if (!file.isDirectory() || !Files.isReadable(Paths.get(path)))
            return;
        Arrays.asList(file.listFiles()).forEach(e -> {
            TreeItem<String> temp = new TreeItem<>(e.getName());
            root.getChildren().add(temp);
            traverse(e.getPath(), temp);
        });

    }

    public static ImageView importImage(String path) {
        ImageView image = new ImageView(new Image(path));
        image.setPreserveRatio(true);
        image.setFitHeight(20);

        return image;
    }

    public static void main(String[] args) {
        launch(args);
    }

}

关键修改点 #

1. 新增else分支处理空单元格：
   • setText(null)：清空单元格文本
   • setGraphic(null)：清除之前设置的Label与图标
   • setOnMouseClicked(null)：移除事件监听器，避免内存泄漏
2. 将鼠标点击事件提取为成员变量，避免每次创建新的匿名内部类，提升性能并简化管理

内容的提问来源于stack exchange，提问作者M. Fahim