ユーザーが設定と呼ばれるビューでアプリの背景テーマ(ライト/ダーク)を変更できるように、アプリに機能を追加しようとしています。スタイルシートクラスの2つの異なるスタイルシートを使用してテーマを変更する場合、実行中にアプリが使用するスタイルシートを変更するにはどうすればよいですか?これを行う簡単な方法はありますか?
これらの設定のコードは以下にあります。コードの改善も役立ちます:
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()
}
}
}
}
}
回答 1 件
関連記事
- 実行中にsigactionフラグを変更する方法はありますか?
- woocommerceの価格スタイルを変更する方法、ただし現在の製品の単一の製品ページのみ
- Vuetify:カードの読み込みスタイルを変更しますか?
- パンダのcsv列の値を変更するスタイルpython
- PrimeNG:単一コンポーネントのp-tableのpTemplate =" caption"のスタイルを変更する方法
- JavaScriptでsetIntervalを使用してHTMLリストアイテムのスタイルを変更するにはどうすればよいですか?
- バイトと文字列間の変換中にバイトデータが変更されるのはなぜですか?
- JavaScriptを使用して内の要素のスタイルを変更するにはどうすればよいですか?
- すべての要素が長方形になるようにggplotの凡例のスタイルを変更するにはどうすればよいですか?
- Vueのv-for内の値に応じてスタイルを変更するための計算されたプロパティまたはその他の方法
これは、監視可能なプロパティに依存している場合、はるかにスムーズに実行できます。現在のテーマを保持するプロパティを作成し、古いプロパティを削除して、このプロパティが変更されたときに新しいテーマを追加します。
トグルグループの組み込み機能を使用して、アクティブなテーマプロパティにバインドできます。
これを示す完全なアプリケーションを次に示します。