自定义Treecell：箭头图标的放置

Question

我尝试使用CellFactory和Css制作自定义的TreeView。

这是我到目前为止所做的：

我想让箭头居中，使其指向TreeCell的中间位置。

问题是，我不知道如何。我尝试过填充，但这只会缩放图标。

值得一提的是，箭头不是我加载的HBox的一部分，用于表示treeCell。

这是我的CSS：

.tree-cell{
-fx-content-display: CENTER;
-fx-position-shape: true;
-fx-background-color: linear-gradient(#c9e9d1 20%, #9dbda5 80%);
}
.tree-cell .tree-disclosure-node .arrow {
    -fx-background-color: #facf46;
    -fx-padding: 0.666666em; /* 4 */
    -fx-shape: "M 0 -4 L 4 0 L 0 4 z";
    -fx-content-display: center;
}

.tree-cell:expanded .tree-disclosure-node .arrow {
    -fx-content-display: center;
    -fx-background-color: #facf46,


    -fx-rotate: 90;
}

.tree-cell:hover {
    -fx-background-color: #dfffe7;
}

.tree-cell:selected{
    -fx-background-color: #4f88da;
}

在这两个链接中，有关于我如何用HBox表示TreCells的代码：

Customizing TreeCells using cell factory JavaFX TreeView: setGraphic() for different levels of treeItem

Answer 1

我发现的解决方案需要知道hbox的高度。我们假设我们将其pref高度设置为80px。

首先，在start()方法上显示场景后，我们查找带有箭头的节点，即StackPane，并设置其属性：

public void start(Stage primaryStage) {
    ...
    primaryStage.show();

    StackPane sp=(StackPane)tree.lookup(".tree-disclosure-node");
    sp.setPrefSize(80,80);
    sp.setAlignment(Pos.CENTER);
    sp.setPadding(new Insets(20));
}

这还不够，因为在自定义单元格的updateItem()方法中，添加hbox后，单元格还包含一个StackPane，每次调用此方法时都会覆盖它，所以我们需要获取此堆栈窗格并再次设置相同的属性：

@Override
public void updateItem(String item, boolean empty) {
    super.updateItem(item, empty);
    if (item != null) {
        if (getTreeView().getTreeItemLevel(getTreeItem())==1) {
            setGraphic(this.hBox);
        }else if (getTreeView().getTreeItemLevel(getTreeItem())==2){
            setGraphic(this.hBoxLeaf);
        }
        // look for the StackPane
        this.getChildrenUnmodifiable().stream().filter(StackPane.class::isInstance)
                .forEach(p->{
                    StackPane sp=(StackPane)p;
                    sp.setPrefSize(80,80);
                    sp.setAlignment(Pos.CENTER);
                    sp.setPadding(new Insets(20));
                });
    } else {
        setGraphic(null);
    }
}

我们不需要任何额外的css属性，所以这就足够了：

.tree-cell{
    -fx-background-color: linear-gradient(#c9e9d1 20%, #9dbda5 80%);
}

.tree-cell .tree-disclosure-node .arrow {
    -fx-background-color: #facf46;
    -fx-shape: "M 0 -4 L 4 0 L 0 4 z";
}

.tree-cell:expanded .tree-disclosure-node .arrow {
    -fx-rotate: 90;
}
.tree-cell:hover {
    -fx-background-color: #dfffe7;
}
.tree-cell:selected{
    -fx-background-color: #4f88da;
}

最后，我们得到这样的结果：