從 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 行為方面搞砸的原因。 導致錯誤的所有其他內容都與代碼的其他問題有關。 隨時在評論中提問或發布另一個問題。