从 tornadofx 中的标签中删除背景图像

Question

我在绑定到 SimpleBooleanProperty 的 tornadofx 标签上有两个 css classes。一种有背景图片和蓝色边框，一种没有背景图片和黄色边框。

来自包含标签的视图的代码段：

val switch: SimpleBooleanProperty = SimpleBooleanProperty(false)

label("my label"){
   toggleClass(UIAppStyle.style1, switch.not())
   toggleClass(UIAppStyle.style2, switch)
}

来自 UIAppStyle 的片段：

s(style1){
   textFill = Color.YELLOW
   maxWidth = infinity
   maxHeight = infinity
   alignment = Pos.CENTER

   backgroundImage += this::class.java.classLoader.getResource("img.png")!!.toURI()
   backgroundPosition += BackgroundPosition.CENTER
   backgroundRepeat += Pair(BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT)
   borderColor += box(Color.BLUE)
}
s(style2){
   textFill = Color.YELLOW
   maxWidth = infinity
   maxHeight = infinity
   alignment = Pos.CENTER
   borderColor += box(Color.YELLOW)
}

当switch = false时，有背景图片和蓝色边框。当switch = true时，有相同的背景图片和黄色边框。我不知道如何删除背景图像。有趣的是，如果我向 style2 添加不同的背景图片，它会正确更改。

编辑： 删除两个 toggleClasses 并引入新的奇怪问题：

class MyView : View(){
...
init{
   ...
   row{
      repeat(myviewmodel.numSwitches){
         val switch = myviewmodel.switches[it]
         val notSwitch = switch.not()
         label("my label"){
            addClass(UIAppStyle.style2)
            toggleClass(UIAppStyle.style1, notSwitch)
         }
      }
   }
}

此代码片段对我不起作用。但是，如果我将 private var throwsArray = mutableListOf<ObservableValue<Boolean>>() 添加为 MyView 的字段并将 notSwitch 添加到数组中，则完全相同的代码可以工作。这几乎就像 notSwitch 超出范围并变得无效，除非我将它添加到 class?

中的本地数组

Answer 1

我不明白你为什么要为同一个控件设置两个不同的toggleClass。正如您所指出的，您的问题是当设置了 backgroundImage 时，您需要设置一个新的才能更改它。但在你的情况下，你只需要先添加没有 backgroundImage 的样式，然后他们将 toggleClass 设置为带有 backgroundImage 的样式。像这样：

label("my label"){
    addClass(UIAppStyle.style2)
    toggleClass(UIAppStyle.style1, switch)
}

button {
    action {
        switch.value = !switch.value;
    }
}

编辑： 这说明了我在评论中所说的内容：

class Example : View("Example") {
    override val root = vbox {
        val switch = SimpleBooleanProperty(false)
        val notSwitch = switch.not()

        label("my label"){
            addClass(UIAppStyle.style2)
            toggleClass(UIAppStyle.style1, notSwitch)
        }

        button("One") {
            action {
                switch.value = !switch.value;
            }
        }

        button("Two") {
            action {
                notSwitch.get()
            }
        }
    }
}

您可以将 notSwitch.get() 放在任何操作中，无需触发该操作即可完成工作。检查我是如何把它放在按钮二的动作中的，但即使不点击那个按钮一次，它也能工作。

这实际上是某种 hack，以实现您想要的。但是我不明白为什么我的初始解决方案 true 作为属性的默认值不工作的原因。

Answer 2

编辑为状态反转

这是使用您的样式的工作开关 class 的简单示例：

class TestView : View() {
    override val root = vbox {
        val status = SimpleBooleanProperty(false)

        label("This is a label") {
            addClass(UIAppStyle.base_cell)
            val notStatus = SimpleBooleanProperty(!status.value)
            status.onChange { notStatus.value = !it } // More consistent than a not() binding for some reason
            toggleClass(UIAppStyle.smiling_cell, notStatus)
        }
        button("Toggle").action { status.value = !status.value }
    }

    init {
        importStylesheet<UIAppStyle>()
    }
}

如您所见，基础 class 添加为默认设置，而图像样式在切换 class 中（无 not() 绑定）。就像其他评论中提到的那样，toggleClass 很挑剔，本质上是可加的，失败时很安静，所以有时会让人感到困惑。

仅供参考，我只是通过你的 github code 得到了这个，我可以自信地说 not() 绑定是你 在 toggleClass 行为方面的问题。其他导致错误的一切都与代码的其他问题有关。欢迎在评论中提问或 post 另一个问题。

从 tornadofx 中的标签中删除背景图像

Removing background image from label in tornadofx

css

javafx

kotlin

tornadofx