qml_基本元素运用示例

qml_基本元素运用示例 

1. 1. 介绍QML是一种描述语言，主要是对界面效果等的一种描述，它可以结合javaScript来进行更复杂的效果及逻辑实现。比如做个游戏，实现一些更有趣的功能等
   
2. 
   
3. 2. 简单的例子
   
4. import Qt 4.7
   
5. Rectangle {
   
6.     width: 200
   
7.     height: 200
   
8.     color: "blue"
   
9. }
   
10. 代码是绘制一个蓝色的矩形，宽 200 高 200， import包含一个qt4.7的包
    
11. 3.基本元素的介绍（自己翻译意思会有出入，敬请见谅）
    
12.         基本可视化项
    
13. Item 基本的项元素 在QML中所有可视化的向都继承他
    
14. Rectangle 基本的可视化矩形元素
    
15. Gradient 定义一个两种颜色的渐变过程
    
16. GradientStop 定义个颜色，被Gradient使用
    
17. Image 在场景中使用位图
    
18. BorderImage(特殊的项) 定义一张图片并当做边界
    
19. AnimatedImage 为播放动画存储一系列的帧
    
20. Text 在场景中使用文本
    
21. TextInput 显示可编辑为文本
    
22. IntValidator int 验证器
    
23. DoubleValidator double 验证器
    
24. RegExpValidator 验证字符串正则表达式
    
25. TextEdit 显示多行可编辑文本
    
26. 基本的交互项
    
27. MouseArea 鼠标句柄交互
    
28. FocusScope 键盘焦点句柄
    
29. Flickable 提供一种浏览整张图片的一部分的效果,具体看例子
    
30. Flipable 提供一个平面，可以进行翻转看他的前面或后面,具体看例子
    
31. 状态
    
32. State 定义一个配置对象和属性的集合
    
33. PropertyChanges 使用一个State描述属性的改变
    
34. StateGroup 包含一个状态集合和状态变换
    
35. ParentChange 重新定义父集，也就是换个父节点
    
36. AnchorChanges 在一个状态中改变anchors
    
37. 动画和变换
    
38. Behavior 默认的属性变换动画
    
39. SequentialAnimation 对定义的动画串行播放
    
40. ParallelAnimation 对定义的动画并行播放
    
41. PropertyAnimation 属性变换动画
    
42. NumberAnimation 对实数类型属性进行的动画
    
43. Vector3dAnimation 对QVector3d进行的属性
    
44. ColorAnimation 颜色进行的变换动画
    
45. RotationAnimation 对旋转进行的变换动画
    
46. ParentAnimation 对父节点进行变换的动画，改变绑定的父节点
    
47. AnchorAnimation 对anchor 进行改变的动画
    
48. PauseAnimation 延迟处理
    
49. SmoothedAnimation 允许属性平滑的过度
    
50. SpringAnimation 一种加速的效果
    
51. PropertyAction 允许在动画过程中对属性的直接改变
    
52. ScriptAction 允许动画过程中调用脚本
    
53. Transition 在状态变换中加入动作变化
    
54. 工作中的数据
    
55. Binding 在创建的时候绑定一些数据到一些属性
    
56. ListModel 定义链表数据
    
57. ListElement 定义ListModel的一个数据项
    
58. VisualItemModel 包含可视化项(visual items)到一个view中，相当是一个容器
    
59. VisualDataModel 包含一个model和一个delegate，model包含需要的数据，delegate设计显示的项的信息，具体的去看例子
    
60. Package 他的目的是把VisualDataModel共享给多个view，具体还要学习
    
61. XmlListModel 特殊的一个模式使用XPath表达式，使用xml来设置元素，参考例子
    
62. XmlRole XmlListModel的一个特殊的角色
    
63. 试图
    
64. ListView 提供一个链表显示模型试图
    
65. GridView 提供一个网格显示模型试图
    
66. PathView 提供一个内容沿着路径来显示的模型
    
67. Path 定义一个PathView使用的轨迹
    
68. PathLine 定义一个线性的轨迹
    
69. PathQuad 定义一个二次贝塞尔曲线的轨迹
    
70. PathCubic 定义一个三次贝塞尔曲线的轨迹
    
71. PathAttribute 允许绑定一个属性上，具体看例子
    
72. PathPercent 修改item分配的轨迹 不是很明了其中的意思
    
73. WebView 允许添加网页内容到一个canvas上
    
74. 定位器
    
75. Column 整理它的子列(纵)
    
76. Row 整理它的子行(横)
    
77. Grid 设置它的子到一个网格上
    
78. Flow 目的是不让他的子项重叠在一起
    
79. 实用
    
80. Connections 明确连接信号和信号句柄
    
81. Component 封装QML items 想一个组件一样
    
82. Timer 提供时间触发器
    
83. QtObject 基本的元素只包含objectName属性
    
84. Qt qml全局Qt object提供使用的枚举和函数
    
85. WorkerScript 允许在QML使用线程
    
86. Loader 控制载入item或组件
    
87. Repeater 使用一个模型创建多个组件
    
88. SystemPalette 为Qt palettes提供一个通道
    
89. FontLoader 载入字体根据名字或URL
    
90. LayoutItem 允许声明UI元素插入到qtGraphicsView 布局中
    
91. 变换
    
92. Scale 分派item 缩放行为
    
93. Rotation 分派item 旋转行为
    
94. Translate 分派item 移动行为
    
95. 
    
96. 
    
97. 4.基本元素的使用例子
    
98. 1. Item位置是0,0 宽高分别是200
    
99. Item {
    
100.     x: 0; y: 0;
     
101.     width: 200; height: 200;
     
102. }
     
103. 2. Rectangle位置是：0,0宽高分别是200， 颜色是红色
     
104. Rectangle {
     
105.     x: 0; y: 0;
     
106.     width: 200; height: 200;
     
107.     color: "red"
     
108. }
     
109. 3. Gradient GradientStop 分别在总高度的0 颜色红色 总高度的1/3 黄色 总高度的1是绿色
     
110. Rectangle {
     
111.     width: 100; height: 100
     
112.     gradient: Gradient {
     
113.         GradientStop { position: 0.0; color: "red" }
     
114.         GradientStop { position: 0.33; color: "yellow" }
     
115.         GradientStop { position: 1.0; color: "green" }
     
116.     }
     
117. }
     
118. 4. Image 设置一张图片
     
119. Image {
     
120.     source: "../Images/button1.png"
     
121. }
     
122. 5. BorderImage 他将一张图片分成9部分
     
123. 当图片进行缩放的时候
     
124. A．1 3 7 9 位置的都不会进行缩放
     
125. B. 2 8将根据属性horzontalTileMode 进行缩放
     
126. C．4 6 将根据属性verticalTileMode 进行缩放
     
127. D．5 将根据属性horzontalTileMode 和 verticalTileMode 进行缩放
     
128. BorderImage {
     
129.     width: 180; height: 180
     
130.     // 分割1~9块的4个点是根据border设置的坐标来实现的
     
131.     // 本别是距离坐标 上边 右边 下边的距离
     
132.     border { left: 30; top: 30; right: 30; bottom: 30 }
     
133.     horizontalTileMode: BorderImage.Stretch
     
134.     verticalTileMode: BorderImage.Stretch
     
135.     source: "../Images/button1.png"
     
136. }
     
137. 
     
138. 6. AnimatedImage 主要用于播放gif图片
     
139. Rectangle {
     
140.     width: animation.width; height: animation.height + 8
     
141.     AnimatedImage { id: animation; source: "animation.gif" }
     
142.     Rectangle {
     
143.         property int frames: animation.frameCount
     
144.         width: 4; height: 8
     
145.         x: (animation.width - width) * animation.currentFrame / frames
     
146.         y: animation.height
     
147.         color: "red"
     
148.     }
     
149. }
     
150. 7. Text 显示文本(具体的其他设置请看文档)
     
151. Text {
     
152.     text: "text"
     
153. }
     
154. 8. TextInput 下面是设置一个输入文本框，框中的字符串是Text, 并设置鼠标可以选择文本
     
155. TextInput{
     
156.     text: "Text"
     
157.     selectByMouse: true; // 鼠标可以选择
     
158. }
     
159. 9．IntValidator int 型验证器，和输入框结合后就是只能输入整型数据
     
160. TextInput{
     
161.     // 最高可以输入100， 最低输入10
     
162.     IntValidator{id: intval; bottom: 10; top: 100;}
     
163.     width: 100; height: 20;
     
164.     text: "";
     
165.     // 使用校验器
     
166.     validator: intval;
     
167. }
     
168. 10. DoubleValidator 只能输入浮点数
     
169. TextInput{
     
170.     // 最高可以输入100， 最低输入10 decimals最多有多少位小数
     
171.     // notation 表示是使用科学计数法还是(默认),还是直接的小数 当获取里面的数据
     
172.     DoubleValidator{id: intval; decimals: 4; bottom: 10; top: 100; notation:DoubleValidator.StandardNotation}
     
173.     width: 100; height: 20;
     
174.     text: "";
     
175.     // 使用校验器
     
176.     validator: intval;
     
177. }
     
178. 11. RegExpValidator 使用正则表达式
     
179. TextInput{
     
180.     // 使用一个正则表达式来控制输入的字符串
     
181.     // /^[a-zA-Z]{1}[0-1]{0,2}[a-z]{1,3}$/ 表示 开始位置必须是一个大写或小写字母
     
182.     // 接下来是0~2个的数字而且是0或1，在接下来是1~3个的小写字母
     
183.     RegExpValidator{id: intval; regExp:/^[a-zA-Z]{1}[0-1]{0,2}[a-z]{1,3}$/;}
     
184.     width: 100; height: 20;
     
185.     text: "";
     
186.     // 使用校验器
     
187.     validator: intval;
     
188. }
     
189. 12. TextEdit
     
190. 显示一段hello world的html文本和TextInput相同
     
191. 
     
192. TextEdit {
     
193.     width: 240
     
194.     text: "Hello World!"
     
195.     font.family: "Helvetica"
     
196.     font.pointSize: 20
     
197.     color: "blue"
     
198.     focus: true
     
199. }
     
200. 
     
201. 13. MouseArea
     
202. 
     
203. 主要是用来判断鼠标事件的区域
     
204. Rectangle{
     
205.     x: 0; y: 0;
     
206.     width: 100; height:100;
     
207.     Rectangle{
     
208.         id: mousrect
     
209.         x: 20; y: 20;
     
210.         width: 20; height: 20;
     
211.         color: "blue"
     
212.         MouseArea{
     
213.             // 使用父的区域作为鼠标判断的区域及 x: 20; y: 20; width: 20; height: 20;
     
214.             anchors.fill: parent;
     
215.             // 但鼠标按下后 mousrect变成红色，当鼠标松开后变成蓝色
     
216.             onPressed: { mousrect.color = "red";}
     
217.             onReleased: { mousrect.color = "blue";}
     
218.         }
     
219.     }
     
220. }
     
221. 
     
222. 
     
223. 14. FocusScope
     
224. 不是很清楚说的什么，好像是说同一个时刻只有一个item有焦点
     
225. 15. Flickable
     
226. 显示一个200x200的框，框中显示图片上200x200的部分
     
227. Flickable {
     
228.     width: 200; height: 200
     
229.     // 设置使用图片的宽 高，而现实的是 200x200的现实框
     
230.     contentWidth: image.width; contentHeight: image.height
     
231.     Image { id: image; source: "../Images/need.png" }
     
232. }
     
233. 
     
234. 16. Flipable
     
235. 包含两个面，一个前面，一个后面，实现一个控件前后的翻转效果，并且在后面可以添加一些控制
     
236. 
     
237. Flipable {
     
238.     id: flipable
     
239.     width: 240
     
240.     height: 240
     
241.     property int angle: 0
     
242.     property bool flipped: false
     
243.     front: Image { source: "front.png" } // 前面
     
244.     back: Image { source: "back.png" } // 后面
     
245.     // 旋转动画 前后面交换
     
246.     transform: Rotation {
     
247.         origin.x: flipable.width/2; origin.y: flipable.height/2
     
248.         axis.x: 0; axis.y: 1; axis.z: 0 // rotate around y-axis
     
249.         angle: flipable.angle
     
250.     }
     
251.     states: State {
     
252.         name: "back"
     
253.         PropertyChanges { target: flipable; angle: 180 }
     
254.         when: flipable.flipped
     
255.     }
     
256.     transitions: Transition {
     
257.         NumberAnimation { properties: "angle"; duration: 1000 }
     
258.     }
     
259.     MouseArea {
     
260.         anchors.fill: parent
     
261.         onClicked: flipable.flipped = !flipable.flipped
     
262.     }
     
263. }
     
264. 
     
265. 
     
266. 17. State
     
267. 
     
268. 
     
269. // 当鼠标按下后改变 myRect 的颜色
     
270. Rectangle {
     
271.     id: myRect
     
272.     width: 100; height: 100
     
273.     color: "black"
     
274.     MouseArea {
     
275.         id: mouseArea
     
276.         anchors.fill: parent
     
277.         onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked';
     
278.     }
     
279.     // 设置状态
     
280.     states: [
     
281.         State {
     
282.             name: "clicked"
     
283.             PropertyChanges { target: myRect; color: "red" }
     
284.         }
     
285.     ]
     
286. }
     
287. 
     
288. 
     
289. 18. PropertyChanges
     
290. 
     
291. // 当鼠标按下后改变状态
     
292. // 状态里面的属性改变包含了文本和颜色的改变
     
293. Text {
     
294.     id: myText
     
295.     width: 100; height: 100
     
296.     text: "Hello"
     
297.     color: "blue"
     
298.     states: State {
     
299.         name: "myState"
     
300.         // 当这个状态被设置的时候，将改变myText的文本和颜色
     
301.         PropertyChanges {
     
302.             target: myText
     
303.             text: "Goodbye"
     
304.             color: "red"
     
305.         }
     
306.     }
     
307.     MouseArea { anchors.fill: parent; onClicked: myText.state = 'myState' }
     
308. }
     
309. 
     
310. 
     
311. 19. StateGroup
     
312. 
     
313. 一个状态组中可以包含很多的状态和变化，而状态也可以和变换绑定.
     
314. 
     
315. 
     
316. 
     
317. 20. StateChangeScript
     
318. 
     
319. 在状态中可以对脚本中的函数进行调用
     
320. // Sc.js
     
321. function changeColor() // 返回蓝色
     
322. {
     
323.     return "blue";
     
324. }
     
325. 
     
326. // test.qml
     
327. import "Sc.js" as Code
     
328. Rectangle{
     
329.     id: rect
     
330.     width: 50; height: 50
     
331.     color: "red"
     
332.     MouseArea {
     
333.         anchors.fill: parent
     
334.         onClicked: rect.state = "first" // 鼠标按下改变状态
     
335.     }
     
336.     states: State {name: "first";
     
337.         StateChangeScript{
     
338.             name: "myScript";
     
339.             script: rect.color = Code.changeColor();
     
340.         }
     
341.     }
     
342. }
     
343. 
     
344. 
     
345. 21. ParentChang
     
346. 把指定的item换一个item父节点
     
347. 
     
348. Item {
     
349.     width: 200; height: 100
     
350.     Rectangle {
     
351.         id: redRect
     
352.         width: 100; height: 100
     
353.         color: "red"
     
354.     }
     
355.     // 本来blueRect的父节点是Item 当鼠标按下后他被设置到 redRect上
     
356.     Rectangle {
     
357.         id: blueRect
     
358.         x: redRect.width
     
359.         width: 50; height: 50
     
360.         color: "blue"
     
361.         states: State {
     
362.             name: "reparented"
     
363.             // 改变父节点
     
364.             ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
     
365.         }
     
366.         MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
     
367.     }
     
368. }
     
369. 
     
370. 
     
371. 22. AnchorChanges
     
372. 
     
373. Rectangle {
     
374.     id: window
     
375.     width: 120; height: 120
     
376.     color: "black"
     
377.     Rectangle { id: myRect; width: 50; height: 50; color: "red" }
     
378.     states: State {
     
379.         name: "reanchored"
     
380.         AnchorChanges { // 改变 myRect 的anchors属性
     
381.             target: myRect
     
382.             anchors.top: window.top
     
383.             anchors.bottom: window.bottom
     
384.         }
     
385.         PropertyChanges {
     
386.             target: myRect
     
387.             anchors.topMargin: 10
     
388.             anchors.bottomMargin: 10
     
389.         }
     
390.     }
     
391.     // 鼠标事件
     
392.     MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }
     
393. }
     
394. 
     
395. 
     
396. 23. Behavior
     
397. 
     
398. Rectangle {
     
399.     id: rect
     
400.     width: 100; height: 100
     
401.     color: "red"
     
402.     // 针对宽度的动画
     
403.     Behavior on width {
     
404.         NumberAnimation { duration: 1000 }
     
405.     }
     
406.     MouseArea {
     
407.         anchors.fill: parent
     
408.         onClicked: rect.width = 50
     
409.     }
     
410. }
     
411. 
     
412. 24. SequentialAnimation
     
413. 串行播放多个动画
     
414. Rectangle {
     
415.     id: rect1
     
416.     width: 500; height: 500
     
417.     Rectangle{
     
418.         id: rect;
     
419.         color: "red"
     
420.         width: 100; height: 100
     
421.         // 串行播放多个动画，先横向移动，在纵向移动
     
422.         SequentialAnimation{
     
423.             running: true;
     
424.             NumberAnimation {target:rect; properties:"x"; to: 50; duration: 1000 }
     
425.             NumberAnimation {target:rect; properties:"y"; to: 50; duration: 1000 }
     
426.         }
     
427.     }
     
428. }
     
429. 
     
430. 
     
431. 25. ParallelAnimation
     
432. 
     
433. Rectangle {
     
434.     id: rect1
     
435.     width: 500; height: 500
     
436.     Rectangle{
     
437.         id: rect;
     
438.         color: "red"
     
439.         width: 100; height: 100
     
440.         // 并行播放动画，同时横向和纵向移动
     
441.         ParallelAnimation{
     
442.             running: true;
     
443.             NumberAnimation {target:rect; properties:"x"; to: 50; duration: 1000 }
     
444.             NumberAnimation {target:rect; properties:"y"; to: 50; duration: 1000 }
     
445.         }
     
446.     }
     
447. }
     
448. 
     
449. 
     
450. 26. PropertyAnimation
     
451. 
     
452. Rectangle {
     
453.     id: rect
     
454.     width: 100; height: 100
     
455.     color: "red"
     
456.     states: State {
     
457.         name: "moved"
     
458.         PropertyChanges { target: rect; x: 50 }
     
459.     }
     
460.     transitions: Transition {
     
461.         // 属性动画 这里是当属性 x或y发生变化的时候，就播放这样一个动画
     
462.         PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
     
463.     }
     
464.     MouseArea{
     
465.         anchors.fill: parent;
     
466.         onClicked: rect.state = "moved";
     
467.     }
     
468. }
     
469. 
     
470. 
     
471. 27. NumberAnimation
     
472. 
     
473. Rectangle {
     
474.     width: 100; height: 100
     
475.     color: "red"
     
476.     // 对当前item的x进行移动，目标移动到x = 50
     
477.     NumberAnimation on x { to: 50; duration: 1000 }
     
478. }
     
479. 
     
480. 
     
481. 28. Vector3dAnimation
     
482. 
     
483. 
     
484. 
     
485. 29. ColorAnimation
     
486. 
     
487. 颜色的过度
     
488. Rectangle {
     
489.     width: 100; height: 100
     
490.     color: "red"
     
491.     ColorAnimation on color { to: "yellow"; duration: 1000 }
     
492. }
     
493. 
     
494. 
     
495. 30. RotationAnimation
     
496. 
     
497. 默认是绕z轴进行的旋转
     
498. Item {
     
499.     width: 300; height: 300
     
500.     Rectangle {
     
501.         id: rect
     
502.         width: 150; height: 100; anchors.centerIn: parent
     
503.         color: "red"
     
504.         smooth: true
     
505.         states: State {
     
506.             name: "rotated"; PropertyChanges { target: rect; rotation: 180 }
     
507.         }
     
508.         transitions: Transition {
     
509.             RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
     
510.         }
     
511.     }
     
512.     MouseArea { anchors.fill: parent; onClicked: rect.state = "rotated" }
     
513. }
     
514. 
     
515. 
     
516. 31. ParentAnimation
     
517. 
     
518. 一个切换父节点的动画,平滑的过度
     
519. Item {
     
520.     width: 200; height: 100
     
521.     Rectangle {
     
522.         id: redRect
     
523.         width: 100; height: 100
     
524.         color: "red"
     
525.     }
     
526.     Rectangle {
     
527.         id: blueRect
     
528.         x: redRect.width
     
529.         width: 50; height: 50
     
530.         color: "blue"
     
531.         states: State {
     
532.             name: "reparented"
     
533.             ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
     
534.         }
     
535.         transitions: Transition {
     
536.             ParentAnimation {
     
537.                 NumberAnimation { properties: "x,y"; duration: 1000 }
     
538.             }
     
539.         }
     
540.         MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
     
541.     }
     
542. }
     
543. 
     
544. 32. AnchorAnimation
     
545. 
     
546. Item {
     
547.     id: container
     
548.     width: 200; height: 200
     
549.     Rectangle {
     
550.         id: myRect
     
551.         width: 100; height: 100
     
552.         color: "red"
     
553.     }
     
554.     states: State {
     
555.         name: "reanchored"
     
556.         AnchorChanges { target: myRect; anchors.right: container.right }
     
557.     }
     
558.     transitions: Transition {
     
559.         // smoothly reanchor myRect and move into new position
     
560.         AnchorAnimation { duration: 1000 }
     
561.     }
     
562.     // 当控件加载完成后
     
563.     Component.onCompleted: container.state = "reanchored"
     
564. }
     
565. 
     
566. 33. PauseAnimation
     
567. 
     
568. 延迟效果
     
569. Item {
     
570.     id: container
     
571.     width: 200; height: 200
     
572.     Rectangle {
     
573.         id: myRect
     
574.         width: 100; height: 100
     
575.         color: "red"
     
576.         SequentialAnimation {
     
577.             running: true;
     
578.             NumberAnimation {target: myRect;to: 50; duration: 1000; properties: "x"; }
     
579.             PauseAnimation { duration: 5000 } // 延迟100毫秒
     
580.             NumberAnimation {target: myRect; to: 50; duration: 1000; properties: "y"; }
     
581.         }
     
582.     }
     
583. }
     
584. 
     
585. 
     
586. 34. SmoothedAnimation
     
587. 
     
588. 平滑过度
     
589. Rectangle {
     
590.     width: 800; height: 600
     
591.     color: "blue"
     
592.     Rectangle {
     
593.         width: 60; height: 60
     
594.         x: rect1.x - 5; y: rect1.y - 5
     
595.         color: "green"
     
596.         Behavior on x { SmoothedAnimation { velocity: 200 } }
     
597.         Behavior on y { SmoothedAnimation { velocity: 200 } }
     
598.     }
     
599.     Rectangle {
     
600.         id: rect1
     
601.         width: 50; height: 50
     
602.         color: "red"
     
603.     }
     
604.     focus: true
     
605.     Keys.onRightPressed: rect1.x = rect1.x + 100
     
606.     Keys.onLeftPressed: rect1.x = rect1.x - 100
     
607.     Keys.onUpPressed: rect1.y = rect1.y - 100
     
608.     Keys.onDownPressed: rect1.y = rect1.y + 100
     
609. }
     
610. 
     
611. 
     
612. 35. SpringAnimation
     
613. 
     
614. 平滑的过度过程，在动画结束的时候有种弹性的效果
     
615. 
     
616. Item {
     
617.     width: 300; height: 300
     
618.     Rectangle {
     
619.         id: rect
     
620.         width: 50; height: 50
     
621.         color: "red"
     
622.         Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
     
623.         Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
     
624.     }
     
625.     MouseArea {
     
626.         anchors.fill: parent
     
627.         onClicked: {
     
628.             rect.x = mouse.x - rect.width/2
     
629.             rect.y = mouse.y - rect.height/2
     
630.         }
     
631.     }
     
632. }
     
633. 
     
634. 
     
635. 36. PropertyAction
     
636. 
     
637. 主要是在动画过程中直接的改变一个属性
     
638. transitions: Transition {
     
639.     ...
     
640.     PropertyAction { target: theImage; property: "smooth"; value: true }
     
641.     ...
     
642. }
     
643. 
     
644. 38. ScriptAction
     
645. 
     
646. 在动画过程中嵌入脚本的调用
     
647. SequentialAnimation {
     
648.     NumberAnimation { ... }
     
649.     ScriptAction { script: doSomething(); }
     
650.     NumberAnimation { ... }
     
651. }
     
652. 
     
653. 
     
654. 39. Transition
     
655. 
     
656. Rectangle {
     
657.     id: rect
     
658.     width: 100; height: 100
     
659.     color: "red"
     
660.     MouseArea {
     
661.         id: mouseArea
     
662.         anchors.fill: parent
     
663.     }
     
664.     states: State {
     
665.         name: "moved"; when: mouseArea.pressed
     
666.         PropertyChanges { target: rect; x: 50; y: 50 }
     
667.     }
     
668.     transitions: Transition {
     
669.         NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
     
670.     }
     
671. }
     
672. 
     
673. 
     
674. 40. Binding
     
675. 
     
676. Item {
     
677.     width: 300; height: 300
     
678.     Text {id: app; text: "xxxfa"}
     
679.     TextEdit { id: myTextField; text: "Please type here..." }
     
680.     // 把myTextField和app的enteredText属性进行绑定
     
681.     Binding { target: app; property: "enteredText"; value: myTextField.text }
     
682. }
     
683. 
     
684. 
     
685. 41. ListModel
     
686. 
     
687. 直接看效果
     
688. Rectangle {
     
689.     width: 200; height: 200
     
690.     ListModel {
     
691.         id: fruitModel
     
692.         ListElement {
     
693.             name: "Apple"
     
694.             cost: 2.45
     
695.         }
     
696.         ListElement {
     
697.             name: "Orange"
     
698.             cost: 3.25
     
699.         }
     
700.         ListElement {
     
701.             name: "Banana"
     
702.             cost: 1.95
     
703.         }
     
704.     }
     
705.     Component {
     
706.         id: fruitDelegate
     
707.         Row {
     
708.             spacing: 10
     
709.             Text { text: name }
     
710.             Text { text: '$' + cost }
     
711.         }
     
712.     }
     
713.     ListView {
     
714.         anchors.fill: parent
     
715.         model: fruitModel
     
716.         delegate: fruitDelegate
     
717.     }
     
718. }
     
719. 
     
720. 42. ListElement
     
721. 
     
722. 请参照ListModel
     
723. 
     
724. 43. VisualItemModel
     
725. 
     
726. 把可视化图元添加到链表试图
     
727. Rectangle {
     
728.     width: 100; height: 100;
     
729.     VisualItemModel {
     
730.         id: itemModel
     
731.         Rectangle { height: 30; width: 80; color: "red" }
     
732.         Rectangle { height: 30; width: 80; color: "green" }
     
733.         Rectangle { height: 30; width: 80; color: "blue" }
     
734.     }
     
735.     ListView {
     
736.         anchors.fill: parent
     
737.         model: itemModel
     
738.     }
     
739. }
     
740. 
     
741. 
     
742. 44. VisualDataModel
     
743. 
     
744. 看下面效果
     
745. Rectangle {
     
746.     width: 200; height: 100
     
747.     VisualDataModel {
     
748.         id: visualModel
     
749.         model: ListModel {
     
750.             ListElement { name: "Apple" }
     
751.             ListElement { name: "Orange" }
     
752.         }
     
753.         delegate: Rectangle {
     
754.             height: 25
     
755.             width: 100
     
756.             Text { text: "Name: " + name}
     
757.         }
     
758.     }
     
759.     ListView {
     
760.         anchors.fill: parent
     
761.         model: visualModel
     
762.     }
     
763. }
     
764. 
     
765. 
     
766. 45. Package
     
767. 
     
768. 具体请参考
     
769. declarative/modelviews/package
     
770. 
     
771. 
     
772. 46. XmlListModel XmlRole
     
773. 
     
774. 
     
775. 从网络获取xml，暂时没有测试成功
     
776. 
     
777. 47. ListView
     
778. 
     
779. 参考 ListModel VisualDataModel
     
780. 
     
781. 
     
782. 48. GridView
     
783. 
     
784. 看效果
     
785. Rectangle {
     
786.     width: 200; height: 400;
     
787.     ListModel {
     
788.         id: fruitModel
     
789.         ListElement {
     
790.             name: "Apple"
     
791.             cost: 2.45
     
792.         }
     
793.         ListElement {
     
794.             name: "Orange"
     
795.             cost: 3.25
     
796.         }
     
797.         ListElement {
     
798.             name: "Banana"
     
799.             cost: 1.95
     
800.         }
     
801.     }
     
802.     GridView {
     
803.         anchors.fill: parent
     
804.         model: fruitModel
     
805.         delegate: Column{
     
806.             Text {text:"name" + name}
     
807.             Text {text:"cost"+ cost}
     
808.         }
     
809.     }
     
810. }
     
811. 
     
812. 
     
813. 
     
814. 49．PathView Path
     
815. 
     
816. 看例子
     
817. 
     
818. Rectangle {
     
819.     width: 200; height: 400;
     
820.     ListModel {
     
821.         id: fruitModel
     
822.         ListElement {
     
823.             name: "Apple"
     
824.             cost: 2.45
     
825.         }
     
826.         ListElement {
     
827.             name: "Orange"
     
828.             cost: 3.25
     
829.         }
     
830.         ListElement {
     
831.             name: "Banana"
     
832.             cost: 1.95
     
833.         }
     
834.     }
     
835.     PathView {
     
836.         anchors.fill: parent
     
837.         model: fruitModel
     
838.         delegate: Column{
     
839.             Text {text:"name" + name}
     
840.             Text {text:"cost"+ cost}
     
841.         }
     
842.         path:Path{
     
843.             startX: 120; startY: 100
     
844.             PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
     
845.             PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
     
846.         }
     
847.     }
     
848. }
     
849. 
     
850. 
     
851. 
     
852. 50．PathLine
     
853. 
     
854. 具体的看运行的例子
     
855. 
     
856. Rectangle {
     
857.     width: 200; height: 400;
     
858.     ListModel {
     
859.         id: fruitModel
     
860.         ListElement {
     
861.             name: "Apple"
     
862.             cost: 2.45
     
863.         }
     
864.         ListElement {
     
865.             name: "Orange"
     
866.             cost: 3.25
     
867.         }
     
868.         ListElement {
     
869.             name: "Banana"
     
870.             cost: 1.95
     
871.         }
     
872.     }
     
873.     PathView {
     
874.         anchors.fill: parent
     
875.         model: fruitModel
     
876.         delegate: Column{
     
877.             Text {text:"name" + name}
     
878.             Text {text:"cost"+ cost}
     
879.         }
     
880.         path:Path{
     
881.             startX: 150; startY: 120
     
882.             PathLine { x: 200; y: 80; }
     
883.             PathLine { x: 100; y: 80; }
     
884.             PathLine { x: 150; y: 120; }
     
885.         }
     
886.     }
     
887. }
     
888. 
     
889. 51．PathQuad
     
890. 
     
891. 参考 PathView Path
     
892. 
     
893. 52．PathCubic
     
894. 
     
895. 
     
896. 还要看
     
897. 
     
898. 53．PathAttribute
     
899. 
     
900. 可以直接针对一些属性进行改变
     
901. Rectangle {
     
902.     width: 200; height: 400;
     
903.     ListModel {
     
904.         id: fruitModel
     
905.         ListElement {
     
906.             name: "Apple"
     
907.             cost: 2.45
     
908.         }
     
909.         ListElement {
     
910.             name: "Orange"
     
911.             cost: 3.25
     
912.         }
     
913.         ListElement {
     
914.             name: "Banana"
     
915.             cost: 1.95
     
916.         }
     
917.     }
     
918.     PathView {
     
919.         anchors.fill: parent
     
920.         model: fruitModel
     
921.         delegate:
     
922.         Item {
     
923.             id: delitem;
     
924.             width: 80; height: 80;
     
925.             Column{
     
926.                 // 这里使用图片试试
     
927.                 Rectangle {
     
928.                     width: 40; height: 40;
     
929.                     scale: delitem.scale;
     
930.                     color: "red"
     
931.                 }
     
932.                 Text {text:"name" + name}
     
933.                 Text {text:"cost"+ cost}
     
934.             }
     
935.         }
     
936.         //
     
937.         path: Path {
     
938.             startX: 120; startY: 100
     
939.             PathAttribute { name: "Scale"; value: 1.0 }
     
940.             PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
     
941.             PathAttribute { name: "Scale"; value: 0.3 }
     
942.             PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
     
943.         }
     
944.     }
     
945. }
     
946. 
     
947. 54．PathPercent
     
948. 
     
949. 具体请看QML文档
     
950. 
     
951. 
     
952. 55．WebView
     
953. 
     
954. import QtWebKit 1.0
     
955. WebView {
     
956.     url: "http://www.nokia.com"
     
957.     preferredWidth: 490
     
958.     preferredHeight: 400
     
959.     scale: 0.5
     
960.     smooth: false
     
961. }
     
962. 
     
963. 
     
964. 56 Column
     
965. 横向排列
     
966. Rectangle{
     
967.     width: 100; height: 100;
     
968.     // 纵向排列
     
969.     Column {
     
970.         spacing: 2
     
971.         Rectangle { color: "red"; width: 50; height: 50 }
     
972.         Rectangle { color: "green"; width: 20; height: 50 }
     
973.         Rectangle { color: "blue"; width: 50; height: 20 }
     
974.     }
     
975. }
     
976. 
     
977. 
     
978. 57 Row
     
979. 
     
980. Rectangle{
     
981.     width: 100; height: 100;
     
982.     // 横向排列
     
983.     Row {
     
984.         spacing: 2
     
985.         Rectangle { color: "red"; width: 50; height: 50 }
     
986.         Rectangle { color: "green"; width: 20; height: 50 }
     
987.         Rectangle { color: "blue"; width: 50; height: 20 }
     
988.     }
     
989. }
     
990. 
     
991. 
     
992. 58 Grid
     
993. 
     
994. Rectangle{
     
995.     width: 100; height: 100;
     
996.     // 网格排列
     
997.     Grid {
     
998.         columns: 3
     
999.         spacing: 2
     
1000.         Rectangle { color: "red"; width: 50; height: 50 }
      
1001.         Rectangle { color: "green"; width: 20; height: 50 }
      
1002.         Rectangle { color: "blue"; width: 50; height: 20 }
      
1003.         Rectangle { color: "cyan"; width: 50; height: 50 }
      
1004.         Rectangle { color: "magenta"; width: 10; height: 10 }
      
1005.     }
      
1006. }
      
1007. 
      
1008. 59 Flow
      
1009. 
      
1010. Rectangle{
      
1011.     width: 100; height: 100;
      
1012.     // 网格排列
      
1013.     Flow {
      
1014.         spacing: 2
      
1015.         width: 100; height: 100;
      
1016.         Rectangle { color: "red"; width: 50; height: 50 }
      
1017.         Rectangle { color: "green"; width: 20; height: 50 }
      
1018.         Rectangle { color: "blue"; width: 50; height: 20 }
      
1019.         Rectangle { color: "cyan"; width: 50; height: 50 }
      
1020.         Rectangle { color: "magenta"; width: 10; height: 10 }
      
1021.     }
      
1022. }
      
1023. 
      
1024. 60 Connections
      
1025. 
      
1026. 下面是3中情况下会使用的，具体的不好翻译
      
1027. Multiple connections to the same signal are required
      
1028. 有多个连接要连接到相同的信号时
      
1029. Creating connections outside the scope of the signal sender
      
1030. 创建的连接在范围之外
      
1031. Connecting to targets not defined in QML
      
1032. 创建的连接没有在QML中定义的
      
1033. 
      
1034. Rectangle{
      
1035.     width: 100; height: 100;
      
1036.     MouseArea {
      
1037.         id: area
      
1038.         anchors.fill: parent;
      
1039.     }
      
1040.     Connections {
      
1041.         target: area
      
1042.         onClicked: { console.log(" ok");}
      
1043.     }
      
1044. }
      
1045. 
      
1046. 
      
1047. 61 Component
      
1048. 
      
1049. 组件是可以重用的QML元素，具体还是看QML的文档翻译不是很好
      
1050. 
      
1051. Item {
      
1052.     width: 100; height: 100
      
1053.     // 定义一个组件他包含一个10x10的红色矩形
      
1054.     Component {
      
1055.         id: redSquare
      
1056.         Rectangle {
      
1057.             color: "red"
      
1058.             width: 10
      
1059.             height: 10
      
1060.         }
      
1061.     }
      
1062.     // 动态的载入一个组件
      
1063.     Loader { sourceComponent: redSquare }
      
1064.     Loader { sourceComponent: redSquare; x: 20 }
      
1065. }
      
1066. 
      
1067. 
      
1068. 62 Timer
      
1069. 
      
1070. Item {
      
1071.     width: 200; height: 40;
      
1072.     // 和QTimer 差不多
      
1073.     Timer {
      
1074.         interval: 500; running: true; repeat: true
      
1075.         onTriggered: time.text = Date().toString() // 使用javascript获取系统时间
      
1076.     }
      
1077.     Text { id: time }
      
1078. }
      
1079. 
      
1080. 
      
1081. 63 QtObject
      
1082. 
      
1083. 他是不可见的只有objectName一个属性
      
1084. 通过这个属性我们可以在c++中找到我们想要的对象
      
1085. 
      
1086. // MyRect.qml
      
1087. import Qt 4.7
      
1088. Item {
      
1089.     width: 200; height: 200
      
1090.     Rectangle {
      
1091.         anchors.fill: parent
      
1092.         color: "red"
      
1093.         objectName: "myRect"
      
1094.     }
      
1095. }
      
1096. 
      
1097. // main.cpp
      
1098. QDeclarativeView view;
      
1099. view.setSource(QUrl::fromLocalFile("MyRect.qml"));
      
1100. view.show();
      
1101. QDeclarativeItem *item = view.rootObject()->findChild<QDeclarativeItem*>("myRect");
      
1102. if (item)
      
1103.     item->setProperty("color", QColor(Qt::yellow));
      
1104. 
      
1105. 
      
1106. 
      
1107. 64 Qt
      
1108. 
      
1109. 提供全局有用的函数和枚举，具体的看QML文档
      
1110. 
      
1111. 
      
1112. 65. WorkerScript
      
1113. 
      
1114. 使用它可以把操作放到一个新的线程中，使得它在后台运行而不影响主GUI
      
1115. 具体可以看QML中它的文档
      
1116. 
      
1117. 66. Loader
      
1118. 
      
1119. 可以参考Component
      
1120. 还有QML中的文档
      
1121. 
      
1122. 
      
1123. 67 Repeater
      
1124. 
      
1125. 他可以创建很多相似的组件，QML中还有几个例子
      
1126. 
      
1127. Row {
      
1128.     Repeater {
      
1129.         model: 3
      
1130.         Rectangle {
      
1131.             width: 100; height: 40
      
1132.             border.width: 1
      
1133.             color: "yellow"
      
1134.         }
      
1135.     }
      
1136. }
      
1137. 
      
1138. 68 SystemPalette
      
1139. 
      
1140. 具体看效果和文档
      
1141. Rectangle {
      
1142.     SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
      
1143.     width: 640; height: 480
      
1144.     color: myPalette.window
      
1145.     Text {
      
1146.         anchors.fill: parent
      
1147.         text: "Hello!"; color: myPalette.windowText
      
1148.     }
      
1149. }
      
1150. 
      
1151. 
      
1152. 69. FontLoader
      
1153. 
      
1154. 
      
1155. 载入一种字体，可以是网络上的，也可以是本地的
      
1156. Column {
      
1157.     FontLoader { id: fixedFont; name: "Courier" }
      
1158.     FontLoader { id: webFont; source: "http://www.mysite.com/myfont.ttf" }
      
1159.     Text { text: "Fixed-size font"; font.family: fixedFont.name }
      
1160.     Text { text: "Fancy font"; font.family: webFont.name }
      
1161. }
      
1162. 
      
1163. 70 LayoutItem
      
1164. 
      
1165. 不清楚
      
1166. 
      
1167. 71 Scale
      
1168. 
      
1169. 对缩放的控制
      
1170. Rectangle {
      
1171.     width: 100; height: 100
      
1172.     color: "blue"
      
1173.     Rectangle{
      
1174.         x: 50; y: 50;
      
1175.         width: 20; height: 20;
      
1176.         color: "red"
      
1177.         // 这里是在当前矩形的中间位置沿x轴进行3倍缩放
      
1178.         transform: Scale { origin.x: 10; origin.y: 10; xScale: 3}
      
1179.     }
      
1180. }
      
1181. 
      
1182. 
      
1183. 72 Rotation
      
1184. Rectangle {
      
1185.     width: 100; height: 100
      
1186.     color: "blue"
      
1187.     // 绕位置25,25 旋转45度
      
1188.     transform: Rotation { origin.x: 25; origin.y: 25; angle: 45}
      
1189. }
      
1190. 
      
1191. 
      
1192. 73 Translate
      
1193. 
      
1194. Row {
      
1195.     Rectangle {
      
1196.         width: 100; height: 100
      
1197.         color: "blue"
      
1198.         // 沿y轴正方向移动20个像素
      
1199.         transform: Translate { y: 20 }
      
1200.     }
      
1201.     Rectangle {
      
1202.         width: 100; height: 100
      
1203.         color: "red"
      
1204.         // 沿y轴负方向移动20个像素
      
1205.         transform: Translate { y: -20 }
      
1206.     }
      
1207. }