add book

Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/CMakeLists.txt

@@ -0,0 +1,48 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(14-StatesWithGradients VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 6.4 REQUIRED COMPONENTS Quick)
+
+qt_standard_project_setup()
+
+qt_add_executable(app14-StatesWithGradients
+    main.cpp
+)
+
+qt_add_resources(app14-StatesWithGradients "images"
+        PREFIX /
+        FILES
+                images/treespringsmall.png
+                images/treesummersmall.png
+)
+
+qt_add_qml_module(app14-StatesWithGradients
+    URI 14-StatesWithGradients
+    VERSION 1.0
+    QML_FILES Main.qml
+)
+
+# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
+# If you are developing for iOS or macOS you should consider setting an
+# explicit, fixed bundle identifier manually though.
+set_target_properties(app14-StatesWithGradients PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app14-StatesWithGradients
+    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+    MACOSX_BUNDLE TRUE
+    WIN32_EXECUTABLE TRUE
+)
+
+target_link_libraries(app14-StatesWithGradients
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app14-StatesWithGradients
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/Main.qml

@@ -0,0 +1,234 @@
+import QtQuick
+
+Window {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("States with Gradients")
+
+    Rectangle{
+        id: containerRectId
+        anchors.fill: parent
+
+        //Sky
+        Rectangle{
+            id: skyId
+            width: parent.width
+            height: 200
+            //color: "blue"
+            gradient: Gradient{
+                GradientStop{
+                    id: skyStartColorId
+                    position: 0.0
+                    color: "blue"
+                }
+                GradientStop{
+                    id: skyEndColorId
+                    position: 1.0
+                    color: "#66CCFF"
+                }
+            }
+        }
+
+
+        Rectangle{
+            id: groundId
+            anchors.top: skyId.bottom
+            anchors.bottom: parent.bottom
+            width: parent.width
+            //color: "lime"
+            gradient: Gradient{
+                GradientStop{
+                    id: groundStartColorId
+                    position: 0.0
+                    color: "lime"
+                }
+                GradientStop{
+                    id: groundEndColorId
+                    position: 1.0
+                    color: "#66CCFF"
+                }
+            }
+        }
+
+
+        Image{
+            id: treeSummerId
+            x: 50
+            y: 100
+            width: 200
+            height: 300
+            source: "qrc:/images/treesummersmall.png"
+        }
+
+        Image{
+            id: treeSpringId
+            x: 50
+            y: 100
+            width: 200
+            height: 300
+            source: "qrc:/images/treespringsmall.png"
+        }
+
+        Rectangle{
+            id: sunId
+            x: parent.width - width - 100
+            y: 50
+            width: 100
+            height: 100
+            color: "yellow"
+            radius: 600
+        }
+
+        state: "spring"
+
+        states: [
+
+           //Spring
+            State{
+                name: "spring"
+                /*
+                PropertyChanges {
+                   target: skyId
+                   color: "deepskyblue"
+                }
+                */
+                PropertyChanges {
+                    target: skyStartColorId
+                    color: "deepskyblue"
+                }
+
+                PropertyChanges {
+                    target: skyEndColorId
+                    color: "#AACCFF"
+                }
+
+                PropertyChanges {
+                    target: treeSummerId
+                    opacity: 0
+                }
+                PropertyChanges {
+                    target: treeSpringId
+                    opacity: 1
+                }
+                /*
+                PropertyChanges {
+                    target: groundId
+                    color: "lime"
+                }
+                */
+                PropertyChanges {
+                    target: groundStartColorId
+                    color: "lime"
+                }
+                PropertyChanges {
+                    target: groundEndColorId
+                    color: "#66CCFF"
+                }
+
+                PropertyChanges {
+                    target: sunId
+                    color: "lightyellow"
+
+                }
+            },
+
+            //Summer
+            State{
+                name: "summer"
+                /*
+                PropertyChanges {
+                   target: skyId
+                   color: "lightblue"
+                }
+                */
+                PropertyChanges{
+                    target: skyStartColorId
+                    color: "lightblue"
+                }
+                PropertyChanges{
+                    target: skyEndColorId
+                    color: "#EECCFF"
+                }
+                PropertyChanges {
+                    target: treeSummerId
+                    opacity: 1
+                }
+                PropertyChanges {
+                    target: treeSpringId
+                    opacity: 0
+                }
+                /*
+                PropertyChanges {
+                    target: groundId
+                    color: "darkkhaki"
+                }
+                */
+                PropertyChanges {
+                    target: groundStartColorId
+                    color: "lime"
+                }
+                PropertyChanges {
+                    target: groundEndColorId
+                    color: "darkkhaki"
+                }
+                PropertyChanges {
+                    target: sunId
+                    color: "yellow"
+
+                }
+            }
+
+        ]
+
+        //Transitions
+        /*
+        transitions: [
+            Transition{
+                from: "summer"
+                to: "spring"
+                ColorAnimation{
+                    duration: 500
+                }
+                NumberAnimation{
+                    property: "opacity"
+                    duration: 500
+                }
+            },
+
+            Transition{
+                from: "spring"
+                to: "summer"
+                ColorAnimation{
+                    duration: 500
+                }
+                NumberAnimation{
+                    property: "opacity"
+                    duration: 500
+                }
+
+            }
+        ]
+        */
+
+        transitions: Transition{
+            from: "*"
+            to: "*"
+            ColorAnimation{
+                duration: 500
+            }
+            NumberAnimation{
+                property: "opacity"
+                duration: 500
+            }
+        }
+
+
+        MouseArea{
+            anchors.fill: parent
+            onClicked: function(){
+                containerRectId.state = (containerRectId.state === "spring" ? "summer" : "spring")
+            }
+        }
+    }
+}

Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/main.cpp

@@ -0,0 +1,19 @@
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    const QUrl url(u"qrc:/14-StatesWithGradients/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}