java - 如何为 TreeCell child 设计样式？

Question

首先，一些上下文:我的 JavaFX 应用程序中有一个 TreeView，带有自定义的 TreeCell 实现。此实现添加了一个 HBox 以在右侧显示标签(使用 LabeledText)和一个(或多个)图标/状态指示器。
标签和图标也附有工具提示。使用 Scenic View 检查时，结果是这样的:



正如您在上图中所看到的，一个单元格包含一个带有标签 (LabeledText)、间隔区域的 HBox，在本例中还有一个图标(使用一种字体，因此是 Glyph+LabeledText)。可以使用字体或在某些时候使用图像添加更多图标。

根据所表示的元素的状态，我想为标签设置不同的样式(例如，不同的文本颜色、斜体等)。生成的 TreeView 目前看起来像这样:



实际问题 :我尝试了我的方法的几种变体，但逻辑解决方案无法正常工作，即使它看起来应该如此。我错过了什么吗？我是否发现了 JavaFX CSS 处理中的错误？

我有一个目前有效的解决方法(但如果我向 TreeView 添加某些功能可能会停止这样做)，所以我仍然想知道为什么这不能按预期工作。

基本方法

根据显示的元素及其状态，将相关的 CSS 类应用到 TreeCell。使用 CSS 选择器，设置内部标签的样式。例如:

.mystatus > HBox > .text {
    -fx-font-style: italic;
}

/* the following variants give mostly the same result */
.mystatus > HBox > LabeledText {
    -fx-font-style: italic;
}
.mystatus .text { /* only difference: this messes up my icons */
    -fx-font-style: italic;
}

我遇到的问题是，一旦用户开始在 UI 中操作 TreeView，TreeCell 子项的 CSS 选择似乎无法可靠地工作。 CSS 应用于与给定 CSS 规则不匹配的节点。例如，在展开/折叠某些元素后，标签 不匹配 CSS 选择器无论如何都会变成斜体。

因此，如果您查看上图并假设我的元素显示正确。折叠/重新打开 Item 1-node 可能会导致，比如 Item 3 突然变成斜体，即使没有这样的 CSS 被添加到该节点。

我使用 Scenic View 验证了应用的类，以确保我正确设置/清除类:CustomTreeCellImpl 中有 LabeledText 节点而没有 mystatus仍然被斜体显示的类。

备选方案 1:使用伪类而不是常规类

与上述基本方法相同的问题

示例 CSS:

*.tree-cell:mystatus > HBox > .text {
    -fx-font-style: italic;
}

备选方案 2:将类或伪类直接应用于 LabeledText 而不是 TreeCell

与上述基本方法相同的问题

示例 CSS:

.text:mystatus {
    -fx-font-style: italic;
}

方案三:通过代码直接对创建的标签应用CSS属性

同样，这遇到了与之前相同的问题:在操作树之后，样式会应用到不该应用的地方。

这是填充/更新 TreeCell 的方法的相关部分:

// add label
LabeledText text = new LabeledText(this);
text.setText("Item 1");
if(someCondition) {
    text.setStyle("-fx-font-style: italic;");
}
hbox.getChildren().add(text);

LabeledText 对象的文本永远不会改变:总是会创建一个新的。即使那样，我也会得到不正确的结果。

这让我觉得特别奇怪，因为这不再与 CSS 选择器有关 - 样式直接应用于节点，但问题仍然存在。

解决方法

对于那些对我如何设法解决这个问题感兴趣的人 - 现在:将类或伪类应用于整个 TreeCell，并为我不希望样式化以恢复默认布局的子元素添加异常/覆盖。

这主要有效，但如果/当我向单元格添加更多元素时可能会变得很麻烦。此外，我推测这仅有效，因为这里所有的子元素(除了标签)都应用了完全相同的样式，而不管它们显示的元素的状态(例如，所有 Glyphs 都是黑色的普通字体等)。

如果/当我想自定义这些样式时(例如，根据上下文更改 Glyph 颜色，而不仅仅是使用不同的 Glyph 字符)，我推测我可能会再次遇到这个问题 - 这次我不知道如何解决它解决方法将不再适用。

更新:我放了一个 project on GitHub这说明了这个问题。

元素中的演示数据应该将元素1.1和1.3放在斜体中，其他所有显示正常。展开/折叠元素 1 时，无论如何都不应将其斜体显示的元素(在 Windows 上)。

此外，在创建这个示例时，我注意到在 OS X 上没有任何元素被斜体化(CSS 本身被正确加载，我临时添加到测试的不同样式确实被应用了)。在 Windows 上，会发生上述问题。

Answer 1

错误是使用了 com.sun.javafx.scene.control.skin.LabeledText用于显示您的元素文本。

如果你使用正常的javafx.scene.control.Label.Label或 javafx.scene.text.Text相反，在您的示例中一切正常。
LabeledText内部使用 StyleablePropertyMirror将自身作为监听器附加到 TreeItem 的各种属性上并将这些样式更改应用于自身( LabeledText )。

说明:TreeView基本上只是一个定制的ListView带有一些缩进。请注意，两者都尽可能地依赖于回收电池的概念。

如果我们在崩溃之前查看您的结构:

(1) 第 1 项

(2) 元素 1.1(突出显示)

(3) 条目 1.2

(4) 元素 1.3(突出显示)

(5) 条目 1.4

(6) 第 2 项

折叠后:

(1) 第 1 项

(2) 第 2 项(突出显示)

现在您应该不会感到惊讶 Item 2现在具有与 Item 1.1 相同的突出显示之前有，因为它基本上是相同的单元格(在相同的索引位置)，现在显示不同的元素。