将样式应用于JavaFX中的TreeView子节点 [英] Apply style to TreeView children nodes in javaFX
问题描述
我使用JavaFX TreeView，我想实现一个函数，如果我在一个树项目上悬停，该项目及其所有子项将被突出显示。
我设法使用 setCellFactory 来突出显示目标项目，如下所示：
treeCell.setOnMouseEntered（new EventHandler< MouseEvent>（）{
@Override
public void handle（MouseEvent mouseEvent）{
redrawTree（）
treeCell.setStyle（ - fx- background-color：＃0093ff;）;
}
}）;
结果是：
但我不知道如何目标和应用样式到treeCell的孩子。此外，这个解决方案需要重绘树很多，这对于大树是滞后的。
任何人都可以帮助我向前或给我一个替代方案？
在外部css文件中，执行
.tree-cell：hover {
-fx-background-color：＃0093ff;
}
另外请注意， c> -fx-background 而不是 -fx-background-color ，文本颜色将适当地对背景颜色的更改做出反应。 p>
为子节点设置样式（即添加到 TreeCell 中的节点作为 graphic 属性），只需执行
.tree-cell：hover .label {
/ * styles ... * /
}
下面是一个完整的例子：
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.control.TreeCell;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Callback;
public class TreeTest extends应用程序{
@Override
public void start（Stage primaryStage）throws Exception {
final StackPane stackPane = new StackPane（）;
TreeItem< Integer> root = createTreeItem（1）;
final TreeView< Integer> tree = new TreeView<>（root）;
tree.setCellFactory（treeView - > {
final Label label = new Label（）;
final Label anotherLabel = new Label（Item：）;
label.getStyleClass （）.add（Hover）;
final HBox hbox = new HBox（5，anotherLabel，label）;
TreeCell< Integer> cell = new TreeCell< Integer>
@Override
protected void updateItem（Integer item，boolean empty）{
super.updateItem（item，empty）;
if（empty）{
setGraphic ）;
} else {
setGraphic（hbox）;
}
}
};
cell.setContentDisplay（ContentDisplay.GRAPHIC_ONLY）;
cell.itemProperty（）。addListener（（obs，oldItem，newItem） - >
label.setText（newItem！= null？String.valueOf（newItem）：））;
return cell;
}）;
stackPane.getChildren（）。add（tree）;
final Scene scene = new Scene（stackPane）;
scene.getStylesheets（）。add（getClass（）。getResource（tree-hover.css）。toExternalForm（））;
primaryStage.setScene（scene）;
primaryStage.setTitle（getClass（）。getSimpleName（））;
primaryStage.show（）;
}
private TreeItem< Integer> createTreeItem（int value）{
TreeItem< Integer> item = new TreeItem<>（value）;
if（value< 10000）{
for（int i = 0; i< 10; i ++）{
item.getChildren（）。add（createTreeItem（10 * value + ）;
}
}
return item;
}
public static void main（String [] args）{
launch（args）; tree-hover.css文件中的
}
p>
.tree-cell：hover {
-fx-background-color：＃0093ff;
}
.tree-cell：hover .highlight-on-hover {
-fx-text-fill：red;
}
I am using JavaFX TreeView and I want to implement a function where if I hover on a tree item, the item and all its children would be highlighted.
So far I managed to use setCellFactory to highlight the targeted item like this:
treeCell.setOnMouseEntered(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent mouseEvent) {
redrawTree()
treeCell.setStyle("-fx-background-color: #0093ff;");
}
});
Result being:
But I don't know how to target and apply style to treeCell's children. Also this solution requires redrawing the tree a lot which is laggy for big trees.
Can anyone help me go forward or give me an alternative? I think a css solution would be better.
In an external css file, do
.tree-cell:hover {
-fx-background-color: #0093ff ;
}
Also note that (for moderately complex reasons) if you use -fx-background instead of -fx-background-color, the text color will react appropriately to the change in background color.
To set styles for child nodes (i.e. nodes that are added to the TreeCell as part of its graphic property), just do something like
.tree-cell:hover .label {
/* styles... */
}
which would style all labels inside "hovered-over" tree cells.
Here's a complete example:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.control.TreeCell;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Callback;
public class TreeTest extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
final StackPane stackPane = new StackPane();
TreeItem<Integer> root = createTreeItem(1);
final TreeView<Integer> tree = new TreeView<>(root);
tree.setCellFactory(treeView -> {
final Label label = new Label();
final Label anotherLabel = new Label("Item:");
label.getStyleClass().add("highlight-on-hover");
final HBox hbox = new HBox(5, anotherLabel, label);
TreeCell<Integer> cell = new TreeCell<Integer>() {
@Override
protected void updateItem(Integer item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setGraphic(null);
} else {
setGraphic(hbox);
}
}
};
cell.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
cell.itemProperty().addListener((obs, oldItem, newItem) ->
label.setText(newItem != null ? String.valueOf(newItem) : ""));
return cell ;
});
stackPane.getChildren().add(tree);
final Scene scene = new Scene(stackPane);
scene.getStylesheets().add(getClass().getResource("tree-hover.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.setTitle(getClass().getSimpleName());
primaryStage.show();
}
private TreeItem<Integer> createTreeItem(int value) {
TreeItem<Integer> item = new TreeItem<>(value);
if (value < 10000) {
for (int i=0; i<10; i++) {
item.getChildren().add(createTreeItem(10*value+i));
}
}
return item ;
}
public static void main(String[] args) {
launch(args);
}
}
with the tree-hover.css file:
.tree-cell:hover {
-fx-background-color: #0093ff ;
}
.tree-cell:hover .highlight-on-hover {
-fx-text-fill: red ;
}
这篇关于将样式应用于JavaFX中的TreeView子节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
