在TornadoFX中为VBox添加边框样式

时间:2018-06-06 20:25:03

标签: tornadofx

在我的TornadoFX应用程序的视图中,我有一个边框,在视图的左侧和右侧有一个VBox(中间没有任何东西)。截至目前,每个VBox都具有相同的背景颜色,因此它们有点融合在一起。我想在两个VBox之间显示某种分离(即一个VBox有一个稍暗的色调,一个边框颜色,或两者兼而有之)。有人会碰巧知道如何将边框样式添加到vbox?或者添加背景颜色?

为了澄清,我正在寻找一种方法在我的View类定义的主体内执行此操作,因此我没有使用CSS或FXML进行样式化。

1 个答案:

答案 0 :(得分:4)

执行此操作的最佳方法是创建一个类型安全样式表,您可以在其中为每个vbox定义一个类,并将这些类分配给vbox。这是一个包含样式表,应用程序定义和主视图的完整应用程序:

class MyApp : App(MainView::class, MyStyles::class)

class MyStyles : Stylesheet() {
    companion object {
        val leftBox by cssclass()
        val rightBox by cssclass()
    }

    init {
        leftBox {
            backgroundColor += c("#cecece")
            borderColor += box(c("#a1a1a1"))
            minWidth = 200.px
        }

        rightBox {
            backgroundColor += c("#fefefe")
            borderColor += box(c("#222222"))
            minWidth = 200.px
        }
    }
}

class MainView : View("My View") {
    override val root = borderpane {
        setPrefSize(800.0, 600.0)

        left {
            vbox {
                addClass(MyStyles.leftBox)
            }
        }
        right {
            vbox {
                addClass(MyStyles.rightBox)
            }
        }
    }
}

Illustration of the above code

如果您对样式表过敏,可以将这些属性设置为内联或使用内联样式表:

class MainView : View("My View") {
    override val root = borderpane {
        setPrefSize(800.0, 600.0)

        left {
            vbox {
                style {
                    backgroundColor += c("#cecece")
                    borderColor += box(c("#a1a1a1"))
                    minWidth = 200.px
                }
            }
        }
        right {
            vbox {
                style {
                    backgroundColor += c("#fefefe")
                    borderColor += box(c("#222222"))
                    minWidth = 200.px
                }
            }
        }
    }
}

最后,您可以配置节点的相应属性,而不是应用样式。我不会举一个例子,因为你真的不应该这样做:)