a bug with toggleClass
stars-one opened this issue · comments
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
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)
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)
}
}
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.