如何在ScalaFX中使用CSS设置自定义TreeCell的样式?
我想使用CSS更改自定义TreeCell的背景颜色,但在树单元上设置style属性不起作用。我可以用交替的黄色和灰色单元格为树设置样式,CSS文件如下所示:如何在ScalaFX中使用CSS设置自定义TreeCell的样式?,css,scalafx,Css,Scalafx,我想使用CSS更改自定义TreeCell的背景颜色,但在树单元上设置style属性不起作用。我可以用交替的黄色和灰色单元格为树设置样式,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-back
.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()
}
.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;
}
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()
}
并使用如下所示的事件处理程序更改文本的填充样式:
.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()
}
.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;
}
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()
}
但是树细胞的样式没有改变。我最终找到了我自己问题的答案。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()
}
.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;
}
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()
}
现在,当我拖过一个充满的单元格时,我会得到一个李子色。空细胞保持白色。
为了达到这个目的,我需要理解“CSS特殊性”的规则,尽管最终有可能简化完成的CSS文件,使每个案例完全匹配一个选择器
ScalaFX代码现在如下所示:
.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()
}
.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;
}
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的土地上有点孤独。)