JavaFX8 treeTableView自定义折叠根项

Question

如何自定义树根项目的折叠外观？通过自定义，我的意思是设置一个图像并将该小三角形(/新图像)置于其单元格内。

提前致谢。

Answer 1

以下示例根据根是否展开来自定义根节点的图形(通过在 View 的图像和树项的展开属性之间使用图形 ImageView 上的绑定(bind))。

该示例还通过调整箭头的填充设置，将小三角形(显示箭头)相对于图形图像垂直居中 - 您将需要根据 View 适当调整填充，因为居中不是自动的。

如果您想将公开箭头的形状更改为不同的形状，请参阅 Uluk 的回答:JavaFX: Use custom Node as collapse / expand branch switch for TreeView .

CustomTree.java

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.stage.Stage;

public class CustomTree extends Application {

    @SuppressWarnings("unchecked")
    @Override
    public void start(Stage stage) throws Exception {
        Image expandedImage  = new Image(
                "http://icons.iconarchive.com/icons/pelfusion/christmas-shadow-2/64/Tree-icon.png"
        );
        Image collapsedImage = new Image(
                "http://icons.iconarchive.com/icons/pelfusion/christmas-shadow/64/Tree-icon.png"
        );

        ImageView rootGraphic = new ImageView(expandedImage);

        TreeItem<String> root = new TreeItem<>("Root Node");
        root.setGraphic(rootGraphic);
        root.getChildren().setAll(
                new TreeItem<>("Item 1"),
                new TreeItem<>("Item 2"),
                new TreeItem<>("Item 3")
        );

        rootGraphic.imageProperty().bind(Bindings
                .when(root.expandedProperty())
                    .then(expandedImage)
                    .otherwise(collapsedImage)
        );
        root.setExpanded(true);

        TreeView<String> treeView = new TreeView<>(root);
        treeView.setPrefSize(300, 200);

        Scene scene = new Scene(treeView);
        scene.getStylesheets().add(
                getClass().getResource(
                        "custom-tree.css"
                ).toExternalForm()
        );
        stage.setScene(scene);
        stage.show();
    }

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

自定义树.css

.root {
    -fx-font-size: 30px;
}

.tree-cell > .tree-disclosure-node {
  -fx-padding: 24 6 24 8;
}