├── QML-Customize-Flipable ├── CustomizeFlipable.qml ├── Test.qml └── show.gif ├── QML-DelayBtn ├── DelayBtnTest.qml └── show.gif ├── QML-Drag ├── QMLDragTest.qml └── show.gif ├── QML-ExpandableListView ├── QMLExpandableList.qml └── 效果图.gif ├── QML-Gradient-font ├── GradientFont.qml └── show.png ├── QML-Light-Ani-font ├── LightFont.qml └── show.gif ├── QML-ListView-header-Suspension ├── ListView-suspension.qml └── show.gif ├── QML-PathView-CoverFlow ├── CoverFlow │ ├── .DS_Store │ ├── CoverFlow.pro │ ├── CoverFlow.qml │ ├── image.qrc │ ├── image │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ └── 5.jpg │ ├── main.cpp │ ├── main.qml │ └── qml.qrc └── show.gif ├── QML-PathView ├── pathviewTest.qml └── show.gif ├── QML-Reflection ├── QmlReflection-LinearGradient.qml ├── QmlReflection-ShaderEffect.qml ├── show1.png └── show2.png ├── QML-SpringAnimation ├── SpringAnimationTest.qml └── show.gif ├── QML-StackView-Gradient ├── .DS_Store ├── StackViewTest │ ├── .DS_Store │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── StackViewTest.pro │ ├── main.cpp │ ├── main.qml │ └── qml.qrc └── show.gif ├── QML-shadow-font ├── GlowingLabel.qml ├── MyTest.qml └── show.png └── README.md /QML-Customize-Flipable/CustomizeFlipable.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | 3 | Flipable { 4 | id: container 5 | 6 | property bool flipped: true 7 | property int xAxis: 0 8 | property int yAxis: 1 9 | property int angle: 180 10 | 11 | width: front.width 12 | height: front.height 13 | state: "back" 14 | 15 | function flipableClick(){ 16 | container.flipped = !container.flipped 17 | } 18 | 19 | transform: Rotation { 20 | id: rotation; 21 | origin.x: container.width / 2; 22 | origin.y: container.height / 2 23 | axis.x: container.xAxis; 24 | axis.y: container.yAxis; 25 | axis.z: 0 26 | } 27 | 28 | states: [ 29 | State { 30 | name: "back"; 31 | when: container.flipped 32 | PropertyChanges { 33 | target: rotation; 34 | angle: container.angle 35 | } 36 | } 37 | ] 38 | 39 | transitions: Transition { 40 | 41 | SequentialAnimation { 42 | ParallelAnimation{ 43 | NumberAnimation { 44 | target: container; 45 | property: "scale"; 46 | to: 0.88; 47 | duration: 100 48 | } 49 | NumberAnimation { 50 | target: container; 51 | property: "opacity"; 52 | to:0.7 53 | duration: 100; 54 | easing.type: Easing.Linear 55 | } 56 | } 57 | 58 | ParallelAnimation { 59 | NumberAnimation { 60 | target: container; 61 | property: "scale"; 62 | to: 0.75; 63 | duration: 130 64 | } 65 | NumberAnimation { 66 | target: rotation; 67 | properties: "angle"; 68 | duration: 290 69 | } 70 | NumberAnimation { 71 | target: container; 72 | property: "opacity"; 73 | to:0.4 74 | duration: 290; 75 | easing.type: Easing.Linear 76 | } 77 | } 78 | ParallelAnimation{ 79 | NumberAnimation { 80 | target: container; 81 | property: "scale" 82 | to: 1.0 83 | duration: 170 84 | } 85 | NumberAnimation { 86 | target: container; 87 | property: "opacity"; 88 | to:1 89 | duration: 170; 90 | easing.type: Easing.Linear 91 | } 92 | 93 | } 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /QML-Customize-Flipable/Test.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | 3 | Rectangle{ 4 | width: 250 5 | height: 350 6 | 7 | CustomizeFlipable{ 8 | id:flipable 9 | anchors.fill: parent 10 | front: rect1 11 | back: rect2 12 | 13 | MouseArea{ 14 | anchors.fill: parent 15 | onClicked: { 16 | flipable.flipableClick() 17 | } 18 | } 19 | } 20 | 21 | Rectangle{ 22 | id:rect1 23 | color:"red" 24 | width: parent.width 25 | height: parent.height 26 | Text { 27 | anchors.centerIn: parent 28 | font.pixelSize: 30 29 | font.bold: true 30 | color:"white" 31 | text: qsTr("Page 1") 32 | } 33 | } 34 | 35 | Rectangle{ 36 | id:rect2 37 | color:"green" 38 | width: parent.width 39 | height: parent.height 40 | Text { 41 | anchors.centerIn: parent 42 | font.pixelSize: 30 43 | font.bold: true 44 | color:"white" 45 | text: qsTr("Page 2") 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /QML-Customize-Flipable/show.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-Customize-Flipable/show.gif -------------------------------------------------------------------------------- /QML-DelayBtn/DelayBtnTest.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | import QtQuick.Controls 2.2 3 | 4 | DelayButton { 5 | id: control 6 | checked: true 7 | text: qsTr("Delay\nButton") 8 | delay: 2000 9 | 10 | contentItem: Text { 11 | text: control.text 12 | font: control.font 13 | opacity: enabled ? 1.0 : 0.3 14 | color: "white" 15 | horizontalAlignment: Text.AlignHCenter 16 | verticalAlignment: Text.AlignVCenter 17 | elide: Text.ElideRight 18 | } 19 | 20 | background: Rectangle { 21 | implicitWidth: 100 22 | implicitHeight: 100 23 | opacity: enabled ? 1 : 0.3 24 | color: control.down ? "#17a81a" : "#21be2b" 25 | radius: size / 2 26 | 27 | readonly property real size: Math.min(control.width, control.height) 28 | width: size 29 | height: size 30 | anchors.centerIn: parent 31 | 32 | Canvas { 33 | id: canvas 34 | anchors.fill: parent 35 | 36 | Connections { 37 | target: control 38 | onProgressChanged: canvas.requestPaint() 39 | } 40 | 41 | onPaint: { 42 | var ctx = getContext("2d") 43 | ctx.clearRect(0, 0, width, height) 44 | ctx.strokeStyle = "white" 45 | ctx.lineWidth = parent.size / 20 46 | ctx.beginPath() 47 | var startAngle = Math.PI / 5 * 3 48 | var endAngle = startAngle + control.progress * Math.PI / 5 * 9 49 | ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle) 50 | ctx.stroke() 51 | } 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /QML-DelayBtn/show.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-DelayBtn/show.gif -------------------------------------------------------------------------------- /QML-Drag/QMLDragTest.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | 3 | Item { 4 | id:root 5 | width: 500; height: 400 6 | 7 | Rectangle { 8 | id:rect 9 | x: 10; y: 10 10 | width: 50; height: 50 11 | color: "red" 12 | 13 | NumberAnimation on x{ 14 | id:ani 15 | duration: 400 16 | easing.type: Easing.OutCubic 17 | } 18 | 19 | 20 | Drag.active: dragArea.drag.active 21 | 22 | MouseArea { 23 | id: dragArea 24 | anchors.fill: parent 25 | 26 | drag.target: parent 27 | drag.maximumY:root.height-rect.height 28 | drag.minimumY: 0 29 | onPositionChanged: { 30 | console.log("x",mouseX,"y",mouseY,rect.x,rect.y) 31 | } 32 | 33 | onReleased: { 34 | if(rect.x > root.width/2.){ 35 | ani.to = root.width - rect.width 36 | ani.start() 37 | } 38 | else{ 39 | ani.to = 0 40 | ani.start() 41 | } 42 | } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /QML-Drag/show.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-Drag/show.gif -------------------------------------------------------------------------------- /QML-ExpandableListView/QMLExpandableList.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.11 2 | import QtQuick.Controls 2.2 3 | import QtQuick.Controls.Material 2.4 4 | import QtQuick.Layouts 1.11 5 | 6 | Page { 7 | id:root 8 | width: 500 9 | height: 800 10 | Material.background: "white" 11 | 12 | ListView{ 13 | id:listView 14 | anchors.fill: parent 15 | anchors.top: parent.top 16 | anchors.topMargin:20 17 | spacing: 20 18 | Material.background: "white" 19 | model: ListModel{ 20 | id:listModel 21 | } 22 | delegate: list_delegate 23 | } 24 | 25 | Component.onCompleted: { 26 | addModelData("class A","2018.2.1","aaa","13kb") 27 | addModelData("class B","2018.2.4","ddd","43kb") 28 | addModelData("class A","2018.2.2","bbb","23kb") 29 | addModelData("class A","2018.2.3","ccc","33kb") 30 | addModelData("class B","2018.2.5","eee","53kb") 31 | addModelData("class C","2018.2.6","fff","675kb") 32 | addModelData("class C","2018.2.7","ggg","45kb") 33 | } 34 | 35 | Component{ 36 | id:list_delegate 37 | 38 | Column{ 39 | id:objColumn 40 | 41 | Component.onCompleted: { 42 | for(var i = 1; i < objColumn.children.length - 1; ++i) { 43 | objColumn.children[i].visible = false 44 | } 45 | } 46 | 47 | MouseArea{ 48 | width:listView.width 49 | height: objItem.implicitHeight 50 | enabled: objColumn.children.length > 2 51 | onClicked: { 52 | console.log("onClicked..") 53 | var flag = false; 54 | for(var i = 1; i < parent.children.length - 1; ++i) { 55 | console.log("onClicked..i=",i) 56 | flag = parent.children[i].visible; 57 | parent.children[i].visible = !parent.children[i].visible 58 | } 59 | console.log("onClicked..flag = ",flag) 60 | if(!flag){ 61 | iconAin.from = 0 62 | iconAin.to = 90 63 | iconAin.start() 64 | } 65 | else{ 66 | iconAin.from = 90 67 | iconAin.to = 0 68 | iconAin.start() 69 | } 70 | } 71 | Row{ 72 | id:objItem 73 | spacing: 10 74 | leftPadding: 20 75 | 76 | Image { 77 | id: icon 78 | width: 10 79 | height: 20 80 | source: "icon_retract.png" 81 | anchors.verticalCenter: parent.verticalCenter 82 | RotationAnimation{ 83 | id:iconAin 84 | target: icon 85 | duration: 100 86 | } 87 | } 88 | Label{ 89 | id:meeting_name 90 | text: meetingName 91 | font.pixelSize: fontSizeMedium 92 | anchors.verticalCenter: parent.verticalCenter 93 | } 94 | Label{ 95 | text: date 96 | font.pixelSize: fontSizeMedium 97 | color:"grey" 98 | anchors.verticalCenter: parent.verticalCenter 99 | 100 | } 101 | } 102 | } 103 | Repeater { 104 | model: subNode 105 | 106 | delegate: Rectangle{ 107 | width: 500 108 | height: 120 109 | Rectangle { 110 | id: fileicon 111 | width: 80 112 | height: 80 113 | color:index%2?"red":"yellow" 114 | anchors{ 115 | left: parent.left 116 | leftMargin: 20 117 | verticalCenter: parent.verticalCenter 118 | } 119 | } 120 | Column{ 121 | anchors{ 122 | left: fileicon.right 123 | leftMargin: 20 124 | top: parent.top 125 | topMargin:20 126 | } 127 | topPadding: 10 128 | spacing: 10 129 | 130 | Label{ 131 | text: model.fileName 132 | font.pixelSize: fontSizeMedium 133 | } 134 | Label{ 135 | text: model.size 136 | font.pixelSize: fontSizeMedium 137 | color: "grey" 138 | } 139 | } 140 | 141 | RoundButton{ 142 | id:download 143 | width: 90 144 | height: 40 145 | highlighted: true 146 | radius: height/2. 147 | text: qsTr("View") 148 | anchors{ 149 | right: parent.right 150 | rightMargin: 30 151 | verticalCenter: parent.verticalCenter 152 | } 153 | } 154 | } 155 | } 156 | } 157 | } 158 | 159 | 160 | function addModelData(meetingName,date,fileName,size){ 161 | var index = findIndex(meetingName) 162 | if(index === -1){ 163 | listModel.append({"meetingName":meetingName,"date":date,"level":0, 164 | "subNode":[{"fileName":fileName,"size":size,"level":1,"subNode":[]}]}) 165 | } 166 | else{ 167 | listModel.get(index).subNode.append({"fileName":fileName,"size":size,"level":1,"subNode":[]}) 168 | } 169 | 170 | } 171 | 172 | function findIndex(name){ 173 | for(var i = 0 ; i < listModel.count ; ++i){ 174 | if(listModel.get(i).meetingName === name){ 175 | return i 176 | } 177 | } 178 | return -1 179 | } 180 | } 181 | -------------------------------------------------------------------------------- /QML-ExpandableListView/效果图.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-ExpandableListView/效果图.gif -------------------------------------------------------------------------------- /QML-Gradient-font/GradientFont.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | 3 | Item{ 4 | width: 200 5 | height: 100 6 | Rectangle { 7 | id: gradientRect 8 | width: 10 9 | height: 10 10 | gradient: Gradient { 11 | GradientStop { position: 0; color: "white" } 12 | GradientStop { position: 1; color: "steelblue" } 13 | } 14 | visible: false; // should not be visible on screen. 15 | layer.enabled: true; 16 | layer.smooth: true 17 | } 18 | 19 | Text { 20 | id: textItem 21 | font.pixelSize: 48 22 | text: "Gradient Text" 23 | anchors.centerIn: parent 24 | layer.enabled: true 25 | // This item should be used as the 'mask' 26 | layer.samplerName: "maskSource" 27 | layer.effect: ShaderEffect { 28 | property var colorSource: gradientRect; 29 | fragmentShader: " 30 | uniform lowp sampler2D colorSource; 31 | uniform lowp sampler2D maskSource; 32 | uniform lowp float qt_Opacity; 33 | varying highp vec2 qt_TexCoord0; 34 | void main() { 35 | gl_FragColor = 36 | texture2D(colorSource, qt_TexCoord0) 37 | * texture2D(maskSource, qt_TexCoord0).a 38 | * qt_Opacity; 39 | } 40 | " 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /QML-Gradient-font/show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-Gradient-font/show.png -------------------------------------------------------------------------------- /QML-Light-Ani-font/LightFont.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtGraphicalEffects 1.0 3 | 4 | Item { 5 | 6 | Rectangle { 7 | anchors.fill: parent 8 | color: "black" 9 | } 10 | 11 | Text { 12 | id: text 13 | anchors.fill: parent 14 | text: qsTr("ADBASn你好") 15 | font.bold: true 16 | font.pixelSize: 50 17 | color:"white" 18 | horizontalAlignment: Text.AlignHCenter 19 | verticalAlignment: Text.AlignVCenter 20 | } 21 | 22 | Glow { 23 | anchors.fill: text 24 | radius:9 25 | samples: 13 26 | color: "#ddd" 27 | source: text 28 | spread: 0.5 29 | opacity: 0.8 30 | NumberAnimation on opacity { 31 | id:an1 32 | to:0.8 33 | duration: 2000 34 | running: true 35 | onStopped: { 36 | an2.start() 37 | } 38 | } 39 | NumberAnimation on opacity { 40 | id:an2 41 | to:0.2 42 | duration: 2000 43 | onStopped: { 44 | an1.start() 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /QML-Light-Ani-font/show.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-Light-Ani-font/show.gif -------------------------------------------------------------------------------- /QML-ListView-header-Suspension/ListView-suspension.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | import QtQuick.Window 2.2 3 | import QtQuick.Controls 2.1 4 | 5 | Window { 6 | id:mainwindow 7 | visible: true 8 | width: 400 9 | height: 600 10 | 11 | 12 | Rectangle{ 13 | id:titlebar 14 | visible: true 15 | width: parent.width 16 | height: 50 17 | z:3 18 | opacity: 0 19 | color:"red" 20 | Item{ 21 | id:item 22 | anchors.fill: parent 23 | opacity:1 24 | 25 | Label{ 26 | anchors.centerIn: parent 27 | text:"hello world!!" 28 | font.pixelSize: 27 29 | } 30 | 31 | } 32 | 33 | } 34 | 35 | 36 | NumberAnimation { 37 | id:ani1 38 | target: view 39 | property: "contentY" 40 | duration: 200 41 | to:-view.headerItem.height 42 | running: false 43 | easing.type: Easing.InOutQuad 44 | } 45 | NumberAnimation { 46 | id:ani2 47 | target: view 48 | property: "contentY" 49 | duration: 200 50 | to:-titlebar.height 51 | running: false 52 | easing.type: Easing.InOutQuad 53 | } 54 | 55 | ListView{ 56 | id:view 57 | anchors.fill: parent 58 | model:20 59 | 60 | onContentYChanged:{ 61 | if(view.contentY < -titlebar.height){ 62 | titlebar.opacity = 1-(-view.contentY - titlebar.height)/100. 63 | titlebar.y = -view.contentY - titlebar.height 64 | } 65 | else{ 66 | item.opacity = 1 67 | titlebar.y = 0 68 | } 69 | 70 | } 71 | 72 | onMovementEnded: { 73 | if(view.contentY < -view.headerItem.height/2.){ 74 | ani1.running = true 75 | } 76 | else if(view.contentY < -titlebar.height){ 77 | ani2.running = true 78 | } 79 | } 80 | 81 | header:Rectangle{ 82 | width: view.width 83 | height: 150 84 | color:"red" 85 | Label{ 86 | id:label 87 | text:"this is header" 88 | font.pixelSize: 27 89 | color:"white" 90 | anchors.horizontalCenter: parent.horizontalCenter 91 | anchors.top: parent.top 92 | anchors.topMargin: 30 93 | } 94 | 95 | } 96 | 97 | 98 | delegate:Rectangle{ 99 | id:delegate 100 | width: view.width 101 | height: 50 102 | border.width: 1 103 | Label{ 104 | anchors.fill: parent 105 | text: index 106 | } 107 | } 108 | 109 | footer: Rectangle{ 110 | id:foot 111 | width: parent.width 112 | } 113 | 114 | 115 | 116 | Component.onCompleted: { 117 | var t_h = view.model.count * 50 + titlebar.height 118 | if(t_h < view.height){ 119 | view.footerItem.height = view.height - t_h 120 | } 121 | } 122 | 123 | ScrollIndicator.vertical: ScrollIndicator { } 124 | } 125 | 126 | } 127 | -------------------------------------------------------------------------------- /QML-ListView-header-Suspension/show.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-ListView-header-Suspension/show.gif -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-PathView-CoverFlow/CoverFlow/.DS_Store -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/CoverFlow.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | 3 | QT += qml quick 4 | CONFIG += c++11 5 | 6 | SOURCES += main.cpp 7 | 8 | RESOURCES += qml.qrc \ 9 | image.qrc 10 | 11 | # Additional import path used to resolve QML modules in Qt Creator's code model 12 | QML_IMPORT_PATH = 13 | 14 | # Additional import path used to resolve QML modules just for Qt Quick Designer 15 | QML_DESIGNER_IMPORT_PATH = 16 | 17 | # The following define makes your compiler emit warnings if you use 18 | # any feature of Qt which as been marked deprecated (the exact warnings 19 | # depend on your compiler). Please consult the documentation of the 20 | # deprecated API in order to know how to port your code away from it. 21 | DEFINES += QT_DEPRECATED_WARNINGS 22 | 23 | # You can also make your code fail to compile if you use deprecated APIs. 24 | # In order to do so, uncomment the following line. 25 | # You can also select to disable deprecated APIs only up to a certain version of Qt. 26 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 27 | 28 | # Default rules for deployment. 29 | qnx: target.path = /tmp/$${TARGET}/bin 30 | else: unix:!android: target.path = /opt/$${TARGET}/bin 31 | !isEmpty(target.path): INSTALLS += target 32 | -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/CoverFlow.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtGraphicalEffects 1.0 3 | 4 | Rectangle { 5 | id:coverflow 6 | color:"black" 7 | 8 | property ListModel model 9 | property int itemCount: 5 10 | 11 | PathView{ 12 | id:pathView 13 | model:coverflow.model 14 | delegate: Item { 15 | id:delegateItem 16 | width: 200 17 | height: 200 18 | z:PathView.iconZ 19 | scale:PathView.iconScale 20 | 21 | Image{ 22 | id:image 23 | source: url 24 | width: delegateItem.width 25 | height: delegateItem.height 26 | } 27 | ShaderEffect { 28 | anchors.top: image.bottom 29 | width: image.width 30 | height: image.height; 31 | anchors.left: image.left 32 | property variant source: image; 33 | property size sourceSize: Qt.size(0.5 / image.width, 0.5 / image.height); 34 | fragmentShader: 35 | "varying highp vec2 qt_TexCoord0; 36 | uniform lowp sampler2D source; 37 | uniform lowp vec2 sourceSize; 38 | uniform lowp float qt_Opacity; 39 | void main() { 40 | 41 | lowp vec2 tc = qt_TexCoord0 * vec2(1, -1) + vec2(0, 1); 42 | lowp vec4 col = 0.25 * (texture2D(source, tc + sourceSize) + texture2D(source, tc- sourceSize) 43 | + texture2D(source, tc + sourceSize * vec2(1, -1)) 44 | + texture2D(source, tc + sourceSize * vec2(-1, 1))); 45 | gl_FragColor = col * qt_Opacity * (1.0 - qt_TexCoord0.y) * 0.2; 46 | }" 47 | } 48 | 49 | 50 | 51 | transform: Rotation{ 52 | origin.x:image.width/2.0 53 | origin.y:image.height/2.0 54 | axis{x:0;y:1;z:0} 55 | angle: delegateItem.PathView.iconAngle 56 | } 57 | } 58 | path:coverFlowPath 59 | pathItemCount: coverflow.itemCount 60 | anchors.fill: parent 61 | 62 | preferredHighlightBegin: 0.5 63 | preferredHighlightEnd: 0.5 64 | 65 | } 66 | 67 | Path{ 68 | id:coverFlowPath 69 | startX: 0 70 | startY: coverflow.height/3 71 | 72 | PathAttribute{name:"iconZ";value: 0} 73 | PathAttribute{name:"iconAngle";value: 70} 74 | PathAttribute{name:"iconScale";value: 0.6} 75 | PathLine{x:coverflow.width/2;y:coverflow.height/3} 76 | 77 | PathAttribute{name:"iconZ";value: 100} 78 | PathAttribute{name:"iconAngle";value: 0} 79 | PathAttribute{name:"iconScale";value: 1.0} 80 | 81 | PathLine{x:coverflow.width;y:coverflow.height/3} 82 | PathAttribute{name:"iconZ";value: 0} 83 | PathAttribute{name:"iconAngle";value: -70} 84 | PathAttribute{name:"iconScale";value: 0.6} 85 | PathPercent{value:1.0} 86 | 87 | } 88 | 89 | } 90 | -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/image.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | image/1.jpg 4 | image/2.jpg 5 | image/3.jpg 6 | image/4.jpg 7 | image/5.jpg 8 | 9 | 10 | -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/image/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-PathView-CoverFlow/CoverFlow/image/1.jpg -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/image/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-PathView-CoverFlow/CoverFlow/image/2.jpg -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/image/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-PathView-CoverFlow/CoverFlow/image/3.jpg -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/image/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-PathView-CoverFlow/CoverFlow/image/4.jpg -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/image/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-PathView-CoverFlow/CoverFlow/image/5.jpg -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QGuiApplication app(argc, argv); 7 | 8 | QQmlApplicationEngine engine; 9 | engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 10 | if (engine.rootObjects().isEmpty()) 11 | return -1; 12 | 13 | return app.exec(); 14 | } 15 | -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.8 2 | import QtQuick.Window 2.2 3 | 4 | Window { 5 | visible: true 6 | width: 600 7 | height: 400 8 | title: qsTr("Cover Flow") 9 | 10 | ListModel{ 11 | id:model 12 | ListElement{url:"qrc:/image/1.jpg"} 13 | ListElement{url:"qrc:/image/2.jpg"} 14 | ListElement{url:"qrc:/image/3.jpg"} 15 | ListElement{url:"qrc:/image/4.jpg"} 16 | ListElement{url:"qrc:/image/5.jpg"} 17 | } 18 | 19 | CoverFlow{ 20 | anchors.fill:parent 21 | model:model 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/CoverFlow/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | CoverFlow.qml 5 | 6 | 7 | -------------------------------------------------------------------------------- /QML-PathView-CoverFlow/show.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-PathView-CoverFlow/show.gif -------------------------------------------------------------------------------- /QML-PathView/pathviewTest.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Rectangle{ 4 | id:root 5 | width: 500 6 | height: 600 7 | 8 | PathView { 9 | anchors.fill: parent 10 | delegate: flipCardDelegate 11 | model: 100 12 | path: Path { 13 | startY: root.height/2 14 | startX: 0 15 | PathAttribute { name: "itemZ"; value: 0 } 16 | PathAttribute { name: "itemAngle"; value: -90.0; } 17 | PathAttribute { name: "itemScale"; value: 0.5; } 18 | PathLine { y: root.height/2; x: root.width*0.4; } 19 | PathPercent { value: 0.48; } 20 | PathLine { y: root.height/2; x: root.width*0.5; } 21 | PathAttribute { name: "itemAngle"; value: 0.0; } 22 | PathAttribute { name: "itemScale"; value: 1.0; } 23 | PathAttribute { name: "itemZ"; value: 100 } 24 | PathLine { y: root.height/2; x: root.width*0.6; } 25 | PathPercent { value: 0.52; } 26 | PathLine { y: root.height/2; x: root.width; } 27 | PathAttribute { name: "itemAngle"; value: 90.0; } 28 | PathAttribute { name: "itemScale"; value: 0.5; } 29 | PathAttribute { name: "itemZ"; value: 0 } 30 | } 31 | pathItemCount: 6 32 | // preferredHighlightBegin: 0.5 33 | // preferredHighlightEnd: 0.5 34 | } 35 | 36 | 37 | Component { 38 | id: flipCardDelegate 39 | Item { 40 | id: wrapper 41 | width: 64 42 | height: 64 43 | visible: PathView.onPath 44 | scale: PathView.itemScale 45 | smooth: true 46 | z: PathView.itemZ 47 | property variant rotX: PathView.itemAngle 48 | transform: Rotation { axis { x: 0; y: 1; z: 0 }angle: wrapper.rotX; origin { y: 32; x: 3}} 49 | Rectangle { 50 | anchors.fill: parent 51 | color: "lightGray" 52 | border.color: "black" 53 | border.width: 3 54 | } 55 | Text { 56 | anchors.centerIn: parent 57 | text: index 58 | font.pixelSize: 30 59 | } 60 | 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /QML-PathView/show.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-PathView/show.gif -------------------------------------------------------------------------------- /QML-Reflection/QmlReflection-LinearGradient.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Controls 1.4 3 | 4 | Rectangle { 5 | id: window 6 | 7 | width: 600 8 | height: 500 9 | 10 | gradient: Gradient { 11 | GradientStop { position: 0; color: "lightsteelblue" } 12 | GradientStop { position: 1; color: "black" } 13 | } 14 | 15 | Image { 16 | id: img 17 | width: 300 18 | height: 170 19 | source: "car.png" 20 | anchors.centerIn: parent 21 | } 22 | Item{ 23 | width: img.width 24 | height: img.height 25 | 26 | Image{ 27 | source: img.source 28 | anchors.fill: parent 29 | transform: Scale{ 30 | yScale: -1 31 | origin.y:img.height/2. 32 | } 33 | } 34 | LinearGradient{ 35 | width: img.width 36 | height: img.height 37 | gradient: Gradient{ 38 | GradientStop{position: 0.0;color:Qt.rgba(0,0,0,0.1)} 39 | GradientStop{position: 0.4;color:Qt.rgba(0,0,0,1)} 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /QML-Reflection/QmlReflection-ShaderEffect.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Controls 1.4 3 | 4 | Rectangle { 5 | id: window 6 | 7 | width: 600 8 | height: 500 9 | 10 | gradient: Gradient { 11 | GradientStop { position: 0; color: "lightsteelblue" } 12 | GradientStop { position: 1; color: "black" } 13 | } 14 | 15 | Image { 16 | id: img 17 | width: 300 18 | height: 170 19 | source: "car.png" 20 | anchors.centerIn: parent 21 | } 22 | 23 | ShaderEffect { 24 | anchors.top: img.bottom 25 | width: img.width 26 | height: img.height 27 | anchors.left: img.left 28 | 29 | property variant source: img 30 | property size sourceSize: Qt.size(0.5 / img.width, 0.5 / img.height) 31 | 32 | fragmentShader: " 33 | varying highp vec2 qt_TexCoord0; 34 | uniform lowp sampler2D source; 35 | uniform lowp vec2 sourceSize; 36 | uniform lowp float qt_Opacity; 37 | void main() { 38 | 39 | lowp vec2 tc = qt_TexCoord0 * vec2(1, -1) + vec2(0, 1); 40 | lowp vec4 col = 0.25 * (texture2D(source, tc + sourceSize) 41 | + texture2D(source, tc- sourceSize) 42 | + texture2D(source, tc + sourceSize * vec2(1, -1)) 43 | + texture2D(source, tc + sourceSize * vec2(-1, 1)) 44 | ); 45 | gl_FragColor = col * qt_Opacity * (1.0 - qt_TexCoord0.y) * 0.2; 46 | }" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /QML-Reflection/show1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-Reflection/show1.png -------------------------------------------------------------------------------- /QML-Reflection/show2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-Reflection/show2.png -------------------------------------------------------------------------------- /QML-SpringAnimation/SpringAnimationTest.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle{ 4 | id:root 5 | width: 320 6 | height: 240 7 | 8 | Rectangle{ 9 | id:rect 10 | width: 40 11 | height: 40 12 | x:20 13 | y:20 14 | color: "red" 15 | } 16 | 17 | SpringAnimation{ 18 | id:springX 19 | target: rect 20 | properties: "x" 21 | spring: 3 22 | damping: 0.06 23 | epsilon: 0.25 24 | 25 | } 26 | SpringAnimation{ 27 | id:springY 28 | target: rect 29 | properties: "y" 30 | spring: 3 31 | damping: 0.06 32 | epsilon: 0.25 33 | 34 | } 35 | 36 | MouseArea{ 37 | anchors.fill: parent 38 | onClicked: { 39 | springX.from = rect.x 40 | springX.to = mouse.x - 20 41 | springX.start() 42 | springY.from = rect.y 43 | springY.to = mouse.y - 20 44 | springY.start() 45 | 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /QML-SpringAnimation/show.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-SpringAnimation/show.gif -------------------------------------------------------------------------------- /QML-StackView-Gradient/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-StackView-Gradient/.DS_Store -------------------------------------------------------------------------------- /QML-StackView-Gradient/StackViewTest/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-StackView-Gradient/StackViewTest/.DS_Store -------------------------------------------------------------------------------- /QML-StackView-Gradient/StackViewTest/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-StackView-Gradient/StackViewTest/1.jpg -------------------------------------------------------------------------------- /QML-StackView-Gradient/StackViewTest/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-StackView-Gradient/StackViewTest/2.jpg -------------------------------------------------------------------------------- /QML-StackView-Gradient/StackViewTest/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-StackView-Gradient/StackViewTest/3.jpg -------------------------------------------------------------------------------- /QML-StackView-Gradient/StackViewTest/StackViewTest.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | 3 | QT += qml quick 4 | CONFIG += c++11 5 | 6 | SOURCES += main.cpp 7 | 8 | RESOURCES += qml.qrc 9 | 10 | # Additional import path used to resolve QML modules in Qt Creator's code model 11 | QML_IMPORT_PATH = 12 | 13 | # Additional import path used to resolve QML modules just for Qt Quick Designer 14 | QML_DESIGNER_IMPORT_PATH = 15 | 16 | # The following define makes your compiler emit warnings if you use 17 | # any feature of Qt which as been marked deprecated (the exact warnings 18 | # depend on your compiler). Please consult the documentation of the 19 | # deprecated API in order to know how to port your code away from it. 20 | DEFINES += QT_DEPRECATED_WARNINGS 21 | 22 | # You can also make your code fail to compile if you use deprecated APIs. 23 | # In order to do so, uncomment the following line. 24 | # You can also select to disable deprecated APIs only up to a certain version of Qt. 25 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 26 | 27 | # Default rules for deployment. 28 | qnx: target.path = /tmp/$${TARGET}/bin 29 | else: unix:!android: target.path = /opt/$${TARGET}/bin 30 | !isEmpty(target.path): INSTALLS += target 31 | -------------------------------------------------------------------------------- /QML-StackView-Gradient/StackViewTest/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QGuiApplication app(argc, argv); 7 | 8 | QQmlApplicationEngine engine; 9 | engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 10 | if (engine.rootObjects().isEmpty()) 11 | return -1; 12 | 13 | return app.exec(); 14 | } 15 | -------------------------------------------------------------------------------- /QML-StackView-Gradient/StackViewTest/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.8 2 | import QtQuick.Window 2.2 3 | import QtQuick.Controls 1.4 4 | 5 | Window { 6 | visible: true 7 | width: 420 8 | height: 320 9 | property int flag: 1 10 | property var imgList: [img1,img2,img3] 11 | 12 | StackView{ 13 | id:stack 14 | anchors.fill: parent 15 | initialItem: img1 16 | delegate: StackViewDelegate{ 17 | function transitionFinished(properties) 18 | { 19 | properties.exitItem.opacity = 1 20 | } 21 | pushTransition: StackViewTransition { 22 | PropertyAnimation { 23 | target: enterItem 24 | property: "opacity" 25 | from: 0 26 | to: 1 27 | duration: 1500 28 | } 29 | PropertyAnimation { 30 | target: exitItem 31 | property: "opacity" 32 | from: 1 33 | to: 0 34 | duration: 500 35 | } 36 | } 37 | } 38 | } 39 | Image { 40 | id: img1 41 | source: "1.jpg" 42 | visible: false 43 | } 44 | Image { 45 | id: img2 46 | source: "2.jpg" 47 | visible: false 48 | } 49 | Image { 50 | id: img3 51 | source: "3.jpg" 52 | visible: false 53 | } 54 | 55 | Timer{ 56 | interval: 2000 57 | repeat: true 58 | running: true 59 | onTriggered: { 60 | stack.push({item:imgList[flag%3],immediate:false,replace:true}) 61 | flag++ 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /QML-StackView-Gradient/StackViewTest/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | 1.jpg 5 | 2.jpg 6 | 3.jpg 7 | 8 | 9 | -------------------------------------------------------------------------------- /QML-StackView-Gradient/show.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-StackView-Gradient/show.gif -------------------------------------------------------------------------------- /QML-shadow-font/GlowingLabel.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.3 3 | import QtGraphicalEffects 1.0 4 | 5 | Item { 6 | id: root 7 | implicitHeight: labelTextMetrics.tightBoundingRect.height 8 | implicitWidth: label.implicitWidth 9 | 10 | property alias text: label.text 11 | property alias font: label.font 12 | property alias horizontalAlignment: label.horizontalAlignment 13 | property alias verticalAlignment: label.verticalAlignment 14 | property bool glowEnabled: true 15 | property color glowColor: "#1d6d64" 16 | 17 | Label { 18 | id: label 19 | anchors.baseline: root.baseline 20 | color: root.color 21 | 22 | layer.enabled: root.glowEnabled 23 | layer.effect: Glow { 24 | color: glowColor 25 | samples: 20 26 | spread: 0.3 27 | } 28 | 29 | TextMetrics { 30 | id: labelTextMetrics 31 | text: label.text 32 | font: label.font 33 | } 34 | 35 | transform: Translate { 36 | y: -labelTextMetrics.tightBoundingRect.y 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /QML-shadow-font/MyTest.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.3 3 | 4 | 5 | Rectangle{ 6 | width: 200 7 | height: 200 8 | 9 | Column{ 10 | spacing: 15 11 | anchors.centerIn: parent 12 | GlowingLabel { 13 | text: qsTr("Qt Quick") 14 | color: "white" 15 | font.pixelSize: Qt.application.font.pixelSize * 2 16 | } 17 | GlowingLabel { 18 | text: qsTr("Hello World") 19 | color: "red" 20 | font.pixelSize: Qt.application.font.pixelSize * 2.5 21 | } 22 | 23 | GlowingLabel { 24 | text: qsTr("你好吗") 25 | color: "cyan" 26 | font.pixelSize: Qt.application.font.pixelSize * 2 27 | } 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /QML-shadow-font/show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luoyayun361/Qt-QML-Example/eb016d34de414a7de4d9a4795eb4c65d42903cdc/QML-shadow-font/show.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Qt-QML-Example 2 | Qt、QML 示例集合。 3 | 4 | ### 1.QML-ExpandableListView 5 | 6 | 用 QML 中的 listview 来实现树形二级列表（类似 android ExpandableListView控件） 7 | ![效果图](https://github.com/luoyayun361/Qt-QML-Example/blob/master/QML-ExpandableListView/%E6%95%88%E6%9E%9C%E5%9B%BE.gif) 8 | 9 | ### 2.QML-shadow-font 10 | QML 实现阴影字体效果，可定义阴影颜色及阴影大小等 11 | 12 | 13 | 14 | ### 3.QML-Light-Ani-font 15 | QML 实现发光呼吸动画字体效果 16 | 17 | ![效果图](https://github.com/luoyayun361/Qt-QML-Example/blob/master/QML-Light-Ani-font/show.gif) 18 | 19 | ### 4.QML-Gradient-font 20 | QML 实现渐变色字体 21 | 22 | 23 | 24 | ### 4.QML-Customize-Flipable 25 | QML实现页面反转封装，翻转过程中修改页面opacity、scale、angle 26 | 27 | ![效果图](https://github.com/luoyayun361/Qt-QML-Example/blob/master/QML-Customize-Flipable/show.gif) 28 | 29 | ### 5.QML-ListView-header-Suspension 30 | 31 | QML实现ListView控件悬浮标题栏 32 | 33 | ![效果图](https://github.com/luoyayun361/Qt-QML-Example/blob/master/QML-ListView-header-Suspension/show.gif) 34 | 35 | ### 6.QML-Reflection 36 | QML实现控件或图片倒影效果 37 | 38 | 39 | 40 | ### 7.QML-PathView-CoverFlow 41 | 42 | QML 实现图片酷炫切换效果 43 | 44 | ![效果图](https://github.com/luoyayun361/Qt-QML-Example/blob/master/QML-PathView-CoverFlow/show.gif) 45 | 46 | ### 8.QML-StackView-Gradient 47 | 48 | QML stackview 实现图片渐隐切换效果 49 | 50 | ![效果图](https://github.com/luoyayun361/Qt-QML-Example/blob/master/QML-StackView-Gradient/show.gif) 51 | 52 | ### 9.QML-Drag 53 | 54 | QML实现控件拖拽并停靠在左右两侧 55 | 56 | ![效果图](https://github.com/luoyayun361/Qt-QML-Example/blob/master/QML-Drag/show.gif) 57 | 58 | ### 10.QML-DelayBtn 59 | 60 | QML实现延时按钮效果 61 | 62 | ![效果图](https://github.com/luoyayun361/Qt-QML-Example/blob/master/QML-DelayBtn/show.gif) 63 | 64 | 65 | ### 11.QML-PathVIew 66 | 67 | ![效果图](https://github.com/luoyayun361/Qt-QML-Example/blob/master/QML-PathView/show.gif) 68 | 69 | ### 12.QML-SpringAnimation 70 | 71 | ![效果图](https://github.com/luoyayun361/Qt-QML-Example/blob/master/QML-SpringAnimation/show.gif) 72 | 73 | 以后代码管理会在 github 上进行更新，而技术文档更新是在 CSDN 博客中更新。 74 | **CSDN 博客地址：https://blog.csdn.net/luoyayun361** 75 | 76 | 欢迎指正、交流和学习。 77 | 78 | --------------------------------------------------------------------------------