RTY 實(shí)踐出真知

前段時(shí)間接觸了一下QML，深深地被這門強(qiáng)大易用的語言所吸引。

QML的語法類似CSS，可以引入javascript作為邏輯，還能夠和C++對(duì)象交互。

QML帶來的好處至少有以下幾點(diǎn)：

1. 分工更明確：設(shè)計(jì)師可以專攻QML制作UI，C++工程師也能專注于自己的本職工作。
2. 開發(fā)更高效：重新編寫的QML不需要編譯（因?yàn)樗且婚T腳本語言），所以只需要刷新一下你的QML Viewer就可以了。
3. 界面更精美：QML開發(fā)和網(wǎng)頁開發(fā)很相似，所以我們可以比較容易地把一個(gè)精美的網(wǎng)頁效果移植到本地程序。
4. 風(fēng)格更一致：Qt本身是一個(gè)跨平臺(tái)的開發(fā)框架，所以我們?cè)赪indow XP上看到的是一個(gè)樣子，Win7上看到的是另一個(gè)樣子，到了Ubuntu或者M(jìn)ac更是變了模樣，使用QML可以屏蔽這些不一致。

 

我們將這個(gè)QML文件命名為TextBox。這個(gè)QML文件主要是實(shí)現(xiàn)搜索框中的文本框。

輸入以下代碼：

Qml代碼  

1. import Qt 4.7  
2.   
3. FocusScope {  
4.     id: focusScope  
5.     width: 600; height: 40  
6.     focus:true  
7.   
8.     BorderImage {  
9.         source: "../images/lineedit-bg.png"  
10.         width: parent.width; height: parent.height  
11.         border { left: 4; top: 4; right: 4; bottom: 4 }  
12.     }  
13.   
14.     Text {  
15.         id: typeSomething  
16.         anchors.fill: parent; anchors.leftMargin: 8  
17.         verticalAlignment: Text.AlignVCenter  
18.         text: "\u8BF7\u8F93\u5165\u7F51\u5740"  
19.         color: "gray"  
20.     }  
21.   
22.     MouseArea {  
23.         anchors.fill: parent  
24.         onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel(); }  
25.     }  
26.   
27.     TextInput {  
28.         id: textInput  
29.         anchors { left: parent.left; leftMargin: 8; right: clear.left; rightMargin: 8; verticalCenter: parent.verticalCenter }  
30.         focus: true  
31.         font.pixelSize:20  
32.     }  
33.   
34.     Image {  
35.         id: clear  
36.         anchors { right: parent.right; rightMargin: 8; verticalCenter: parent.verticalCenter }  
37.         source: "../images/clear.png"  
38.         opacity: 0  
39.   
40.         MouseArea {  
41.             anchors.fill: parent  
42.             onClicked: { textInput.text = ''; focusScope.focus = true; textInput.openSoftwareInputPanel(); }  
43.         }  
44.     }  
45.   
46.     states: State {  
47.         name: "hasText"; when: textInput.text != ''  
48.         PropertyChanges { target: typeSomething; opacity: 0 }  
49.         PropertyChanges { target: clear; opacity: 1 }  
50.     }  
51.   
52.     transitions: [  
53.         Transition {  
54.             from: ""; to: "hasText"  
55.             NumberAnimation { exclude: typeSomething; properties: "opacity" }  
56.         },  
57.         Transition {  
58.             from: "hasText"; to: ""  
59.             NumberAnimation { properties: "opacity" }  
60.         }  
61.     ]  
62. }  

 你也許會(huì)注意到，在Text的text屬性中，我輸入的是utf編碼的漢字。事實(shí)上，想要在QML文件里顯示中文還是有一點(diǎn)小麻煩的，要么就是用utf編碼過的漢字，要么使用Qt翻譯家來轉(zhuǎn)換。直接在QML中輸入中文將無法顯示。
 接著，新建ShadowRectangle文件。該文件實(shí)現(xiàn)的是陰影效果。代碼如下：

Qml代碼  

1. import Qt 4.7  
2.   
3. Item {  
4.     property alias color : rectangle.color  
5.   
6.     BorderImage {  
7.         anchors.fill: rectangle  
8.         anchors { leftMargin: 0; topMargin: 0; rightMargin: -8; bottomMargin: -8 }  
9.         border { left: 10; top: 10; right: 10; bottom: 10 }  
10.         source: "../images/shadow.png"; smooth: true  
11.     }  
12.   
13.     Rectangle { id: rectangle; anchors.fill: parent; radius:5}  
14. }  

 最后新建main.qml文件，該文件實(shí)現(xiàn)的是整個(gè)搜索欄的效果。其代碼如下：

Qml代碼  

1. import Qt 4.7  
2.   
3. Rectangle {  
4.     id: page  
5.     width: 614; height: 54  
6.     color: "#7bffffff"  
7.     radius:5  
8.   
9.     MouseArea {  
10.         anchors.fill: parent  
11.         onClicked: page.focus = false;  
12.     }  
13.     ShadowRectangle {  
14.         color: "#434343"  
15.         transformOrigin: "Center"  
16.         opacity: 0.97  
17.         visible: true  
18.         anchors.centerIn: parent; width: 610; height: 50  
19.     }  
20.     TextBox {  
21.         id: search;  
22.         visible: true  
23.         opacity: 1  
24.         anchors.centerIn: parent  
25.     }  
26. }  

 QML的代碼通俗易懂，這里就不去解釋每一行代碼的意思了。

好的，下面讓我們把QML制作的搜索欄放置到桌面程序的窗體上。

在你的floatbox.h中添加一個(gè)私有變量：

Cpp代碼  

1. private:  
2.     QDeclarativeView *ui;  

 然后在你的floatbox.cpp的構(gòu)造函數(shù)中輸入以下代碼：

Cpp代碼  

1. // 使窗體透明而控件不透明  
2. setWindowFlags(Qt::FramelessWindowHint);  
3. setAttribute(Qt::WA_TranslucentBackground, true);  
4. setStyleSheet("background:transparent;");  
5.   
6. ui = new QDeclarativeView;  
7. ui->setSource(QUrl("qrc:/resources/qml/main.qml"));  
8. setCentralWidget(ui);  
9. resize(QSize(630, 60));  

 細(xì)心的你可以發(fā)現(xiàn)，我將qml文件加入了Qt的資源系統(tǒng)。這里要說明一點(diǎn)，非常重要：

在QML文件中如果引入了其他文件（包括js文件、圖片文件等），要么都加入Qt的資源系統(tǒng)，要么都不加入，因?yàn)镼t的資源文件無法和本地文件相互訪問。

所以，如果你也和我一樣新建了qrc文件，請(qǐng)將qml文件和圖片文件一并加入到資源系統(tǒng)中去。如下圖：

 到了這一步，我們的搜索工具欄差不多要完工了，想要運(yùn)行，千萬不要忘記在pro文件添加declarative模塊。

Cpp代碼  

1. QT       += core gui declarative  

 好的，現(xiàn)在你就可以按下ctrl+R欣賞一下成果了。

最后，老規(guī)矩，附上源代碼。