JavaFx TreeView css
JavaFx TreeView css
提问于 2015-06-06 15:03:25
我想要创造元素的外观和行为如下所示。
有一个黑暗的背景和四大元素的列表：“书目”，"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中选定项的字体？
- 如何在选定的子树上设置背景？
- 如何强制最多可扩展一个子树
- 如何将较大的大小设置为最高级别的项目？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-06 15:58:41
如何仅更改TreeView中选定项的字体？
在css文件中，只需定义.tree-cell:selected字体即可。
.tree-cell:selected {
-fx-font-weight: bold ;
}如何在选定的子树上设置背景？
这个有点棘手。您希望任何扩展节点的背景，以及父节点不是根节点的背景都是不同的(这不是您如何定义它的方式，但我认为它在逻辑上是等价的)。扩展节点已经具有CSS伪类。对于“父类不是根”，需要定义自己的伪类：
PseudoClass subElementPseudoClass = PseudoClass.getPseudoClass("sub-tree-item");现在观察单元格的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: ... ;
}如何强制最多可扩展一个子树
将以下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.如何将较大的大小设置为最高级别的项目？
.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);
}
}带样式-独特-扩展-树. with：
.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 ;
}Stack Overflow用户
发布于 2015-06-12 19:44:21
我自己琢磨着如何在单击treeview时进行扩展：
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。然后，我只有一个子级别，在那里，我设置了相同的I。如果您想要在整棵树中有相同的缩进而没有icsons，那么为所有. tree -cell设置indet为0就足够了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30684308
复制相关文章
相似问题
腾讯云开发者
