从 tornadofx 中的 label 中删除背景图像

Question

我在绑定到 SimpleBooleanProperty 的 tornadofx label 上有两个 css 类。 一种有背景图像和蓝色边框，另一种没有背景图像和黄色边框。

包含 label 的视图片段：

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 添加到数组中，则相同的代码将起作用。 除非我将它添加到 class 中的本地数组中，否则就好像 notSwitch 即将退出 scope 并变得无效？

Answer 1

我不明白你为什么要为同一个控件设置两个不同的 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 代码才能做到这一点，我可以自信地说not()绑定是让您在 toggleClass 行为方面搞砸的原因。 导致错误的所有其他内容都与代码的其他问题有关。 随时在评论中提问或发布另一个问题。