add

DefineAndUseModule/StyleDemo/CustomControl/controls/ButtonColor.qml

@@ -0,0 +1,8 @@
+import QtQml 2.2
+
+QtObject
+{
+    property color normalColor;
+    property color hoverColor;
+    property color pressColor;
+}

DefineAndUseModule/StyleDemo/CustomControl/controls/CustomButton.qml

@@ -0,0 +1,82 @@
+import QtQuick 2.0
+import CustomControl 1.0
+
+//按钮控件的实现
+Item
+{
+    id: button
+    width: 72
+    height: 26
+    property alias text: innerText.text    //按钮上的文字
+    property alias fontColor: innerText.color   //文字颜色
+    property int fontSize: 12               //字体大小
+    property ButtonColor buttonStyle: CustomProperty.errorStyle
+    readonly property color color: buttonStyle.normalColor         //normal的颜色
+    readonly property color hoverColor: buttonStyle.hoverColor    //hover时的颜色
+    readonly property color pressColor: buttonStyle.pressColor    //press时的颜色
+    property int borderRadius: 3
+    onEnabledChanged: state = ""
+    signal clicked
+
+    //画按钮的矩形
+    Rectangle
+    {
+        id: rectangleButton
+        anchors.fill: parent
+        radius: borderRadius
+        color: parent.enabled ? parent.color : "grey"
+
+        Text {
+            id: innerText
+            font.pointSize: fontSize
+            anchors.centerIn: parent
+        }
+    }
+
+    //不同的状态，按钮有不同的颜色
+    states: [
+        State {
+            name: "Hovering"
+            PropertyChanges {
+                target: rectangleButton
+                color: hoverColor
+            }
+        },
+        State {
+            name: "Pressed"
+            PropertyChanges {
+                target: rectangleButton
+                color: pressColor
+            }
+        }
+    ]
+
+    //定义状态转换
+    transitions: [
+        Transition {
+            from: ""; to: "Hovering"
+            ColorAnimation { duration: 60 }
+        },
+        Transition {
+            from: "*"; to: "Pressed"
+            ColorAnimation { duration: 10 }
+        }
+    ]
+
+    //响应鼠标事件
+    MouseArea
+    {
+        hoverEnabled: true
+        anchors.fill: parent
+        onEntered: { parent.state='Hovering'; cursorShape = Qt.PointingHandCursor}
+        onExited: { parent.state=''; cursorShape = Qt.ArrowCursor}
+        onClicked: { parent.clicked();}
+        onPressed: { parent.state="Pressed" }
+        onReleased: {
+            if (containsMouse)
+              parent.state="Hovering";
+            else
+              parent.state="";
+        }
+    }
+}

DefineAndUseModule/StyleDemo/CustomControl/controls/CustomProperty.qml

@@ -0,0 +1,29 @@
+pragma Singleton
+import QtQml 2.2
+
+QtObject
+{
+    id: global
+    objectName: "CustomColor"
+
+    property ButtonColor errorStyle: ButtonColor{
+        objectName: "errorStyle"
+        normalColor: "#da4f47"
+        hoverColor: "#f3564d"
+        pressColor: "#c4413a"
+    }
+
+    property ButtonColor warningStyle: ButtonColor{
+        objectName: "warningStyle"
+        normalColor: "#ffffff"
+        hoverColor: "#000000"
+        pressColor: "#c4413a"
+    }
+
+    Component.onCompleted: {
+        console.debug("Flat Global object was created once");
+    }
+    Component.onDestruction: {
+        console.debug("Flat Global object was destructed");
+    }
+}

DefineAndUseModule/StyleDemo/CustomControl/qmldir

@@ -0,0 +1,4 @@
+module CustomControl
+
+singleton CustomProperty 1.0 ./controls/CustomProperty.qml
+CustomButton 1.0 ./controls/CustomButton.qml

DefineAndUseModule/StyleDemo/StyleDemo.pro

@@ -0,0 +1,32 @@
+TEMPLATE = app
+
+QT += qml quick
+CONFIG += c++11
+
+SOURCES += main.cpp
+
+RESOURCES += qml.qrc
+
+# Additional import path used to resolve QML modules in Qt Creator's code model
+QML_IMPORT_PATH = C:/Users/kong/Documents/StyleDemo
+
+# Additional import path used to resolve QML modules just for Qt Quick Designer
+QML_DESIGNER_IMPORT_PATH =
+
+# The following define makes your compiler emit warnings if you use
+# any feature of Qt which as been marked deprecated (the exact warnings
+# depend on your compiler). Please consult the documentation of the
+# deprecated API in order to know how to port your code away from it.
+DEFINES += QT_DEPRECATED_WARNINGS
+
+# You can also make your code fail to compile if you use deprecated APIs.
+# In order to do so, uncomment the following line.
+# You can also select to disable deprecated APIs only up to a certain version of Qt.
+#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
+
+# Default rules for deployment.
+qnx: target.path = /tmp/$${TARGET}/bin
+else: unix:!android: target.path = /opt/$${TARGET}/bin
+!isEmpty(target.path): INSTALLS += target
+
+DISTFILES +=