1

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()
  }

ただし、ツリー セルのスタイルは変わりません。

4

1 に答える 1

0

私は最終的に自分の質問に対する答えを見つけました。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 ファイルを単純化して、各ケースが 1 つのセレクターに正確に一致するようにすることができました。

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 の世界では少し寂しいです)。

于 2013-08-13T22:45:58.347 に答える