如何创建QML自定义元素？

有时Qt中Declarativ模块提供元素不够用，这时我们可以根据自己需要创建自定义的元素。下面的例子
我们自己创建了一个Line的自定义元素。
qmlapp.pro

1. QT+= core gui declarative
   
2. 
   
3. TARGET = qmlapp
   
4. TEMPLATE = app
   
5. 
   
6. SOURCES += main.cpp
   
7. HEADERS+= line.h
   
8. OTHER_FILES += ui.qml

复制代码

新的元素需要继承自QDeclarativeItem，通过Q_PROPERTY我们可以为新的元素定义新的属性，
NOTIFY是用来通知绑定到这个属性的其他属性更新值。

line.h

1. #ifndef LINE_H
   
2. #define LINE_H
   
3. 
   
4. #include <QDeclarativeItem>
   
5. #include <QPainter>
   
6. 
   
7. class Line : public QDeclarativeItem
   
8. {
   
9. Q_OBJECT
   
10. Q_PROPERTY(int x1 READ x1 WRITE setX1 NOTIFY x1Changed);
    
11. Q_PROPERTY(int y1 READ y1 WRITE setY1 NOTIFY y1Changed);
    
12. Q_PROPERTY(int x2 READ x2 WRITE setX2 NOTIFY x2Changed);
    
13. Q_PROPERTY(int y2 READ y2 WRITE setY2 NOTIFY y2Changed);
    
14. Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged);
    
15. Q_PROPERTY(int penWidth READ penWidth WRITE setPenWidth NOTIFY penWidthChanged);
    
16. 
    
17. public:
    
18. Line(QDeclarativeItem *parent = 0) :
    
19. QDeclarativeItem(parent), m_x1(0), m_y1(0), m_x2(0), m_y2(0),
    
20. m_color(Qt::black), m_penWidth(1)
    
21. {
    
22. // Important, otherwise the paint method is never called
    
23. setFlag(QGraphicsItem::ItemHasNoContents, false);
    
24. }
    
25. 
    
26. void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
    
27. {
    
28. QPen pen(m_color, m_penWidth);
    
29. painter->setPen(pen);
    
30. 
    
31. if(smooth() == true) {
    
32. painter->setRenderHint(QPainter::Antialiasing, true);
    
33. }
    
34. 
    
35. int x = qMin(m_x1, m_x2) - m_penWidth/2;
    
36. int y = qMin(m_y1, m_y2) - m_penWidth/2;
    
37. 
    
38. painter->drawLine(m_x1 - x, m_y1 - y, m_x2 - x, m_y2 - y);
    
39. }
    
40. 
    
41. // Get methods
    
42. int x1() const { return m_x1; }
    
43. int y1() const { return m_y1; }
    
44. int x2() const { return m_x2; }
    
45. int y2() const { return m_y2; }
    
46. QColor color() const { return m_color; }
    
47. int penWidth() const { return m_penWidth; }
    
48. 
    
49. // Set methods
    
50. void setX1(int x1) {
    
51. if(m_x1 == x1) return;
    
52. m_x1 = x1;
    
53. updateSize();
    
54. emit x1Changed();
    
55. update();
    
56. }
    
57. 
    
58. void setY1(int y1) {
    
59. if(m_y1 == y1) return;
    
60. m_y1 = y1;
    
61. updateSize();
    
62. emit y1Changed();
    
63. update();
    
64. }
    
65. 
    
66. void setX2(int x2) {
    
67. if(m_x2 == x2) return;
    
68. m_x2 = x2;
    
69. updateSize();
    
70. emit x2Changed();
    
71. update();
    
72. }
    
73. 
    
74. void setY2(int y2) {
    
75. if(m_y2 == y2) return;
    
76. m_y2 = y2;
    
77. updateSize();
    
78. emit x2Changed();
    
79. update();
    
80. }
    
81. 
    
82. void setColor(const QColor &color) {
    
83. if(m_color == color) return;
    
84. m_color = color;
    
85. emit colorChanged();
    
86. update();
    
87. }
    
88. 
    
89. void setPenWidth(int newWidth) {
    
90. if(m_penWidth == newWidth) return;
    
91. m_penWidth = newWidth;
    
92. updateSize();
    
93. emit penWidthChanged();
    
94. update();
    
95. }
    
96. 
    
97. signals:
    
98. void x1Changed();
    
99. void y1Changed();
    
100. void x2Changed();
     
101. void y2Changed();
     
102. void colorChanged();
     
103. void penWidthChanged();
     
104. 
     
105. protected:
     
106. void updateSize() {
     
107. setX(qMin(m_x1, m_x2) - m_penWidth/2);
     
108. setY(qMin(m_y1, m_y2) - m_penWidth/2);
     
109. setWidth(qAbs(m_x2 - m_x1) + m_penWidth);
     
110. setHeight(qAbs(m_y2 - m_y1) + m_penWidth);
     
111. }
     
112. 
     
113. protected:
     
114. int m_x1;
     
115. int m_y1;
     
116. int m_x2;
     
117. int m_y2;
     
118. QColor m_color;
     
119. int m_penWidth;
     
120. };
     
121. 
     
122. QML_DECLARE_TYPE(Line)
     
123. 
     
124. #endif // LINE_H

复制代码

在main函数中，我们向QML系统中的版本号为1.0的自定义组件库CustomComponents中注册一个名为Line的QML元素。
main.cpp

1. #include "line.h"
   
2. #include <QApplication>
   
3. #include <QDeclarativeView>
   
4. 
   
5. int main(int argc, char *argv[])
   
6. {
   
7. QApplication a(argc, argv);
   
8. 
   
9. qmlRegisterType<Line>("CustomComponents", 1, 0, "Line");
   
10. 
    
11. QDeclarativeViewview;
    
12. view.setSource(QUrl("./ui.qml"));
    
13. view.setResizeMode(QDeclarativeView::SizeRootObjectToView);
    
14. 
    
15. #if defined(Q_WS_S60) || defined(Q_WS_MAEMO)
    
16. view.showMaximized();
    
17. #else
    
18. view.setGeometry(100,100, 800, 480);
    
19. view.show();
    
20. #endif
    
21. return a.exec();
    
22. }

复制代码

在需要用到Line元素的QML文件中，我们需要导入1.0版本的CustomComponents库，这里面将包含我们的自定义元素Line

1. ui.qml
   
2. import CustomComponents 1.0
   
3. import Qt 4.7
   
4. 
   
5. Rectangle {
   
6. property bool evenClick : false
   
7. 
   
8. anchors.fill: parent; color: "lightsteelblue"
   
9. 
   
10. Line {
    
11. id: diagonalLine
    
12. 
    
13. anchors.fill: parent
    
14. 
    
15. Behavior on x1 { NumberAnimation { duration: 1000 } }
    
16. Behavior on y1 { NumberAnimation { duration: 1000 } }
    
17. Behavior on x2 { NumberAnimation { duration: 1000 } }
    
18. Behavior on y2 { NumberAnimation { duration: 1000 } }
    
19. 
    
20. x1: parent.x + 20; y1: parent.height / 2
    
21. x2: parent.width - 20; y2: parent.height / 2
    
22. color: "tomato"; penWidth: 3; smooth: true
    
23. }
    
24. 
    
25. MouseArea {
    
26. anchors.fill: parent
    
27. onClicked: {
    
28. if(evenClick) { diagonalLine.x1 = mouseX; diagonalLine.y1 = mouseY }
    
29. else { diagonalLine.x2 = mouseX; diagonalLine.y2 = mouseY }
    
30. evenClick = !evenClick
    
31. }
    
32. }
    
33. 
    
34. Text {
    
35. id: textX1Y1
    
36. anchors.left: parent.left; anchors.top: parent.top
    
37. text: "x1: " + diagonalLine.x1 + " y1: " + diagonalLine.y1
    
38. }
    
39. 
    
40. Text {
    
41. anchors.left: parent.left; anchors.top: textX1Y1.bottom; anchors.topMargin: 10
    
42. text: "x2: " + diagonalLine.x2 + " y2: " + diagonalLine.y2
    
43. }
    
44. }