如何自定义树根项的折叠外观?通过自定义,我的意思是设置一个图像并将那个小三角形(/新图像)放在其单元格内。
提前致谢。
以下示例根据根节点是否展开自定义根节点的图形(通过在视图的图像和树项的展开属性之间使用图形 ImageView 的绑定)。
该示例还通过使用箭头的填充设置使小三角形(显示箭头)相对于图形图像垂直居中 - 您需要为您的视图适当调整填充,因为居中不是自动的。
如果您想将披露箭头的形状更改为不同的形状,请参阅 Uluk 的回答:JavaFX:使用自定义节点作为 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;
}
查看默认样式表 modena.css,您可以从 jre/lib/ext 中的 jfxrt.jar 文件中提取它,或者在线查找. 该图形被定义为那里的路径:
.tree-cell > .tree-disclosure-node,
.tree-table-row-cell > .tree-disclosure-node {
-fx-padding: 4 6 4 8;
-fx-background-color: transparent;
}
.tree-cell > .tree-disclosure-node > .arrow,
.tree-table-row-cell > .tree-disclosure-node > .arrow {
-fx-background-color: -fx-text-background-color;
-fx-padding: 0.333333em 0.229em 0.333333em 0.229em; /* 4 */
-fx-shape: "M 0 -3.5 L 4 0 L 0 3.5 z";
}
.tree-cell:expanded > .tree-disclosure-node > .arrow,
.tree-table-row-cell:expanded > .tree-disclosure-node > .arrow {
-fx-rotate: 90;
}
您可以在自己的 CSS 中覆盖这些规则。css 中引用的箭头是一个区域,因此您可以根据需要定义一个-fx-background-image
。