Qt Quick

Qt Quick及QML學習筆記(一)什麼是Qt

什麼是Qt?

Qt是Nokia底下的一間子公司的跨平台軟體框架,理論上可以作到只要寫一次,稍微調整一下就可以編出在不同作業系統、手機等地方跑的執行檔。是Nokia未來十年起死回生的關鍵

Qt念作Cute,也可以拆開念作Q-T,至於想要把他念成Quit的人請左轉慢走不送。

更詳細的資料請自行查閱Wikipedia: Qt,我大概有3/4看不懂他在寫什麼(縮)

什麼是Qt Quick?

Qt Quick是Qt的UI排版引擎之類的,採用新定義的QML寫作,可以讓像我這樣的半路出家、誤入歧途的人也能學得起來。我目前覺得跟我十年前學Flash的感覺很像,GUI工具沒有那麼適合美術,但是程式碼的可讀性大概高十倍。

什麼是QML?

QML是看起來有點像HTML、有點像CSS、又有點像JSON的標記型文體。但是可以連結C++寫出來的元件,自己也可以混用javascript來寫一部分的邏輯。

先來看一段用Qt Creator做出來的Hello World吧:

import QtQuick 1.0

Rectangle {
    width: 360
    height: 360
    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

翻譯成中文是這樣的:
我要一個長方形:寬360、高360。
 裡面要有一個文字區域:位置放在外面的正中間,寫"Hello World"。
 還要有一個滑鼠區域:填滿外面的空間,滑鼠按下去的時候執行Qt.quit()

很好閱讀吧?(或者說,翻譯成中文反而不好閱讀了…)

所以Qt Quick有什麼厲害的?

目前為止,光就排版而言,我覺得有三點很強。至於動畫之類的就留著明天再說…

1. 視覺基本元素很少,分工超明確
 - Item: 各種元素之母,大部分元素都是繼承他的
 - Rectangle: 相當於HTML div,只是更好對齊,也更好移動
 - Text: 放字的容器
 - Image: 放圖的容器
 - BorderImage: 把一張圖片切成九宮格的超方便道具
 - TextEdit: 相當於HTML textarea
 - TextInput: 相當於HTML input,而且可以限制輸入的格式
…但是沒有radio button、沒有dropdown list、沒有checkbox(略

2. 元素的屬性可以擅自計算,也可以直接拉javascript的函數。
width: (table.width - (table.column+1)*table.spacing ) / table.column - 所以可以計算表格裡每一個格子的寬度
 - 上面這一句我沒試過,好像有在哪一個教學檔案裡面用到,大致上概念是這樣子…

3. 元素之間的錨點對齊超簡單
 - 左邊錨點對齊elementB的右邊只要寫anchors.left: elementB.right,這樣子當elementB移動的時候,這個元素也會跟著被拉過去。
 - 甚至於可以把左右的錨點釘在不同元素上,當左右釘上去的錨點同時動作的時候,中間的長度就會自動改變。(請看上面網頁的最下面的那一張圖)

Qt Quick的缺點咧?

雖然Qt Quick的QML很厲害,但是目前有一個很大的罩門:沒有手機。運氣好的話,MeeGo在2011年上半會有手機。但是查查看MeeGo的新聞就知道,這孩子已經當了九個月的放羊的孩子了…

至於Windows桌面軟體的話,我想Visual Studio已經有非常充足的GUI工具了,也有數以百萬計的程式設計師在投入了,何苦學Qt這個比較冷門的新語言呢?

次回預告

明天來講Qt Creator,這是開發Qt用的GUI工具。我目前用到的功能可能只有1/20左右而已,但是我真的覺得他是Visual Basic 3.0之後,讓我最容易上手的整合開發工具。