qtQuickDark_Mode_And_Light_Mode_In_Application_0">qt-Quick笔记之Dark Mode And Light Mode In Application

code review!

本例修改自视频教程：Qt QML | 🌙 Dark Mode And ☀️ Light Mode In Application
链接：https://www.youtube.com/watch?v=O-UoB62uxlA

1.运行

2.目录结构

.
├── main.cpp
├── main.qml
├── main.qrc
└── test3.pro1 directory, 4 files

3.main.qml

import QtQuick
import QtQuick.Controls
import QtQuick.LayoutsWindow {id: mainWindowwidth: 640height: 480title: "DarkMode And LightMode"color: appTheme.backgroundColorvisible: trueQtObject {id: appThemeproperty color backgroundColor: "#FFFFFF"property color textcolor: "#2f3640"property color buttontextcolor: "#FFFFFF"property color buttonbackgroundcolor: "#2f3640"function setLightTheme() {backgroundColor = "#FFFFFF"textcolor = "#2f3640"buttontextcolor = "#FFFFFF"buttonbackgroundcolor = "#2f3640"}function setDarkTheme() {backgroundColor = "#2f3640"textcolor = "#FFFFFF"buttontextcolor = "#2f3640"buttonbackgroundcolor = "#FFFFFF"}}ColumnLayout {anchors.centerIn: parentText {Layout.preferredWidth: 200Layout.preferredHeight: 100Layout.alignment: Qt.AlignHCenterid: myTexttext: qsTr("Qt With Ketan")color: appTheme.textcolorfont.pointSize: 20}Button {Layout.preferredWidth: 200Layout.preferredHeight: 100Layout.alignment: Qt.AlignHCenterid: myButtonText {text: "Qt With Ketan"color: appTheme.buttontextcoloranchors.fill: parenthorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}background: Rectangle {color: appTheme.buttonbackgroundcolorradius: 20}}}Switch {id: themeSwitchtext: "Light Mode"anchors.top: parent.topanchors.horizontalCenter: parent.horizontalCenterchecked: falsecontentItem: Text {text: themeSwitch.checked ? "Dark Mode" : "Light Mode"color: appTheme.textcolorverticalAlignment: Text.AlignVCenterleftPadding: themeSwitch.indicator.width + themeSwitch.spacingfont.pointSize: 15}onCheckedChanged: {if (checked) {appTheme.setDarkTheme()} else {appTheme.setLightTheme()}}}Component.onCompleted: appTheme.setLightTheme()
}

4.main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>int main(int argc, char *argv[])
{QGuiApplication app(argc, argv);QQmlApplicationEngine engine;engine.load(QUrl(QStringLiteral("qrc:/main.qml")));return app.exec();
}

5.main.pro

QT += quickSOURCES += \main.cppresources.files = main.qml 
resources.prefix = /$${TARGET}
RESOURCES += main.qrc# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

6.main.qrc

<RCC><qresource prefix="/"><file>main.qml</file></qresource>
</RCC>