在應用程序執行期間更改樣式表 TornadoFX

Question

我正在嘗試在我的應用程序中添加功能，以允許用戶在名為“設置”的視圖中更改應用程序的背景主題（淺色/深色）。 如果我通過使用來自樣式表類的兩個不同樣式表來更改主題，那么如何更改應用程序在執行期間使用的樣​​式表？ 有沒有更簡單的方法來做到這一點？

我的這些設置代碼可以在下面找到。 對代碼的任何改進也很有幫助：

class Settings(){
    var BackGroundTheme: BackGroundThemeState = BackGroundThemeState.Light
}
enum class BackGroundThemeState{Light, Dark}

class SettingsController: Controller(){
    private var settings = Settings()

    fun changeTheme(state: BackGroundThemeState){
        when(state){
            Light -> settings.BackGroundTheme = Light
            Dark  -> settings.BackGroundTheme = Dark
        }
        when(settings.BackGroundTheme){
//            Light -> do nothing for now
            Dark  -> importStylesheet(app.DarkThemeStyleSheet)
        }
        reloadStylesheetsOnFocus()
    }
} 

class SettingsView: View("Settings"){
    val settings: SettingsController by inject()
    private val toggleGroup = ToggleGroup()

    override val root = vbox(){
        alignment = Pos.BOTTOM_CENTER
        setPrefSize(300.0, 200.0)
        hbox(){
            alignment = Pos.BASELINE_LEFT
            vbox {
                paddingTop = 10.0
                paddingLeft = 30.0
                paddingBottom = 90.0
                label("Theme")
                radiobutton("Light", toggleGroup){
                    isSelected = true
                    action {
                      settings.changeTheme(Light)
                    }
                }
                radiobutton("Dark", toggleGroup) {
                    action {
                        settings.changeTheme(Dark)
                    }
                }
            }
        }
        hbox {
            alignment = Pos.BOTTOM_RIGHT
            paddingRight = 15.0
            paddingBottom = 10.0
            button("OK"){
                setPrefSize(70.0, 30.0)
                action{
                    find(SettingsView::class).close()
                }
            }
        }
    }
}

Answer 1

如果您依賴可觀察的屬性，這可以更順利地完成。 創建一個包含當前主題的屬性，並在此屬性更改時刪除舊主題並添加新主題。

您可以依靠切換組的內置功能綁定到活動主題屬性。

這是一個完整的應用程序，顯示了這一點：

class MyThemeApp : App(SettingsView::class) {
    val themeController: ThemeController by inject()

    override fun start(stage: Stage) {
        super.start(stage)
        // Make sure we initialize the theme selection system on start
        themeController.start()
    }
}

class ThemeController : Controller() {
    // List of available themes
    val themes = SimpleListProperty<KClass<out Stylesheet>>(listOf(LightTheme::class, DarkTheme::class).observable())

    // Property holding the active theme
    val activeThemeProperty = SimpleObjectProperty<KClass<out Stylesheet>>()
    var activeTheme by activeThemeProperty

    fun start() {
        // Remove old theme, add new theme on change
        activeThemeProperty.addListener { _, oldTheme, newTheme ->
            oldTheme?.let { removeStylesheet(it) }
            newTheme?.let { importStylesheet(it) }
        }

        // Activate the first theme, triggering the listener above
        activeTheme = themes.first()
    }
}

class SettingsView : View("Settings") {
    val settings: ThemeController by inject()

    override val root = form {
        fieldset("Theme") {
            field {
                vbox {

                    togglegroup {
                        // One radio button for each theme, with their value set as the theme
                        settings.themes.forEach { theme ->
                            radiobutton(theme.simpleName, getToggleGroup(), theme)
                        }

                        // The toggle group value is bound to the activeThemeProperty
                        bind(settings.activeThemeProperty)
                    }
                }
            }
            buttonbar {
                button("OK").action(this@SettingsView::close)
            }
        }
    }
}

// Two themes for completeness
class DarkTheme : Stylesheet() {
    init {
        root {
            backgroundColor += Color.DARKGREEN
        }
    }
}

class LightTheme : Stylesheet() {
    init {
        root {
            backgroundColor += Color.LIGHTCYAN
        }
    }
}