├── image
    ├── 1.jpg
    ├── 2.png
    ├── 3.png
    ├── 4.png
    └── 5.png
├── main.cpp
├── MyBlueTooth.pro
├── qml.qrc
├── deployment.pri
├── README.md
├── DDuiBtn.qml
├── EveryPage.qml
├── SecondPage.qml
├── ThridPage.qml
├── SevenPage.qml
├── FourthPage.qml
├── FivePage.qml
├── SixPage.qml
└── main.qml


/image/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toby20130333/qmlpathview/HEAD/image/1.jpg


--------------------------------------------------------------------------------
/image/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toby20130333/qmlpathview/HEAD/image/2.png


--------------------------------------------------------------------------------
/image/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toby20130333/qmlpathview/HEAD/image/3.png


--------------------------------------------------------------------------------
/image/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toby20130333/qmlpathview/HEAD/image/4.png


--------------------------------------------------------------------------------
/image/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toby20130333/qmlpathview/HEAD/image/5.png


--------------------------------------------------------------------------------
/main.cpp:
--------------------------------------------------------------------------------
 1 | #include <QApplication>
 2 | #include <QQmlApplicationEngine>
 3 | 
 4 | int main(int argc, char *argv[])
 5 | {
 6 |     QApplication app(argc, argv);
 7 | 
 8 |     QQmlApplicationEngine engine;
 9 |     engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
10 | 
11 |     return app.exec();
12 | }
13 | 


--------------------------------------------------------------------------------
/MyBlueTooth.pro:
--------------------------------------------------------------------------------
 1 | TEMPLATE = app
 2 | 
 3 | QT += qml quick widgets
 4 | 
 5 | SOURCES += main.cpp
 6 | 
 7 | RESOURCES += qml.qrc
 8 | 
 9 | # Additional import path used to resolve QML modules in Qt Creator's code model
10 | QML_IMPORT_PATH =
11 | 
12 | # Default rules for deployment.
13 | include(deployment.pri)
14 | 


--------------------------------------------------------------------------------
/qml.qrc:
--------------------------------------------------------------------------------
 1 | <RCC>
 2 |     <qresource prefix="/">
 3 |         <file>main.qml</file>
 4 |         <file>MainForm.ui.qml</file>
 5 |         <file>EveryPage.qml</file>
 6 |         <file>SecondPage.qml</file>
 7 |         <file>ThridPage.qml</file>
 8 |         <file>FourthPage.qml</file>
 9 |         <file>FivePage.qml</file>
10 |         <file>SixPage.qml</file>
11 |         <file>SevenPage.qml</file>
12 |         <file>DDuiBtn.qml</file>
13 |     </qresource>
14 | </RCC>
15 | 


--------------------------------------------------------------------------------
/deployment.pri:
--------------------------------------------------------------------------------
 1 | android-no-sdk {
 2 |     target.path = /data/user/qt
 3 |     export(target.path)
 4 |     INSTALLS += target
 5 | } else:android {
 6 |     x86 {
 7 |         target.path = /libs/x86
 8 |     } else: armeabi-v7a {
 9 |         target.path = /libs/armeabi-v7a
10 |     } else {
11 |         target.path = /libs/armeabi
12 |     }
13 |     export(target.path)
14 |     INSTALLS += target
15 | } else:unix {
16 |     isEmpty(target.path) {
17 |         qnx {
18 |             target.path = /tmp/$${TARGET}/bin
19 |         } else {
20 |             target.path = /opt/$${TARGET}/bin
21 |         }
22 |         export(target.path)
23 |     }
24 |     INSTALLS += target
25 | }
26 | 
27 | export(INSTALLS)
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # qmlpathview
 2 | 基于QML PathView实现的一些效果
 3 | 
 4 | ======================================
 5 | 
 6 | This is a pathview example of QML  implementing,It is completely cross platform, and runs on Linux, OS X, and Windows. It also run on iOS, Android, Wphone, Ubutun Phone, Sailfish OS,or BlakBerry, There are  currently officially supported.
 7 | 
 8 | ### PreView
 9 | 
10 | ![p1](https://github.com/toby20130333/qmlpathview/blob/master/image/1.jpg)
11 | 
12 | ![p2](https://github.com/toby20130333/qmlpathview/blob/master/image/2.png)
13 | 
14 | ![p3](https://github.com/toby20130333/qmlpathview/blob/master/image/3.png)
15 | 
16 | ![p4](https://github.com/toby20130333/qmlpathview/blob/master/image/4.png)
17 | 
18 | ![p5](https://github.com/toby20130333/qmlpathview/blob/master/image/5.png)
19 | 
20 | 
21 | ### Dependencies
22 | 
23 | Requires QtCreator
24 | 
25 | Requires Qt 5.0 or higher 
26 | 
27 | Requires JavaScript
28 | 
29 | ### Installation
30 | From the root of the repository, run:
31 | 
32 | Open QtCreator Tool.
33 | 
34 | ReBuild this demo.
35 | 
36 | Run this Execute file.
37 | 
38 | ### Licensing
39 | 
40 | This demo  is free software; but now you can redistribute it and/or modify.


--------------------------------------------------------------------------------
/DDuiBtn.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.0
 2 | import QtQuick.Controls 1.3
 3 | import QtQuick.Controls.Styles 1.1
 4 | 
 5 | Button{
 6 |     id:topContorl
 7 |     property string myTxt: "第一页"
 8 |     signal signalBtnClick();
 9 |     signal signalBtnBack();
10 |     width: 100
11 |     height: 30
12 |     text: myTxt
13 |     style: ButtonStyle {
14 |             background: Rectangle {
15 |                 implicitWidth: topContorl.width
16 |                 implicitHeight: 30
17 | //                border.width: control.activeFocus ? 2 : 1
18 | //                border.color: "#888"
19 |                 gradient: Gradient {
20 |                     GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
21 |                     GradientStop { position: 0.5 ; color: control.pressed ? "#bbb" : "#ddd" }
22 |                     GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
23 |                 }
24 |             }
25 |         }
26 |     MouseArea{
27 |         id:ma
28 |         anchors.fill: parent
29 |         onClicked: {
30 |             if(mouseX<topContorl.width/2){
31 |                 signalBtnBack();
32 |             }else{
33 |                 signalBtnClick();
34 |             }
35 |         }
36 |     }
37 | }
38 | 
39 | 


--------------------------------------------------------------------------------
/EveryPage.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.0
 2 | import QtQuick.Controls 1.3
 3 | import QtQuick.Controls.Styles 1.1
 4 | 
 5 | Rectangle {
 6 |     width: 500
 7 |     height: 200
 8 |     signal signalClick();
 9 |     signal signalBack();
10 |     DDuiBtn{
11 |         id:topContorl
12 |         anchors.horizontalCenter: parent.horizontalCenter
13 |         anchors.top: parent.top
14 |         width: parent.width
15 |         height: 30
16 |         myTxt: "第一页"
17 |         onSignalBtnBack: {
18 |             signalBack();
19 |         }
20 |         onSignalBtnClick: {
21 |             signalClick();
22 |         }
23 |     }
24 |     PathView {
25 |         id: view
26 |         anchors.left: parent.left
27 |         anchors.right: parent.right
28 |         anchors.top: topContorl.bottom
29 |         anchors.bottom: parent.bottom
30 |         model: 30
31 |         path: Path {
32 |             startX: 0
33 |             startY: 0
34 | 
35 |             PathQuad {
36 |                 x: view.width
37 |                 y: 0
38 |                 controlX: view.width / 2
39 |                 controlY: view.height
40 |             }
41 |         }
42 |         delegate: Image {
43 |             width: 32
44 |             height: 32
45 |             source:returnSource(index)// "http://download.easyicon.net/png/1174866/32/"
46 |             function returnSource(index){
47 |                 var tmp = "http://download.easyicon.net/png/";
48 |                 var addNumber = 1174856+index;
49 |                 return tmp+addNumber+"/32/"
50 |             }
51 |         }
52 |     }
53 | }
54 | 
55 | 


--------------------------------------------------------------------------------
/SecondPage.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.0
 2 | import QtQuick.Controls 1.3
 3 | import QtQuick.Controls.Styles 1.1
 4 | 
 5 | Rectangle {
 6 |     width: 400
 7 |     height: 400
 8 |     signal signalClick();
 9 |     signal signalBack();
10 |     DDuiBtn{
11 |         id:topContorl
12 |         anchors.horizontalCenter: parent.horizontalCenter
13 |         anchors.top: parent.top
14 |         width: parent.width
15 |         height: 30
16 |         myTxt: "第二页"
17 |         onSignalBtnBack: {
18 |             signalBack();
19 |         }
20 |         onSignalBtnClick: {
21 |             signalClick();
22 |         }
23 |     }
24 |     PathView {
25 |         id: view
26 |         anchors.left: parent.left
27 |         anchors.right: parent.right
28 |         anchors.top: topContorl.bottom
29 |         anchors.bottom: parent.bottom
30 |         model: 40
31 | 
32 |         path: Path {
33 |             startX: view.width / 2
34 |             startY: view.height / 2
35 | 
36 |             PathQuad {
37 |                 relativeX: 0
38 |                 y: view.height
39 |                 controlX: view.width
40 |                 controlY: 0
41 |             }
42 |             PathQuad {
43 |                 relativeX: 0
44 |                 y: view.height / 2
45 |                 controlX: 0
46 |                 controlY: 0
47 |             }
48 |         }
49 |         delegate: Image {
50 |             width: 32
51 |             height: 32
52 |             source:returnSource(index)// "http://download.easyicon.net/png/1174866/32/"
53 |             function returnSource(index){
54 |                 var tmp = "http://download.easyicon.net/png/";
55 |                 var addNumber = 1174856+index;
56 |                 return tmp+addNumber+"/32/"
57 |             }
58 |         }
59 |     }
60 | }
61 | 
62 | 


--------------------------------------------------------------------------------
/ThridPage.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.0
 2 | import QtQuick.Controls 1.3
 3 | import QtQuick.Controls.Styles 1.1
 4 | 
 5 | Rectangle {
 6 |     width: 500
 7 |     height: 200
 8 |     signal signalClick();
 9 |     signal signalBack();
10 |     DDuiBtn{
11 |         id:topContorl
12 |         anchors.horizontalCenter: parent.horizontalCenter
13 |         anchors.top: parent.top
14 |         width: parent.width
15 |         height: 30
16 |         myTxt: "第三页"
17 |         onSignalBtnBack: {
18 |             signalBack();
19 |         }
20 |         onSignalBtnClick: {
21 |             signalClick();
22 |         }
23 |     }
24 |     PathView {
25 |         id: view
26 | 
27 |         anchors.left: parent.left
28 |         anchors.right: parent.right
29 |         anchors.top: topContorl.bottom
30 |         anchors.bottom: parent.bottom
31 |         model: 20
32 | 
33 |         path: Path {
34 |             startX: 0
35 |             startY: height
36 | 
37 |             PathCurve {
38 |                 x: view.width / 5
39 |                 y: view.height / 2
40 |             }
41 |             PathCurve {
42 |                 x: view.width / 5 * 2
43 |                 y: view.height / 4
44 |             }
45 |             PathPercent { value: 0.49 }
46 |             PathLine {
47 |                 x: view.width / 5 * 3
48 |                 y: view.height / 4
49 |             }
50 |             PathPercent { value: 0.51 }
51 |             PathCurve {
52 |                 x: view.width / 5 * 4
53 |                 y: view.height / 2
54 |             }
55 |             PathCurve {
56 |                 x: view.width
57 |                 y: view.height
58 |             }
59 |             PathPercent { value: 1 }
60 |         }
61 |         delegate: Image {
62 |             width: 32
63 |             height: 32
64 |             source:returnSource(index)// "http://download.easyicon.net/png/1174866/32/"
65 |             function returnSource(index){
66 |                 var tmp = "http://download.easyicon.net/png/";
67 |                 var addNumber = 1174856+index;
68 |                 return tmp+addNumber+"/32/"
69 |             }
70 |         }
71 |     }
72 | }
73 | 
74 | 


--------------------------------------------------------------------------------
/SevenPage.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.0
 2 | import QtQuick.Controls 1.3
 3 | import QtQuick.Controls.Styles 1.1
 4 | 
 5 | Rectangle {
 6 |     width: 360
 7 |     height: 360
 8 |     signal signalClick();
 9 |     signal signalBack();
10 |     DDuiBtn{
11 |         id:topContorl
12 |         anchors.horizontalCenter: parent.horizontalCenter
13 |         anchors.top: parent.top
14 |         width: parent.width
15 |         height: 30
16 |         myTxt: "第七页"
17 |         onSignalBtnBack: {
18 |             signalBack();
19 |         }
20 |         onSignalBtnClick: {
21 |             signalClick();
22 |         }
23 |     }
24 | 
25 |     ListModel {
26 |         id: dataModel
27 | 
28 |         ListElement {
29 |             color: "orange"
30 |             text: "first"
31 |         }
32 |         ListElement {
33 |             color: "lightgreen"
34 |             text: "second"
35 |         }
36 |         ListElement {
37 |             color: "orchid"
38 |             text: "third"
39 |         }
40 |         ListElement {
41 |             color: "tomato"
42 |             text: "fourth"
43 |         }
44 |     }
45 | 
46 |     Flickable {
47 |         anchors.left: parent.left
48 |         anchors.right: parent.right
49 |         anchors.top: topContorl.bottom
50 |         anchors.bottom: parent.bottom
51 |         contentWidth: row.width
52 | 
53 |         Row {
54 |             id: row
55 | 
56 |             height: parent.height
57 | 
58 |             Repeater {
59 |                 model: dataModel
60 |                 delegate: Item {
61 |                     height: parent.height
62 |                     width: 100
63 | 
64 |                     Rectangle {
65 |                         anchors.margins: 5
66 |                         anchors.fill: parent
67 |                         color: model.color
68 |                         border {
69 |                             color: "black"
70 |                             width: 1
71 |                         }
72 | 
73 |                         Text {
74 |                             anchors.centerIn: parent
75 |                             renderType: Text.NativeRendering
76 |                             text: model.text
77 |                         }
78 |                     }
79 |                 }
80 |             }
81 |         }
82 |     }
83 | }
84 | 
85 | 
86 | 


--------------------------------------------------------------------------------
/FourthPage.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.0
 2 | import QtQuick.Controls 1.3
 3 | import QtQuick.Controls.Styles 1.1
 4 | 
 5 | Rectangle {
 6 |     property int itemSize: 20
 7 |     signal signalClick();
 8 |     signal signalBack();
 9 | 
10 |     DDuiBtn{
11 |         id:topContorl
12 |         anchors.horizontalCenter: parent.horizontalCenter
13 |         anchors.top: parent.top
14 |         width: parent.width
15 |         height: 30
16 |         myTxt:"第四页"
17 |         onSignalBtnBack: {
18 |             signalBack();
19 |         }
20 |         onSignalBtnClick: {
21 |             signalClick();
22 |         }
23 |     }
24 |     PathView {
25 |         id: view
26 |         anchors.left: parent.left
27 |         anchors.right: parent.right
28 |         anchors.top: topContorl.bottom
29 |         anchors.bottom: parent.bottom
30 |         model: 20
31 | 
32 |         path: Path {
33 |             startX: 0
34 |             startY: height
35 | 
36 |             PathAttribute { name: "size"; value: itemSize }
37 |             PathAttribute { name: "opacity"; value: 0.5 }
38 |             PathCurve {
39 |                 x: view.width / 5
40 |                 y: view.height / 2
41 |             }
42 |             PathCurve {
43 |                 x: view.width / 5 * 2
44 |                 y: view.height / 4
45 |             }
46 |             PathPercent { value: 0.49 }
47 |             PathAttribute { name: "size"; value: itemSize * 2 }
48 |             PathAttribute { name: "opacity"; value: 1 }
49 |             PathLine {
50 |                 x: view.width / 5 * 3
51 |                 y: view.height / 4
52 |             }
53 |             PathAttribute { name: "size"; value: itemSize * 2 }
54 |             PathAttribute { name: "opacity"; value: 1 }
55 |             PathPercent { value: 0.51 }
56 |             PathCurve {
57 |                 x: view.width / 5 * 4
58 |                 y: view.height / 2
59 |             }
60 |             PathCurve {
61 |                 x: view.width
62 |                 y: view.height
63 |             }
64 |             PathPercent { value: 1 }
65 |             PathAttribute { name: "size"; value: itemSize }
66 |             PathAttribute { name: "opacity"; value: 0.5 }
67 |         }
68 |         delegate: Image {
69 |             width: PathView.size
70 |             height: PathView.size
71 |             opacity: PathView.opacity
72 |             source:returnSource(index)// "http://download.easyicon.net/png/1174866/32/"
73 |             function returnSource(index){
74 |                 var tmp = "http://download.easyicon.net/png/";
75 |                 var addNumber = 1174856+index;
76 |                 return tmp+addNumber+"/32/"
77 | 
78 |             }
79 |         }
80 |     }
81 | }
82 | 
83 | 


--------------------------------------------------------------------------------
/FivePage.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.0
 2 | import QtQuick.Controls 1.3
 3 | import QtQuick.Controls.Styles 1.1
 4 | Rectangle {
 5 |     property int itemSize: 20
 6 |     signal signalClick();
 7 |     signal signalBack();
 8 | 
 9 |     DDuiBtn{
10 |         id:topContorl
11 |         anchors.horizontalCenter: parent.horizontalCenter
12 |         anchors.top: parent.top
13 |         width: parent.width
14 |         height: 30
15 |         myTxt:"第五页"
16 |         onSignalBtnBack: {
17 |             signalBack();
18 |         }
19 |         onSignalBtnClick: {
20 |             signalClick();
21 |         }
22 |     }
23 |     PathView {
24 |         id: view
25 |         anchors.left: parent.left
26 |         anchors.right: parent.right
27 |         anchors.top: topContorl.bottom
28 |         anchors.bottom: parent.bottom
29 |         model: 20
30 | 
31 |         path: Path {
32 |             startX: 0
33 |             startY: height
34 | 
35 |             PathAttribute { name: "size"; value: itemSize }
36 |             PathAttribute { name: "opacity"; value: 0.5 }
37 |             PathCurve {
38 |                 x: view.width / 5
39 |                 y: view.height / 2
40 |             }
41 |             PathCurve {
42 |                 x: view.width / 5 * 2
43 |                 y: view.height / 4
44 |             }
45 |             PathAttribute { name: "size"; value: itemSize }
46 |             PathAttribute { name: "opacity"; value: 0.5 }
47 |             PathPercent { value: 0.49 }
48 | 
49 |             PathLine { relativeX: 0; relativeY: 0 } // разделитель
50 | 
51 |             PathAttribute { name: "size"; value: itemSize * 2 }
52 |             PathAttribute { name: "opacity"; value: 1 }
53 |             PathLine {
54 |                 x: view.width / 5 * 3
55 |                 y: view.height / 4
56 |             }
57 |             PathAttribute { name: "size"; value: itemSize * 2 }
58 |             PathAttribute { name: "opacity"; value: 1 }
59 |             PathPercent { value: 0.51 }
60 | 
61 |             PathLine { relativeX: 0; relativeY: 0 } // разделитель
62 | 
63 |             PathAttribute { name: "size"; value: itemSize }
64 |             PathAttribute { name: "opacity"; value: 0.5 }
65 |             PathCurve {
66 |                 x: view.width / 5 * 4
67 |                 y: view.height / 2
68 |             }
69 |             PathCurve {
70 |                 x: view.width
71 |                 y: view.height
72 |             }
73 |             PathPercent { value: 1 }
74 |             PathAttribute { name: "size"; value: itemSize }
75 |             PathAttribute { name: "opacity"; value: 0.5 }
76 |         }
77 |         delegate: Image {
78 |             width: PathView.size
79 |             height: PathView.size
80 |             opacity: PathView.opacity
81 |             source:returnSource(index)// "http://download.easyicon.net/png/1174866/32/"
82 |             function returnSource(index){
83 |                 var tmp = "http://download.easyicon.net/png/";
84 |                 var addNumber = 1174856+index;
85 |                 return tmp+addNumber+"/32/"
86 | 
87 |             }
88 |         }
89 |     }
90 | }
91 | 
92 | 
93 | 


--------------------------------------------------------------------------------
/SixPage.qml:
--------------------------------------------------------------------------------
  1 | import QtQuick 2.0
  2 | import QtQuick.Controls 1.3
  3 | import QtQuick.Controls.Styles 1.1
  4 | 
  5 | Rectangle {
  6 |     property real itemAngle: 60
  7 |     property real itemSize: 200
  8 |     signal signalClick();
  9 |     signal signalBack();
 10 | 
 11 |     DDuiBtn{
 12 |         id:topContorl
 13 |         anchors.horizontalCenter: parent.horizontalCenter
 14 |         anchors.top: parent.top
 15 |         width: parent.width
 16 |         height: 30
 17 |         text: "第六页"
 18 |         onSignalBtnBack: {
 19 |             signalBack();
 20 |         }
 21 |         onSignalBtnClick: {
 22 |             signalClick();
 23 |         }
 24 |     }
 25 |     width: 1200
 26 |     height: 400
 27 | 
 28 |     ListModel {
 29 |         id: dataModel
 30 | 
 31 |         ListElement {
 32 |             color: "orange"
 33 |             text: "first"
 34 |         }
 35 |         ListElement {
 36 |             color: "lightgreen"
 37 |             text: "second"
 38 |         }
 39 |         ListElement {
 40 |             color: "orchid"
 41 |             text: "third"
 42 |         }
 43 |         ListElement {
 44 |             color: "tomato"
 45 |             text: "fourth"
 46 |         }
 47 |         ListElement {
 48 |             color: "skyblue"
 49 |             text: "fifth"
 50 |         }
 51 |         ListElement {
 52 |             color: "hotpink"
 53 |             text: "sixth"
 54 |         }
 55 |         ListElement {
 56 |             color: "darkseagreen"
 57 |             text: "seventh"
 58 |         }
 59 |     }
 60 | 
 61 |     PathView {
 62 |         id: view
 63 | 
 64 |         anchors.left: parent.left
 65 |         anchors.right: parent.right
 66 |         anchors.top: topContorl.bottom
 67 |         anchors.bottom: parent.bottom
 68 |         model: dataModel
 69 |         pathItemCount: 6
 70 | 
 71 |         path: Path {
 72 |             startX: 0
 73 |             startY: height / 2
 74 | 
 75 |             PathPercent { value: 0.0 }
 76 |             PathAttribute { name: "z"; value: 0 }
 77 |             PathAttribute { name: "angle"; value: itemAngle }
 78 |             PathAttribute { name: "origin"; value: 0 }
 79 |             PathLine {
 80 |                 x: (view.width - itemSize) / 2
 81 |                 y: view.height / 2
 82 |             }
 83 |             PathAttribute { name: "angle"; value: itemAngle }
 84 |             PathAttribute { name: "origin"; value: 0 }
 85 |             PathPercent { value: 0.49 }
 86 |             PathAttribute { name: "z"; value: 10 }
 87 | 
 88 | 
 89 |             PathLine { relativeX: 0; relativeY: 0 }
 90 | 
 91 |             PathAttribute { name: "angle"; value: 0 }
 92 |             PathLine {
 93 |                 x: (view.width - itemSize) / 2 + itemSize
 94 |                 y: view.height / 2
 95 |             }
 96 |             PathAttribute { name: "angle"; value: 0 }
 97 |             PathPercent { value: 0.51 }
 98 | 
 99 |             PathLine { relativeX: 0; relativeY: 0 }
100 | 
101 |             PathAttribute { name: "z"; value: 10 }
102 |             PathAttribute { name: "angle"; value: -itemAngle }
103 |             PathAttribute { name: "origin"; value: itemSize }
104 |             PathLine {
105 |                 x: view.width
106 |                 y: view.height / 2
107 |             }
108 |             PathPercent { value: 1 }
109 |             PathAttribute { name: "z"; value: 0 }
110 |             PathAttribute { name: "angle"; value: -itemAngle }
111 |             PathAttribute { name: "origin"; value: itemSize }
112 |         }
113 |         delegate: Rectangle {
114 |             property real rotationAngle: PathView.angle
115 |             property real rotationOrigin: PathView.origin
116 |             radius: itemSize/2
117 |             width: itemSize
118 |             height: width
119 |             z: PathView.z
120 |             color: Qt.rgba(Math.random(),Math.random(),Math.random(),1.0)
121 | //            color: model.color
122 |             border {
123 |                 color: "gray"
124 |                 width: 1
125 |             }
126 |             transform: Rotation {
127 |                 axis { x: 0; y: 1; z: 0 }
128 |                 angle: rotationAngle
129 |                 origin.x: rotationOrigin
130 |             }
131 |             Image {
132 |                 width: 32
133 |                 height: 32
134 |                 anchors.centerIn: parent
135 |                 source:returnSource(index)// "http://download.easyicon.net/png/1174866/32/"
136 |                 function returnSource(index){
137 |                     var tmp = "http://download.easyicon.net/png/";
138 |                     var addNumber = 1174856+index;
139 |                     return tmp+addNumber+"/32/"
140 |                 }
141 |             }
142 |         }
143 |     }
144 | }
145 | 
146 | 


--------------------------------------------------------------------------------
/main.qml:
--------------------------------------------------------------------------------
  1 | import QtQuick 2.4
  2 | import QtQuick.Controls 1.3
  3 | import QtQuick.Window 2.2
  4 | import QtQuick.Dialogs 1.2
  5 | 
  6 | ApplicationWindow {
  7 |     id:main
  8 |     title: qsTr("Hello World")
  9 |     width: 640
 10 |     height: 480
 11 |     visible: true
 12 |     property Component oneView: EveryPage {
 13 |         onSignalClick: {
 14 |             Stack.view.push(secondView)
 15 |         }
 16 |     }
 17 |     property Component secondView: SecondPage {
 18 |         onSignalClick: {
 19 |             Stack.view.push(thridView)
 20 |         }
 21 |         onSignalBack: {
 22 |             Stack.view.pop();
 23 |         }
 24 |     }
 25 | 
 26 |     property Component thridView: ThridPage {
 27 |         onSignalClick: {
 28 |             Stack.view.push(fouthView)
 29 |         }
 30 |         onSignalBack: {
 31 |             Stack.view.pop();
 32 |         }
 33 |     }
 34 | 
 35 |     property Component fouthView: FourthPage {
 36 |         onSignalClick: {
 37 |             // Wrong: goes to movieDetailView.
 38 |             Stack.view.push(fiveView);
 39 | //            Stack.view.pop(moviesListView)
 40 |         }
 41 |         onSignalBack: {
 42 |             Stack.view.pop();
 43 |         }
 44 |     }
 45 | 
 46 |     property Component fiveView: FivePage {
 47 |         onSignalClick: {
 48 |             // Wrong: goes to movieDetailView.
 49 |             Stack.view.push(sixView)
 50 |         }
 51 |         onSignalBack: {
 52 |             Stack.view.pop();
 53 |         }
 54 |     }
 55 |     property Component sixView: SixPage {
 56 |         onSignalClick: {
 57 |             // Wrong: goes to movieDetailView.
 58 |             Stack.view.push(sevenView)
 59 |         }
 60 |         onSignalBack: {
 61 |             Stack.view.pop();
 62 |         }
 63 |     }
 64 |     property Component sevenView: SevenPage {
 65 |         onSignalClick: {
 66 |             // Wrong: goes to movieDetailView.
 67 |             Stack.view.pop()
 68 |         }
 69 |         onSignalBack: {
 70 |             Stack.view.pop();
 71 |         }
 72 |     }
 73 |     StackView {
 74 |         anchors.fill: parent
 75 |         initialItem: oneView
 76 |         delegate: StackViewDelegate {
 77 | 
 78 |             function transitionFinished(properties)
 79 |             {
 80 |                 properties.exitItem.opacity = 1
 81 |             }
 82 | 
 83 |             pushTransition: StackViewTransition {
 84 |                 PropertyAnimation {
 85 |                     target: enterItem
 86 |                     property: "width"
 87 |                     from: 0
 88 |                     to: main.width
 89 |                     duration: 800
 90 |                     easing.type: Easing.OutBack;
 91 |                     easing.amplitude: 2.0;
 92 |                     easing.period: 1.5
 93 |                 }
 94 |                 PropertyAnimation {
 95 |                     target: exitItem
 96 |                     property: "opacity"
 97 |                     to: 0
 98 |                     from: 1
 99 |                     duration: 10
100 |                 }
101 |             }
102 |         }
103 |     }
104 | 
105 |     //    StackView {
106 |     //        id: stackView
107 |     //        anchors.fill: parent
108 |     //        delegate: StackViewDelegate {
109 | 
110 |     //            function transitionFinished(properties)
111 |     //            {
112 |     //                properties.exitItem.opacity = 1
113 |     //            }
114 | 
115 |     //            pushTransition: StackViewTransition {
116 |     //                PropertyAnimation {
117 |     //                    target: enterItem
118 |     //                    property: "opacity"
119 |     //                    from: 0
120 |     //                    to: 1
121 |     //                    duration: 10
122 |     //                }
123 |     //                PropertyAnimation {
124 |     //                    target: exitItem
125 |     //                    property: "opacity"
126 |     //                    from: 1
127 |     //                    to: 0
128 |     //                    duration: 10
129 |     //                }
130 |     //            }
131 |     //        }
132 |     //        initialItem: Item {
133 |     //            width: parent.width
134 |     //            height: parent.height
135 |     //            ListView {
136 |     //                model: pageModel
137 |     //                anchors.fill: parent
138 |     //                delegate: Rectangle {
139 |     //                    Text {
140 |     //                        id: name
141 |     //                        text: qsTr("text")
142 |     //                    }
143 |     ////                    onClicked: stackView.push(Qt.resolvedUrl(page))
144 |     //                }
145 |     //            }
146 |     //        }
147 |     //    }
148 | }
149 | 


--------------------------------------------------------------------------------