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

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.pro

1 directory, 4 files

3.main.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    id: mainWindow
    width: 640
    height: 480
    title: "DarkMode And LightMode"
    color: appTheme.backgroundColor
    visible: true

    QtObject {
        id: appTheme
        property 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: parent

        Text {
            Layout.preferredWidth: 200
            Layout.preferredHeight: 100
            Layout.alignment: Qt.AlignHCenter
            id: myText
            text: qsTr("Qt With Ketan")
            color: appTheme.textcolor
            font.pointSize: 20
        }

        Button {
            Layout.preferredWidth: 200
            Layout.preferredHeight: 100
            Layout.alignment: Qt.AlignHCenter
            id: myButton
            Text {
                text: "Qt With Ketan"
                color: appTheme.buttontextcolor
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
            background: Rectangle {
                color: appTheme.buttonbackgroundcolor
                radius: 20
            }
        }
    }

    Switch {
        id: themeSwitch
        text: "Light Mode"
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        checked: false

        contentItem: Text {
            text: themeSwitch.checked ? "Dark Mode" : "Light Mode"
            color: appTheme.textcolor
            verticalAlignment: Text.AlignVCenter
            leftPadding: themeSwitch.indicator.width + themeSwitch.spacing
            font.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 += quick

SOURCES += \
        main.cpp

resources.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>