JavaFx 树视图 css

Question

我想创建外观和行为如下所示的元素。

有一个深色背景和 4 个元素的顶部列表："biblioteki"、"Analiza" 等等。当我们点击其中一个时，列表会展开，并且这个项目和它的子项目会变成浅色和深色背景。此外，从子列表中选择的项目获得不同的字体（粗体和白色）。任何时候只能展开一项。

所以我发现这是应用了适当样式的 TreeView 行为。我用下面的代码让它工作：

    TreeView<TabMenuElement> treeView = new TreeView<>(treeRoot);
    treeView.setCellFactory(tv -> new TreeCell<TabMenuElement>() {
        @Override
        public void updateItem(TabMenuElement item, boolean empty) {
            super.updateItem(item, empty);
            setDisclosureNode(null);

            if (empty) {
                setText("");
                setGraphic(null);
            } else {
                setText(item.getName()); // appropriate text for item
                if (item.getIv() != null) {
                    setGraphic(item.getIv());
                }
            }
        }
    });
    treeView.setShowRoot(false);

TabMenuElement 有方法 getIV 来获得 ImageView （图标），如果它被定义为这个元素和 getName 来获得要显示的文本。现在看起来像这样

所以我有以下问题：

如何在 TreeView 中仅更改所选项目的字体？
如何为选定的子树设置背景？
如何强制最多展开一个子树
如何为顶级项目设置更大的尺寸？

Answer 1

how to change font only on selected item in TreeView?

在您的 css 文件中，只需为 .tree-cell:selected 定义字体：

.tree-cell:selected {
    -fx-font-weight: bold ;
}

how to setup background on selected sub-tree?

这个有点棘手。您希望任何扩展节点的背景以及父节点不是根节点的任何节点都不同（这不是您的措辞，但我认为它在逻辑上是等效的）。展开的节点已经有一个 CSS 伪类。对于"parent is not the root"，你需要定义自己的伪类：

PseudoClass subElementPseudoClass = PseudoClass.getPseudoClass("sub-tree-item");

现在观察cell的treeItem 属性，变化时更新伪类状态：

treeView.setCellFactory(tv -> {
    TreeCell<TabMenuElement> cell = new TreeCell<TabMenuElement>() {
        @Override
        public void updateItem(TabMenuElement item, boolean empty) {
            super.updateItem(item, empty);
            setDisclosureNode(null);

            if (empty) {
                setText("");
                setGraphic(null);
            } else {
                setText(item.getName()); // appropriate text for item
                if (item.getIv() != null) {
                    setGraphic(item.getIv());
                }
            }
        }
    };

    cell.treeItemProperty().addListener((obs, oldTreeItem, newTreeItem) -> {
        cell.pseudoClassStateChanged(subElementPseudoClass,
            newTreeItem != null && newTreeItem.getParent() != cell.getTreeView().getRoot());
    }

    return cell ;
});

现在您可以在 CSS 文件中执行

.tree-cell:expanded, .tree-cell:sub-tree-item {
    -fx-background-color: ... ;
}

how to force that at most one subtree could be expanded

将以下 ChangeListener 添加到 TreeItem 的每个扩展属性中：

ChangeListener<Boolean> expandedListener = (obs, wasExpanded, isNowExpanded) -> {
    if (isNowExpanded) {
        ReadOnlyProperty<?> expandedProperty = (ReadOnlyProperty<?>) obs ;
        Object itemThatWasJustExpanded = expandedProperty.getBean();
        for (TreeItem<TabMenuElement> item : treeView.getRoot().getChildren()) {
            if (item != itemThatWasJustExpanded) {
                item.setExpanded(false);
            }
        }
    }
};

TreeItem<TabMenuElement> biblioteka = new TreeItem<>(...);
biblioteka.expandedProperty().addListener(expandedListener);
TreeItem<TabMenuElement> analiza = new TreeItem<>(...);
analiza.expandedProperty().addListener(expandedListener);
// etc, for all "top-level" items.

how to set bigger size to top level items?

.tree-cell {
    -fx-padding: 0.75em 0em 0.75em 0em ;
}
.tree-cell:sub-tree-item {
    -fx-padding: 0.25em ;
}

（或更改字体大小，或类似。）

这是一个完整的例子：

import javafx.application.Application;
import javafx.beans.property.ReadOnlyProperty;
import javafx.beans.value.ChangeListener;
import javafx.css.PseudoClass;
import javafx.scene.Scene;
import javafx.scene.control.TreeCell;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class StyledUniqueExpandingTree extends Application {

    @Override
    public void start(Stage primaryStage) {
        TreeView<String> tree = new TreeView<>();
        tree.setShowRoot(false);
        TreeItem<String> root = new TreeItem<>("");
        tree.setRoot(root);

        ChangeListener<Boolean> expandedListener = (obs, wasExpanded, isNowExpanded) -> {
            if (isNowExpanded) {
                ReadOnlyProperty<?> expandedProperty = (ReadOnlyProperty<?>) obs ;
                Object itemThatWasJustExpanded = expandedProperty.getBean();
                for (TreeItem<String> item : tree.getRoot().getChildren()) {
                    if (item != itemThatWasJustExpanded) {
                        item.setExpanded(false);
                    }
                }
            }
        };

        for (int i=1; i<=4; i++) {
            TreeItem<String> item = new TreeItem<>("Top level "+i);
            item.expandedProperty().addListener(expandedListener);
            root.getChildren().add(item);
            for (int j=1; j<=4; j++) {
                TreeItem<String> subItem = new TreeItem<>("Sub item "+i+":"+j);
                item.getChildren().add(subItem);
            }
        }

        PseudoClass subElementPseudoClass = PseudoClass.getPseudoClass("sub-tree-item");

        tree.setCellFactory(tv -> {
            TreeCell<String> cell = new TreeCell<String>() {
                @Override
                public void updateItem(String item, boolean empty) {
                    super.updateItem(item, empty);
                    setDisclosureNode(null);

                    if (empty) {
                        setText("");
                        setGraphic(null);
                    } else {
                        setText(item); // appropriate text for item
                    }
                }

            };
            cell.treeItemProperty().addListener((obs, oldTreeItem, newTreeItem) -> {
                cell.pseudoClassStateChanged(subElementPseudoClass,
                        newTreeItem != null && newTreeItem.getParent() != cell.getTreeView().getRoot());
            });
            return cell ;
        });

        BorderPane uiRoot = new BorderPane(tree);
        Scene scene = new Scene(uiRoot, 250, 400);
        scene.getStylesheets().add("styled-unique-expanded-tree.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

带有样式-独特-扩展-tree.css:

.tree-view, .tree-cell {
    -fx-background-color: black ;
    -fx-text-fill: white ;
}
.tree-cell:expanded, .tree-cell:sub-tree-item {
    -fx-background-color: #404040 ;
}
.tree-cell:selected {
    -fx-font-weight: bold ;
}
.tree-cell {
    -fx-padding: 0.75em 0em 0.75em 0em ;
}
.tree-cell:sub-tree-item {
    -fx-padding: 0.25em ;
}

Answer 2

我自己想出了如何在单击树视图上展开：

    treeView.setCellFactory(tv -> new TreeCell<TabMenuElement>() {
        @Override
        public void updateItem(TabMenuElement item, boolean empty) {
            super.updateItem(item, empty);
            setDisclosureNode(null);

            if (empty) {
                setText("");
                setGraphic(null);
            } else {
                setText(item.getName()); // appropriate text for item
                setOnMouseClicked(event -> {
                    if (event.getButton() == MouseButton.PRIMARY && event.getClickCount() == 1) {
                        TreeItem<TabMenuElement> ti = treeItemProperty().get();
                        ti.expandedProperty().set(true);
                    }
                    event.consume();
                });

                if (item.getIv() != null) {
                    setGraphic(item.getIv());
                } else {

                }
            }
        }
    });

特别是 setOnMouseClicked 的部分。

在这种情况下，还可以通过设置

为所有节点设置相同的缩进

.tree-cell:sub-tree-item{
     -fx-indent: 22;
}

这是我的情况，其中顶级元素的图标宽度为 22。然后我只有一个子级别，并且我在那里设置了相同的标识。如果你想在整棵树中使用相同的缩进而不使用 icsons，那么将所有 .tree-cell 的 indet 设置为 0 就足够了。

JavaFx 树视图 css

JavaFx TreeView css

javafx

treeview