QML--学习第二篇

QML的学习，一直找不到一个很好的参考资料，七零八落，找不到一个渐进的资料。希望自己学习的过程，给大家带来一些帮助。

QML之组件：

依然是main.cpp(当然，没有main.cpp），直接可以使用qmlviewer.exe 直接打开 xml当然可以）

[cpp]  view plain  copy

 print ?

1. #include <QtWidgets/qapplication.h>  
2. #include <qtdeclarative/QDeclarativeview.h>  
3. int main(int argc, char *argv[])  
4. {  
5.     QApplication a(argc, argv);  
6.     QDeclarativeView *m_qmlView = new QDeclarativeView();   
7.     m_qmlView->setSource(QUrl::fromLocalFile("source.qml"));  //load qml file  
8.     m_qmlView->show();  
9.     return a.exec();  
10. }  

我们给我们首先调用的qml为source.qml

[cpp]  view plain  copy

 print ?

1. import QtQuick 1.0  
2.   
3. Rectangle {  
4.     id: page  
5.     width: 320; height: 240  
6.     color: "lightgray"  
7.   
8.     Text {  
9.         id: helloText  
10.         text: "Hello world!"  
11.         y: 30  
12.         anchors.horizontalCenter: page.horizontalCenter  //居中显示  
13.         font.pointSize: 24; font.bold: true              //字体大小  
14.     }  
15.   
16.     Grid {                                               //grid 摆放 下面的6个 Cell元素  
17.         id: colorPicker  
18.         x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4  
19.         rows: 2; columns: 3; spacing: 3                  //2行 3列  
20.   
21.         Cell { cellColor: "red"; onClicked: helloText.color = cellColor } //响应 clicked消息，设置 id为 helloText 的颜色值  
22.         Cell { cellColor: "green"; onClicked: helloText.color = cellColor }  
23.         Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }  
24.         Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }  
25.         Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }  
26.         Cell { cellColor: "black"; onClicked: helloText.color = cellColor }  
27.     }  
28. }  

source.qml使用了 一个非标准的 空间Cell, Cell是另外一个qml文件提供的自定义控件

Cell.qml

[cpp]  view plain  copy

 print ?

1. import QtQuick 1.0  
2.   
3. Item {  
4.     id: container  
5.     property alias cellColor: rectangle.color  
6.     signal clicked(color cellColor)                 //clicked 消息  
7.   
8.     width: 40; height: 25  
9.   
10.     Rectangle {  
11.         id: rectangle  
12.         border.color: "white"  
13.         anchors.fill: parent  
14.     }  
15.   
16.     MouseArea {                                              
17.         anchors.fill: parent  
18.         onClicked: container.clicked(container.cellColor) //响应 clicked消息  
19.     }  
20. }  

库文件：Qt5Declaratived.lib    Qt5Guid.lib   Qt5Widgetsd.lib    Qt5Cored.lib

环境：    VS2010 + win7-64位 + Qt5.1.1

运行效果：选择不同的颜色块，字体显示不同颜色

               

注： qmlviewer.exe 目录为 Qt的bin目录下 （我的相对目录为 Qt5.1.1/5.1.1/msvc2010/bin）

FROM: http://blog.youkuaiyun.com/qyee16/article/details/17272057