edvin / tornadofx

Lightweight JavaFX Framework for Kotlin
Apache License 2.0
3.68k stars 271 forks source link

a bug with toggleClass #1352

Closed stars-one closed 2 years ago

stars-one commented 2 years ago

when I use the taggoleClass to change the css of the button control,I found something is confused.

It is ok when I click the run button to run my application,but it is wrong when I click the debug button to run my applicaition.

Is there a way to resole the quesition?Thanks

Following is the gif picture

run mode:

debug mode:

Here is my code. Styles

class Styles : Stylesheet() {
    companion object {
        val leftMenu by cssclass()
        val leftMenuSelect by cssclass()

    }

    init {

        leftMenu {
            prefWidth = 200.px
            startMargin = 10.px
            fontSize = 14.px
            padding = box(15.px)
            backgroundColor += c("white")

            and(hover) {
                textFill = c("#1890ff")
            }
        }

        leftMenuSelect{
            prefWidth = 200.px
            startMargin = 10.px
            fontSize = 14.px
            padding = box(15.px)

            backgroundColor +=c("#e6f7ff")
            textFill = c("#1890ff")
            borderColor += box(null,c("#1890ff"),null,null)
            borderWidth += box(0.px,2.px,0.px,0.px)
            borderStyle += BorderStrokeStyle.SOLID
        }
    }
}

MainView

class MainView : View("Hello TornadoFX") {
    val model by inject<MainViewModel>()

    override val root = vbox() {
        prefWidth = 400.0
        prefHeight = 200.0

        vbox {
            val list = listOf(LeftMenuItem("首页"), LeftMenuItem("下载列表"), LeftMenuItem("资源搜索"))
            list.forEachIndexed { index, leftMenuItem ->
                button(leftMenuItem.title) {
                    userData = System.currentTimeMillis()
                    addClass(Styles.leftMenu)
                    toggleClass(Styles.leftMenuSelect, model.selectIndex.eq(index))
                    action {
                        model.selectIndex.set(index)
                    }
                }
            }
        }

        hbox {
            text(model.selectIndex.asString())
        }

    }
}

class MainViewModel : ViewModel() {
    val selectIndex = SimpleIntegerProperty(0)
}

data class LeftMenuItem(val title: String)
stars-one commented 2 years ago

I found the ObservableValue is not be observable.what's matter with it?so confused

It is ok when I click the run button to run my application,but it is wrong when I click the debug button to run my applicaition.

In my house computer,the condition is inverse.It;s ok when I click the run button to run my app.

And then I copy the method named toggerClass rename to toggleClassX,try to use it

fun <T : Styleable> T.toggleClassX(cssClass: CssRule, observablePredicate: ObservableValue<Boolean>) {
    println(observablePredicate.value)
    toggleClass(cssClass, observablePredicate.value ?: false)
    observablePredicate.onChange {
        //this is not print??why
        println("onchange "+observablePredicate.value)
        toggleClass(cssClass, it ?: false)
    }
}
stars-one commented 2 years ago

I find the code model.selectIndex.eq(index) may cause this problem.I choose a differernt way to accoplish my option.Every item use a simple boolen properties.