如何設計TreeCell兒童的風格？

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選擇器不匹配的標簽無論如何都會顯示斜體。

所以，如果你看一下上面的圖片，並認為這是我的項目的正確顯示。 折疊/重新打開項目1節點可能會導致，即使沒有將此類CSS添加到該節點，項目3突然變為斜體。

我使用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;
}

備選方案3：通過代碼直接將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，並為子元素添加異常/覆蓋，我不希望樣式恢復默認布局。

這主要起作用，但如果/當我向細胞添加更多元素時，可能會變得很麻煩。 此外，我推測這只能起作用，因為這里所有子元素（除標簽外）都應用了完全相同的樣式，無論它們顯示的項目的狀態如何（例如，所有字形都是黑色普通字體等）。

如果/當我想自定義這些樣式時（例如根據上下文更改字形顏色，而不是僅使用不同的字形字符），我推測我可能會再次遇到這個問題 - 這次不知道如何解決它作為我的問題解決方法將不再適用。

---

更新：我在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之前相同的突出顯示，因為它基本上是同一個單元格（在相同的索引位置），現在顯示不同的項目。