src/CMakeLists.txt

+find_package(
+    Qt6
+    COMPONENTS
+        Core Widgets Quick Gui Qml Multimedia MultimediaWidgets Concurrent Network WebSockets
+        TextToSpeech Location Sensors WebView Positioning
+    REQUIRED
+)
+
+find_package(
+    QT NAMES Qt6 Qt5 REQUIRED
+    COMPONENTS
+        Core Network WebSockets TextToSpeech Location Sensors WebView Positioning)
+
+# In shared Qt builds, the qml plugins don't have dependencies on their backing libraries, and
+# thus the backing library packages are not automatically looked up.
+# The StandaloneTests directory contains Config files that find_package all installed Qt packages.
+# Abuse that, and include all of them to make all the backing libraries available as imported
+# targets.
+find_package(Qt6 COMPONENTS BuildInternals)
+if(Qt6BuildInternals_DIR)
+    set(standalone_tests_dir "${Qt6BuildInternals_DIR}/StandaloneTests")
+    if(EXISTS "${standalone_tests_dir}")
+        # Glob the config files in there.
+        file(GLOB_RECURSE standalone_tests_files "${standalone_tests_dir}/*TestsConfig.cmake")
+
+        # Include each one of them.
+        foreach(standalone_tests_file IN LISTS standalone_tests_files)
+            include("${standalone_tests_file}")
+        endforeach()
+    endif()
+endif()
+
+set(imports "")
+
+# Get all imported targets.
+get_property(imported_targets DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} PROPERTY IMPORTED_TARGETS)
+
+# Horrible hack for shared qt builds, to ensure we bundle all known shared library qml plugins.
+# Do that by finding all qml modules, their plugins, the location of the plugins, then finding the
+# path to the qmldir files of the plugins, extract the module name, and adding it as an import
+# statement into a dynamically generated qml file.
+foreach(imported_target IN LISTS imported_targets)
+    # Get all qml module targets, they would have the _qt_qml_module_installed_plugin_target
+    # property set.
+    get_target_property(qml_plugin_target "${imported_target}"
+        _qt_qml_module_installed_plugin_target)
+
+    if(qml_plugin_target)
+
+    message(STATUS
+    "Imported target: ${imported_target} -> ${qml_plugin_target}")
+
+        # Get location of the plugin file.
+        get_target_property(imported_location_default "${qml_plugin_target}" IMPORTED_LOCATION)
+        get_target_property(imported_location_release "${qml_plugin_target}" IMPORTED_LOCATION_RELEASE)
+        get_target_property(imported_location_min_size "${qml_plugin_target}" IMPORTED_LOCATION_MINSIZEREL)
+        get_target_property(imported_location_min_size_rel "${qml_plugin_target}" IMPORTED_LOCATION_RELWITHDEBINFO)
+
+        if(imported_location_default)
+            set(imported_location "${imported_location_default}")
+        elseif(imported_location_release)
+            set(imported_location "${imported_location_release}")
+        elseif(imported_location_min_size)
+            set(imported_location "${imported_location_min_size}")
+        elseif(imported_location_min_size_rel)
+            set(imported_location "${imported_location_min_size_rel}")
+        else()
+            message(WARNING "No imported location found for ${qml_plugin_target}.")
+            continue()
+        endif()
+
+        # Get parent dir of the plugin file.
+        get_filename_component(imported_location_dir "${imported_location}" DIRECTORY)
+
+        # Build path to qmldir in the same directory. We assume the qmldir is always next
+        # to the plugin file. That's at least usually the case for Qt qml plugins.
+        set(qmldir_path "${imported_location_dir}/qmldir")
+        if(NOT EXISTS "${qmldir_path}")
+            message(WARNING "No qmldir file found for ${qml_plugin_target}.")
+            continue()
+        endif()
+
+        # Read qmldir file contents.
+        file(READ "${qmldir_path}" qmldir_content)
+        if(qmldir_content STREQUAL "")
+            message(WARNING "Empty qmldir for ${qml_plugin_target}.")
+            continue()
+        endif()
+
+        # Find the module name in the qmldir file
+        string(REGEX MATCH "module ([^\n]+)" module_match "${qmldir_content}")
+        if(CMAKE_MATCH_1)
+            # Add the module name as an import to the imports list
+            list(APPEND imports "import ${CMAKE_MATCH_1}")
+        endif()
+    endif()
+endforeach()
+
+set(imports_file_path "${CMAKE_CURRENT_BINARY_DIR}/dynamic_imports.qml")
+
+# Needed to stop __qt_get_relative_resource_path_for_file from erroring out.
+set_source_files_properties("${imports_file_path}"
+    PROPERTIES QT_RESOURCE_ALIAS  "dynamic_imports.qml")
+if(imports)
+    list(REMOVE_DUPLICATES imports)
+    string(REPLACE ";" "\n" imports "${imports}")
+endif()
+
+# Use file(GENERATE) to prevent touching the file if the contents hasn't changed.
+set(dummy_valid_content "ApplicationWindow {
+    visible: true
+    width: 640
+    height: 480
+}")
+
+file(GENERATE OUTPUT "${imports_file_path}" CONTENT "${imports}
+
+${dummy_valid_content}
+")
+
+qt_add_executable(${PROJECT_NAME}
+    backend/main.cpp
+    backend/logger.h
+    backend/backend.cpp backend/backend.h
+    backend/projectmanager.cpp backend/projectmanager.h
+    backend/settings.cpp backend/settings.h
+    backend/dsconnector/ds.cpp backend/dsconnector/ds.h
+    backend/dsconnector/dsmanager.cpp backend/dsconnector/dsmanager.h
+    backend/qrscanner.cpp backend/qrscanner.h
+    ../3rdparty/zxing-cpp/example/ZXingQtReader.h
+)
+
+set_source_files_properties(Constants.qml PROPERTIES
+    QT_QML_SINGLETON_TYPE TRUE
+)
+
+qt_add_qml_module(${PROJECT_NAME}
+    URI AndroidUI
+    VERSION 1.0
+    QML_FILES
+        "${imports_file_path}"
+        Constants.qml
+        HomePage.qml
+        Main.qml
+        NavigationBar.qml
+        NavigationButton.qml
+        QrButton.qml
+        SettingsItem.qml
+        SettingsPage.qml
+        SwitchSettingsItem.qml
+)
+
+qt_target_qml_sources(${PROJECT_NAME}
+    PREFIX
+        "/"
+    RESOURCES
+        fonts/QtOneIconFont.ttf
+        images/appicon.svg
+)
+
+target_link_libraries(${PROJECT_NAME} PRIVATE
+    Qt6::Core Qt6::Widgets
+    Qt6::Quick Qt6::Gui
+    Qt6::Qml Qt6::GuiPrivate
+    Qt6::Multimedia Qt6::MultimediaWidgets
+    Qt6::Concurrent Qt6::Network Qt6::WebSockets
+    Qt6::TextToSpeech Qt6::Location Qt6::Sensors
+    Qt6::WebView Qt6::Positioning
+    ZXing::ZXing
+)
+
+qt_add_library(qtuiviewerlib OBJECT
+    EXCLUDE_FROM_ALL
+    backend/projectmanager.cpp backend/projectmanager.h
+    backend/settings.cpp backend/settings.h
+    backend/dsconnector/ds.cpp backend/dsconnector/ds.h
+    backend/dsconnector/dsmanager.cpp backend/dsconnector/dsmanager.h
+)
+
+target_link_libraries(qtuiviewerlib PRIVATE
+    Qt6::Core
+    Qt6::Quick
+    Qt6::Qml
+    Qt6::Gui
+    Qt6::GuiPrivate
+    Qt6::WebSockets
+)
+
+target_include_directories(qtuiviewerlib PUBLIC
+    ${CMAKE_CURRENT_SOURCE_DIR}
+)
+
+set_target_properties(${PROJECT_NAME} PROPERTIES QT_ANDROID_PACKAGE_NAME "io.qt.qtdesignviewer")
+set_property(TARGET ${PROJECT_NAME}
+APPEND PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR ${CMAKE_CURRENT_SOURCE_DIR}/android
+)
+set_property(TARGET ${PROJECT_NAME}
+    APPEND PROPERTY QT_ANDROID_EXTRA_LIBS
+        ${ANDROID_OPENSSL_PATH}/libcrypto_3.so
+        ${ANDROID_OPENSSL_PATH}/libssl_3.so
+)
+
+
+# CMAKE_VAR_GIT_VERSION (coming from the top-level CMakeLists.txt) and GOOGLE_PLAY_APP_VERSION replaced in the following file
+configure_file(${CMAKE_CURRENT_SOURCE_DIR}/android/AndroidManifest.xml.in ${CMAKE_CURRENT_SOURCE_DIR}/android/AndroidManifest.xml)

src/Constants.qml

+pragma Singleton
+import QtQuick
+
+QtObject {
+    id: root
+
+    property FontLoader iconFont: FontLoader {
+        source: "/fonts/QtOneIconFont.ttf"
+    }
+
+    property QtObject icons: QtObject {
+        readonly property string home: "\u0021"
+        readonly property string link: "\u0022"
+        readonly property string qrCode: "\u0023"
+        readonly property string settings: "\u0024"
+        readonly property string unlink: "\u0025"
+    }
+
+    readonly property int smTextSize: 12
+    readonly property int mdTextSize: 14
+    readonly property int lgTextSize: 20
+    readonly property int xlTextSize: 30
+
+    readonly property int iconSize: 18
+
+    readonly property color statusBarDisconnected: "#eb991f"
+    readonly property color statusBarConnected: "#23b26a"
+
+    readonly property int statusBarHeight: 24
+    readonly property int tabBarHeight: 69
+
+    readonly property bool dark: Application.styleHints.colorScheme === Qt.Dark
+
+    readonly property color boxBackgroundColor: root.dark ? "#262626" : "#f2f2f2"
+    readonly property color boxBorderColor: root.dark ? "#2e2e2e" : "#e7e7e7"
+}

src/HomePage.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Layouts
+
+Flickable {
+    id: root
+    interactive: true
+    contentHeight: mainLayout.height
+    boundsMovement: Flickable.StopAtBounds
+    boundsBehavior: Flickable.DragAndOvershootBounds
+
+    property bool landscape: root.width > root.height
+
+    Connections {
+        target: Qt.inputMethod
+
+        function onKeyboardRectangleChanged() {
+            let mapPositon = optionLayout2.mapToItem(root, ipAddress.x, ipAddress.y);
+            root.contentY = mapPositon.y;
+        }
+    }
+
+    RowLayout {
+        id: dummy
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        GridLayout {
+            id: mainLayout
+
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter
+
+            columns: root.landscape ? 2 : 1
+            rowSpacing: 20
+            columnSpacing: 20
+
+            RowLayout {
+                id: headerLayout
+
+                Layout.columnSpan: root.landscape ? 2 : 1
+                Layout.alignment: Qt.AlignLeft
+                Layout.fillWidth: true
+                Layout.topMargin: 10
+                Layout.bottomMargin: 0
+                Layout.leftMargin: 20
+                Layout.rightMargin: 20
+
+                spacing: 20
+
+                Image {
+                    id: qdsLogo
+                    source: "/images/appicon.svg"
+                    fillMode: Image.PreserveAspectFit
+                    Layout.preferredWidth: 64
+                    Layout.preferredHeight: 64
+                }
+
+                Label {
+                    id: qdvLabel
+                    text: qsTr("Qt UI Viewer")
+                    font.pixelSize: Constants.xlTextSize
+                    font.bold: true
+                }
+            }
+
+            ColumnLayout {
+                id: infoLayout
+
+                Layout.leftMargin: 20
+                Layout.rightMargin: 20
+                Layout.fillWidth: true
+                Layout.preferredWidth: 300
+                Layout.maximumWidth: 400
+                Layout.alignment: Qt.AlignTop
+
+                spacing: 10
+
+                Label {
+                    id: title
+                    Layout.fillWidth: true
+                    text: qsTr("Connect with Qt Design Studio in your local network.")
+                    font.pixelSize: Constants.lgTextSize
+                    font.bold: true
+                    wrapMode: Text.WordWrap
+                }
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    spacing: 0
+
+                    Label {
+                        Layout.fillWidth: true
+                        text: qsTr("How to:")
+                        font.pixelSize: Constants.mdTextSize
+                        font.bold: true
+                        wrapMode: Text.WordWrap
+                    }
+
+                    Repeater {
+                        model: [qsTr("Open up the Qt Design Studio, and a project"), qsTr("Click on the dropdown menu of the Play button in the header"), qsTr("Select Open Device Manager from the menu"), qsTr("In the Device Manager window click on Set Device IP and type in the IP address found from below")]
+
+                        delegate: RowLayout {
+                            Layout.fillWidth: true
+                            spacing: 6
+
+                            Label {
+                                Layout.alignment: Qt.AlignTop
+                                text: (index + 1) + "."
+                                font.pixelSize: Constants.mdTextSize
+                            }
+
+                            Label {
+                                Layout.fillWidth: true
+                                text: modelData
+                                font.pixelSize: Constants.mdTextSize
+                                wrapMode: Text.WordWrap
+                            }
+                        }
+                    }
+                }
+            }
+
+            ColumnLayout {
+                id: optionLayout
+
+                Layout.leftMargin: 20
+                Layout.rightMargin: 20
+                Layout.bottomMargin: 20
+                Layout.fillWidth: true
+                Layout.preferredWidth: 300
+                Layout.maximumWidth: 400
+                Layout.alignment: Qt.AlignTop
+
+                spacing: 10
+
+                Label {
+                    Layout.fillWidth: true
+                    text: qsTr("This device can be reached at the following IP addresses:")
+                    font.pixelSize: Constants.lgTextSize
+                    font.bold: true
+                    wrapMode: Text.WordWrap
+                }
+
+                Label {
+                    id: ipAddress
+                    Layout.fillWidth: true
+                    text: qsTr("xxx.xxx.xxx.xxx")
+                    font.pixelSize: Constants.lgTextSize
+                    font.bold: false
+                    wrapMode: Text.WordWrap
+
+                    function updateIpAddresses() {
+                        ipAddress.text = '';
+                        var val = backend.getIpAddresses();
+
+                        if(val.length === 0)
+                            ipAddress.text = qsTr("Not connected to any network.");
+
+                        for(var i = 0; i < val.length; i++)
+                            ipAddress.text += val[i].interface + ': ' + val[i].ip + '\n';
+                    }
+
+                    Timer {
+                        id: timer
+                        interval: 1000
+                        running: true
+                        repeat: true
+
+                        onTriggered: {
+                            ipAddress.updateIpAddresses();
+                        }
+                    }
+
+                    Component.onCompleted: {
+                        ipAddress.updateIpAddresses();
+                        timer.start();
+                    }
+                }
+            }
+        }
+    }
+}

src/Main.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Layouts
+
+Rectangle {
+    id: root
+
+    property bool connected: false
+    property string ip: "0.0.0.0"
+
+    width: 400
+    height: 800
+    color: Material.backgroundColor
+
+    Material.theme: Application.styleHints.colorScheme === Qt.Dark ? Material.Dark : Material.Light
+    Material.accent: Material.Blue
+    Material.primary: Material.Blue
+
+    Column {
+        id: column
+        anchors.fill: parent
+
+        Rectangle {
+            id: statusBar
+            width: column.width
+            height: Constants.statusBarHeight
+            color: root.connected ? Constants.statusBarConnected : Constants.statusBarDisconnected
+
+            Row {
+                anchors.horizontalCenter: parent.horizontalCenter
+                height: statusBar.height
+                spacing: 6
+
+                Text {
+                    height: parent.height
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+
+                    font.family: Constants.iconFont.font.family
+                    font.pixelSize: Constants.iconSize
+                    text: root.connected ? Constants.icons.link : Constants.icons.unlink
+                }
+
+                Text {
+                    id: statusText
+                    height: parent.height
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+
+                    font.pixelSize: Constants.smTextSize
+                    wrapMode: Text.WordWrap
+
+                    text: root.connected ? qsTr("Qt Design Studio is connected")
+                                         : qsTr("Qt Design Studio is disconnected.")
+                }
+            }
+
+            Connections {
+                target: backend
+                function onConnectedChanged(isConnected) {
+                    root.connected = isConnected
+                }
+            }
+        }
+
+        StackLayout {
+            id: stackLayout
+
+            width: column.width
+            height: column.height - statusBar.height - tabBar.height
+            clip: true
+
+            HomePage { id: homePage }
+            SettingsPage { id: settingsPage }
+        }
+
+        NavigationBar {
+            id: tabBar
+            width: column.width
+            height: Constants.tabBarHeight
+
+            NavigationButton {
+                id: home
+                myIcon: Constants.icons.home
+                text: qsTr("Home")
+                checked: true
+                checkable: true
+                autoExclusive: true
+                onClicked: stackLayout.currentIndex = 0
+
+                height: Constants.tabBarHeight // TODO
+            }
+
+            NavigationButton {
+                id: settings
+                myIcon: Constants.icons.settings
+                text: qsTr("Settings")
+                checkable: true
+                autoExclusive: true
+                onClicked: stackLayout.currentIndex = 1
+
+                height: Constants.tabBarHeight // TODO
+            }
+        }
+    }
+
+    Popup {
+        id: popup
+        width: 250
+        height: 75
+        modal: true
+        visible: false
+
+        anchors.centerIn: parent
+
+        Rectangle {
+            anchors.fill: parent
+            color: "white"
+
+            Text {
+                id: popupText
+                anchors.centerIn: parent
+            }
+        }
+
+        ProgressBar {
+            id: progressBar
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            from: 0
+            to: 100
+            height: 2
+            visible: true
+            indeterminate: true
+        }
+
+        Timer {
+            id: timer
+            repeat: false
+            running: popup.visible
+            onTriggered: {
+                popup.visible = false
+            }
+        }
+
+        Connections {
+            target: backend
+            function onPopupOpen() {
+                popup.visible = true
+            }
+
+            function onPopupClose() {
+                popup.visible = false
+            }
+
+            function onPopupChangeText(text, timeout) {
+                popupText.text = text
+                timer.interval = timeout
+                timer.running = timeout > 0
+            }
+
+            function onPopupChangeProgress(percentage){
+                progressBar.value = percentage
+            }
+
+            function onPopupProgressIndeterminateChanged(indeterminate) {
+                progressBar.indeterminate = indeterminate
+            }
+        }
+    }
+}

src/NavigationBar.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.TabBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 1
+
+    contentItem: ListView {
+        model: control.contentModel
+        currentIndex: control.currentIndex
+
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
+
+        highlightMoveDuration: 250
+        highlightResizeDuration: 0
+        highlightFollowsCurrentItem: true
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 48
+        preferredHighlightEnd: width - 48
+
+        highlight: Item {
+            z: 2
+            Rectangle {
+                height: 2
+                width: parent.width
+                y: control.position === T.TabBar.Footer ? 0 : parent.height - height
+                color: control.Material.accentColor
+            }
+        }
+    }
+
+    background: Rectangle {
+        color: control.Material.dialogColor
+    }
+}

src/NavigationButton.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.TabButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 12
+    spacing: 6
+
+    property alias myIcon: icon.text
+
+    contentItem: Column {
+        Label {
+            id: icon
+            width: 24
+            height: 24
+            horizontalAlignment: Qt.AlignHCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+            font.family: Constants.iconFont.font.family
+            font.pixelSize: Constants.iconSize
+            color: !control.enabled ? control.Material.hintTextColor
+                                    : control.down || control.checked ? control.Material.accentColor
+                                                                      : control.Material.foreground
+        }
+
+        Label {
+            id: text
+            horizontalAlignment: Qt.AlignHCenter
+            width: parent.width
+            text: control.text
+            font: control.font
+            color: !control.enabled ? control.Material.hintTextColor
+                                    : control.down || control.checked ? control.Material.accentColor
+                                                                      : control.Material.foreground
+        }
+    }
+
+    background: Ripple {
+        implicitHeight: control.Material.touchTarget
+
+        clip: true
+        pressed: control.pressed
+        anchor: control
+        active: enabled && (control.down || control.visualFocus || control.hovered)
+        color: control.Material.rippleColor
+        //clipRadius: 0
+    }
+}

src/QrButton.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.AbstractButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 20
+    spacing: 6
+
+    contentItem: Label {
+        id: icon
+        width: 24
+        height: 24
+        horizontalAlignment: Qt.AlignHCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        font.family: Constants.iconFont.font.family
+        font.pixelSize: 40
+        text: Constants.icons.qrCode
+        color: !control.enabled ? control.Material.hintTextColor
+                                : control.down || control.checked ? control.Material.accentColor
+                                                                  : control.Material.foreground
+    }
+
+    background: Rectangle {
+        implicitWidth: 64
+        implicitHeight: control.Material.buttonHeight
+
+        radius: height / 2
+        color: control.Material.buttonColor(control.Material.theme, control.Material.background,
+            control.Material.accent, control.enabled, control.flat, control.highlighted, control.checked)
+
+        // The layer is disabled when the button color is transparent so you can do
+        // Material.background: "transparent" and get a proper flat button without needing
+        // to set Material.elevation as well
+        layer.enabled: control.enabled && color.a > 0 && !control.flat
+        layer.effect: RoundedElevationEffect {
+            elevation: control.Material.elevation
+            roundedScale: control.background.radius
+        }
+
+        Ripple {
+            clip: true
+            clipRadius: parent.radius
+            width: parent.width
+            height: parent.height
+            pressed: control.pressed
+            anchor: control
+            active: enabled && (control.down || control.visualFocus || control.hovered)
+            color: control.flat && control.highlighted ? control.Material.highlightedRippleColor : control.Material.rippleColor
+        }
+    }
+}

src/SettingsItem.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.AbstractButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 16
+    verticalPadding: Material.menuItemVerticalPadding
+    spacing: 16
+
+    property string subText: ""
+
+    contentItem: Column {
+        id: column
+
+        property int labelWidth: control.width - control.leftPadding - control.rightPadding
+
+        Label {
+            width: column.labelWidth
+            text: control.text
+            font.family: control.font.family
+            font.pixelSize: Constants.lgTextSize
+            color: control.enabled ? Material.primaryTextColor : Material.secondaryTextColor
+        }
+
+        Label {
+            visible: control.subText !== ""
+            width: column.labelWidth
+            text: control.subText
+            font.family: control.font.family
+            font.pixelSize: Constants.mdTextSize
+            wrapMode: Text.WordWrap
+            color: Material.secondaryTextColor
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: control.Material.menuItemHeight
+        color: "transparent"
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: control.down
+            color: control.Material.rippleColor
+        }
+    }
+}

src/SettingsPage.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Flickable {
+    id: root
+    interactive: true
+    contentHeight: mainLayout.height
+    boundsMovement: Flickable.StopAtBounds
+    boundsBehavior: Flickable.DragAndOvershootBounds
+
+    ColumnLayout {
+        id: mainLayout
+        anchors.left: parent.left
+        anchors.right: parent.right
+        spacing: 0
+
+        Label {
+            id: title
+            Layout.margins: 20
+            text: qsTr("Settings")
+            font.pixelSize: Constants.xlTextSize
+        }
+
+        SwitchSettingsItem {
+            Layout.fillWidth: true
+            horizontalPadding: 20
+            text: qsTr("Auto-scale")
+            subText: qsTr("Tries to scale the project to fit to current display and orientation. May not work with all projects.")
+            checked: backend.autoScaleProject() ? Qt.Checked : Qt.Unchecked
+            onToggled: backend.setAutoScaleProject(checked)
+        }
+
+        SwitchSettingsItem {
+            Layout.fillWidth: true
+            horizontalPadding: 20
+            text: qsTr("Keep screen on")
+            subText: qsTr("Prevents the device from going to sleep while the app is running")
+            checked: backend.keepScreenOn() ? Qt.Checked : Qt.Unchecked
+            onToggled: backend.setKeepScreenOn(checked)
+        }
+
+        SettingsItem {
+            Layout.fillWidth: true
+            horizontalPadding: 20
+            text: qsTr("Send feedback")
+        }
+
+        SettingsItem {
+            Layout.fillWidth: true
+            horizontalPadding: 20
+            text: qsTr("About")
+            subText: backend.buildInfo()
+            enabled: false
+        }
+    }
+}

src/SwitchSettingsItem.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.AbstractButton {
+    id: control
+
+    checkable: true
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 16
+    verticalPadding: Material.menuItemVerticalPadding
+    spacing: 16
+
+    property string subText: ""
+
+    indicator: Switch {
+        id: switchIndicator
+        x: control.width - switchIndicator.indicator.width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        visible: control.checkable
+        checked: control.checked
+        padding: 0
+        z: -1 // Otherwise Switch can be clicked independently instead of the button itself
+    }
+
+    contentItem: Column {
+        id: column
+
+        property int labelWidth: control.width - control.leftPadding - control.rightPadding - switchIndicator.indicator.width - 6
+
+        Label {
+            width: column.labelWidth
+            text: control.text
+            font.family: control.font.family
+            font.pixelSize: Constants.lgTextSize
+        }
+
+        Label {
+            width: column.labelWidth
+            text: control.subText
+            font.family: control.font.family
+            font.pixelSize: Constants.mdTextSize
+            wrapMode: Text.WordWrap
+            color: Material.secondaryTextColor
+        }
+    }
+
+    background: Item {
+        implicitWidth: 200
+        implicitHeight: control.Material.menuItemHeight
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: control.down
+            color: control.Material.rippleColor
+        }
+    }
+}