qml基础学习 模型视图(一)

  1 import QtQuick 2.0
  2 
  3 Rectangle {
  4     width: 480;
  5     height: 300;
  6 
  7     //背景色渐变
  8     gradient: Gradient {
  9         GradientStop { position: 0.0; color: "#dbddde"; }
 10         GradientStop { position: 1.0; color: "#5fc9f8"; }
 11     }
 12 
 13     //list模型默认9项
 14     ListModel {
 15         id: theModel
 16 
 17         ListElement { number: 0; }
 18         ListElement { number: 1; }
 19         ListElement { number: 2; }
 20         ListElement { number: 3; }
 21         ListElement { number: 4; }
 22         ListElement { number: 5; }
 23         ListElement { number: 6; }
 24         ListElement { number: 7; }
 25         ListElement { number: 8; }
 26         ListElement { number: 9; }
 27     }
 28 
 29     //Add Item按钮
 30     Rectangle {
 31         anchors.left: parent.left;
 32         anchors.right: parent.right;
 33         anchors.bottom: parent.bottom;
 34         anchors.margins: 20;
 35 
 36         height: 40;
 37 
 38         color: "#53d769";
 39         border.color: Qt.lighter(color, 1.1);
 40 
 41         Text {
 42             anchors.centerIn: parent;
 43 
 44             text: "Add item!";
 45         }
 46 
 47         //点击时新增项  实现model的动态新增
 48         MouseArea {
 49             anchors.fill: parent;
 50 
 51             onClicked: {
 52                 theModel.append({"number": ++parent.count});
 53             }
 54         }
 55 
 56         property int count: 9;//
 57     }
 58 
 59     GridView {
 60         anchors.fill: parent;
 61         anchors.margins: 20;
 62         anchors.bottomMargin: 80;
 63 
 64         clip: true;
 65 
 66         model: theModel;//绑定数据源
 67 
 68         cellWidth: 45;//设置项大小
 69         cellHeight: 45;
 70 
 71         delegate: numberDelegate;//设置绘制代理
 72     }
 73 
 74     //自定义绘制代理
 75     Component {
 76         id: numberDelegate;
 77 
 78         Rectangle {
 79             id: wrapper;
 80 
 81             width: 40;
 82             height: 40;
 83 
 84             //首先是一个渐变的矩形框
 85             gradient: Gradient {
 86                 GradientStop { position: 0.0; color: "#f8306a"; }
 87                 GradientStop { position: 1.0; color: "#fb5b40"; }
 88             }
 89 
 90             //文本值是number的数值
 91             Text {
 92                 anchors.centerIn: parent;
 93 
 94                 font.pixelSize: 10;
 95 
 96                 text: number;
 97             }
 98 
 99             //鼠标点击代理时，移除点击项
100             MouseArea {
101                 anchors.fill: parent;
102 
103                 onClicked: {
104                     if (!wrapper.GridView.delayRemove)//是否延迟移除
105                     {
106                         theModel.remove(index);
107                     }
108                 }
109             }
110 
111             //GridView移除项  顺序动画
112             GridView.onRemove: SequentialAnimation {
113                 //属性变化
114                 PropertyAction {
115                     target: wrapper;
116                     property: "GridView.delayRemove";
117                     value: true;
118                 }
119                 //数字动画
120                 NumberAnimation {
121                     target: wrapper;//目标对象
122                     property: "scale";//执行动画的属性
123                     to: 0;//结束值
124                     duration: 250;//动画持续时长
125                     easing.type: Easing.InOutQuad;//动画执行曲线
126                 }
127                 PropertyAction {
128                     target: wrapper;
129                     property: "GridView.delayRemove";
130                     value: false;
131                 }
132             }
133 
134             //GridView新增项  顺序动画
135             GridView.onAdd: SequentialAnimation {
136                 NumberAnimation {
137                     target: wrapper;
138                     property: "scale";
139                     from: 0;//开始值
140                     to: 1;
141                     duration: 250;
142                     easing.type: Easing.InOutQuad;
143                 }
144             }
145         }
146     }
147 }

  1 import QtQuick 2.0
  2 
  3 Item {
  4     width: 300;
  5     height: 480;
  6 
  7     //渐变别景色
  8     Rectangle {
  9         anchors.fill: parent;
 10         gradient: Gradient {
 11             GradientStop { position: 0.0; color: "#4a4a4a"; }
 12             GradientStop { position: 1.0; color: "#2b2b2b"; }
 13         }
 14     }
 15 
 16     //主界面列表视图
 17     ListView {
 18         id: listView;
 19 
 20         anchors.fill: parent;
 21 
 22         delegate: detailsDelegate;//设置绘制代理
 23         model: planets;//绑定数据源
 24     }
 25 
 26     ListModel {
 27         id: planets;
 28 
 29         ListElement {
 30             name: "Mercury";
 31             imageSource: "images/mercury.jpeg";
 32             facts: "Mercury is the smallest planet in the Solar System. It is the closest planet to the sun. It makes one trip around the Sun once every 87.969 days." ;
 33         }
 34         ListElement {
 35             name: "Venus";
 36             imageSource: "images/venus.jpeg";
 37             facts: "Venus is the second planet from the Sun. It is a terrestrial planet because it has a solid, rocky surface. The other terrestrial planets are Mercury, Earth and Mars. Astronomers have known Venus for thousands of years.";
 38         }
 39         ListElement {
 40             name: "Earth";
 41             imageSource: "images/earth.jpeg";
 42             facts: "The Earth is the third planet from the Sun. It is one of the four terrestrial planets in our Solar System. This means most of its mass is solid. The other three are Mercury, Venus and Mars. The Earth is also called the Blue Planet, ‘Planet Earth‘, and ‘Terra‘.";
 43         }
 44         ListElement {
 45             name: "Mars";
 46             imageSource: "images/mars.jpeg";
 47             facts: "Mars is the fourth planet from the Sun in the Solar System. Mars is dry, rocky and cold. It is home to the largest volcano in the Solar System. Mars is named after the mythological Roman god of war because it is a red planet, which signifies the colour of blood.";
 48         }
 49     }
 50 
 51     Component {
 52         id: detailsDelegate;
 53 
 54         Item {
 55             id: wrapper;
 56 
 57             width: listView.width;
 58             height: 30;
 59 
 60             //列表项文本
 61             Rectangle {
 62                 anchors.left: parent.left;
 63                 anchors.right: parent.right;
 64                 anchors.top: parent.top;
 65 
 66                 height: 30;
 67 
 68                 color: "#333";
 69                 border.color: Qt.lighter(color, 1.2);
 70                 Text {
 71                     anchors.left: parent.left;
 72                     anchors.verticalCenter: parent.verticalCenter;
 73                     anchors.leftMargin: 4;
 74 
 75                     font.pixelSize: parent.height-4;
 76                     color: ‘#fff‘;
 77 
 78                     text: name;//ListElement中的name
 79                 }
 80             }
 81 
 82             //列表项图标
 83             Rectangle {
 84                 id: image;
 85 
 86                 width: 26;
 87                 height: 26;
 88 
 89                 anchors.right: parent.right;
 90                 anchors.top: parent.top;
 91                 anchors.rightMargin: 2;
 92                 anchors.topMargin: 2;
 93 
 94                 color: "yellow";
 95 
 96                 Image {
 97                     anchors.fill: parent;
 98 
 99                     fillMode: Image.PreserveAspectFit;
100 
101                     source: imageSource;//ListElement中的imageSource
102                 }
103             }
104 
105             //鼠标点击列表项 进行状态前切换，
106             MouseArea {
107                 anchors.fill: parent;
108                 onClicked: parent.state = "expanded";//切换到展开状态
109             }
110 
111             //详情页展开时，文本详细信息
112             Item {
113                 id: factsView;
114 
115                 anchors.top: image.bottom;//位于放大后的图标底部
116                 anchors.left: parent.left;
117                 anchors.right: parent.right;
118                 anchors.bottom: parent.bottom;
119 
120                 opacity: 0;//默认透明不显示  当点击代理项时该属性会慢慢变得可见
121 
122                 Rectangle {
123                     anchors.fill: parent;
124 
125                     gradient: Gradient {
126                         GradientStop { position: 0.0; color: "#fed958"; }
127                         GradientStop { position: 1.0; color: "#fecc2f"; }
128                     }
129                     border.color: ‘#000000‘;
130                     border.width: 2;
131 
132                     Text {
133                         anchors.fill: parent;
134                         anchors.margins: 5;
135 
136                         clip: true;//可剪切
137                         wrapMode: Text.WordWrap;//文本支持换行
138                         color: ‘#1f1f21‘;
139 
140                         font.pixelSize: 12;
141 
142                         text: facts;
143                     }
144                 }
145             }
146 
147             //项最大化时 右上角关闭按钮
148             Rectangle {
149                 id: closeButton;
150 
151                 anchors.right: parent.right;
152                 anchors.top: parent.top;
153                 anchors.rightMargin: 2;
154                 anchors.topMargin: 2;
155 
156                 width: 26;
157                 height: 26;
158 
159                 color: "#157efb";
160                 border.color: Qt.lighter(color, 1.1);
161 
162                 opacity: 0;
163 
164                 MouseArea {
165                     anchors.fill: parent;
166                     onClicked: wrapper.state = "";//点击恢复到默认状态
167                 }
168             }
169 
170             //自定义代理状态
171             states: [
172                 State {
173                     name: "expanded";
174                     //在点击列表项后 各项属相变化
175 
176                     //代理高度铺满视图高度
177                     PropertyChanges { target: wrapper; height: listView.height; }
178                     //列表项的图标放大
179                     PropertyChanges {
180                         target: image;
181                         width: listView.width;
182                         height: listView.width;
183                         anchors.rightMargin: 0;
184                         anchors.topMargin: 30//距离顶部30像素
185                     }
186                     //文本详细信息可见
187                     PropertyChanges { target: factsView; opacity: 1; }
188                     //关闭按钮可见
189                     PropertyChanges { target: closeButton; opacity: 1; }
190                     //列表项视图
191                     PropertyChanges {
192                         target: wrapper.ListView.view;
193                         contentY: wrapper.y;
194                         interactive: false
195                     }
196                 }
197             ]
198 
199             //项变化时 过程
200             transitions: [
201                 Transition {
202                     NumberAnimation {
203                         duration: 200;
204                         properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY";
205                     }
206                 }
207             ]
208         }
209     }
210 }

 1 import QtQuick 2.6
 2 
 3 Rectangle {
 4     id: root;
 5     width: 480;
 6     height: 300;
 7 
 8     PathView
 9     {
10         anchors.fill: parent;
11 
12         delegate: flipCardDelegate;
13         model: 100;
14 
15         path: Path{
16             startX: root.width / 2;
17             startY: 0
18 
19             PathAttribute { name: "itemAngle"; value: -45.0; }
20             PathAttribute { name: "itemScale"; value: 0.5; }
21             PathAttribute { name: "itemZ"; value: 0; }//属性值附加到代理上面
22             PathLine { x: root.width/2; y: root.height*0.4; }//路径元素定义
23             PathPercent { value: 0.48; }//控制两个元素之间的路径所占百分比
24             PathLine { x: root.width/2; y: root.height*0.5; }
25             PathAttribute { name: "itemAngle"; value: 0.0; }
26             PathAttribute { name: "itemScale"; value: 1.0; }
27             PathAttribute { name: "itemZ"; value: 100 }
28             PathLine { x: root.width/2; y: root.height*0.6; }
29             PathPercent { value: 0.52; }
30             PathLine { x: root.width/2; y: root.height; }
31             PathAttribute { name: "itemAngle"; value: 45.0; }
32             PathAttribute { name: "itemScale"; value: 0.5; }
33             PathAttribute { name: "itemZ"; value: 0; }
34         }
35 
36         pathItemCount: 17;//可见元素数目
37 
38         preferredHighlightBegin: 0.5;
39         preferredHighlightEnd: 0.5;
40     }
41     Component{
42         id: flipCardDelegate;
43 
44         Rectangle{
45             id: wrapper;
46 
47             width: 64;
48             height: 64;
49             antialiasing: true;//反锯齿
50 
51             //代理背景色渐变
52             gradient: Gradient{
53                 GradientStop { position: 0.0; color: "#2ed5fa"; }
54                 GradientStop { position: 1.0; color: "#2467ec"; }
55             }
56 
57             visible: PathView.onPath;//在PathView上的项可见，不在视图上的项不可见
58 
59             scale: PathView.itemScale;//缩放
60             z: PathView.itemZ;//z值  数值大的在上面
61 
62             property variant rotX: PathView.itemAngle;//属性别名 主要是因为要在底下这个旋转过程中使用
63 
64             //动画过程旋转
65             transform: Rotation {
66                 axis { x: 1; y: 1; z: 1; }//绕x轴旋转
67                 angle: wrapper.rotX;//旋转角度
68                 origin { x: 32; y: 32; }//旋转基点
69             }
70             Text{
71                 anchors.horizontalCenter: parent.horizontalCenter;
72                 anchors.verticalCenter: parent.verticalCenter;
73                 text: index;
74             }
75         }
76     }
77 }