css - 如何在 ScalaFX 中使用 CSS 设置自定义 TreeCell 的样式？

Question

我想使用 CSS 更改自定义 TreeCell 的背景颜色，但在树单元格上设置样式属性不起作用。我可以使用如下所示的 CSS 文件为树设置黄色和灰色交替单元格的样式:

.tree-cell:disabled {
    -fx-padding: 3 3 3 3;
    -fx-background-color: white;
}

.tree-cell:selected {
    -fx-background-color: blue;
}

.tree-cell:even {
    -fx-background-color: yellow;
}

.tree-cell:odd {
    -fx-background-color: grey;
}

.tree-cell:drag-over {
    -fx-background-color: plum;
}

并使用如下所示的事件处理程序更改文本的填充样式:

  onDragEntered = (event: DragEvent) => {
    val db = event.getDragboard
    if (db.hasContent(customFormat)) {
      textFill = Color.DEEPSKYBLUE

      style() = "tree-cell:drag-over"
    }

    event.consume()
  }

但树单元格的样式没有改变。

Answer 1

我最终找到了自己问题的答案。 CSS 文件现在看起来像这样:

.tree-cell:disabled {
    -fx-padding: 3 3 3 3;
    -fx-background-color: white;
}

.tree-cell:selected {
    -fx-background-color: blue;
}

.tree-cell:filled:even {
    -fx-background-color: lightyellow;
}

.tree-cell:filled:odd {
    -fx-background-color: lightsteelblue;
}

.tree-cell.drag-over:filled {
    -fx-background-color: plum;
}

我现在在填充的单元格上拖动时会得到紫红色。空单元格保持白色。为了做到这一点，我需要了解“CSS 特异性”的规则，尽管最终有可能简化完成的 CSS 文件，使每种情况都与一个选择器完全匹配。

ScalaFX 代码现在看起来像这样:

import scala.collection.JavaConversions._

// Copy the list, so that it isn't modified in place.
var oldStyleClass: util.Collection[String] = styleClass.toList

onDragEntered = (event: DragEvent) => {
  val db = event.getDragboard
  if (db.hasContent(customFormat)) {
    textFill = Color.DEEPSKYBLUE

    // Remember the original style by taking a copy.
    oldStyleClass = styleClass.toList

    // Restyle filled cells with .tree-cell.dragover:filled
    // for the duration of the drag
    styleClass.add("drag-over")
  }

  event.consume()
}

onDragExited = (event: DragEvent) => {
  val db = event.getDragboard
  if (db.hasContent(customFormat)) {
    textFill = Color.BLACK
  }

  // Restore the original style.
  styleClass.setAll(oldStyleClass)

  event.consume()
}

在途中的某个地方，我因掉落失败而丢失了动画。否则我很高兴(但在 ScalaFX 领域有点孤独。)