Qt是用于臺式機(jī)，嵌入式和移動設(shè)備的跨平臺應(yīng)用程序開發(fā)框架。Qt本身不是一門編程語言。它是一個用C++編寫的框架。一個預(yù)處理器，MOC（Meta-Object Compiler，元對象編譯器），被用來擴(kuò)展C++語言的功能，比如信號和插槽。在編譯步驟之前，MOC解析用Qt-extended C++編寫的源文件，并從中生成符合標(biāo)準(zhǔn)的C++源文件。因此，框架本身和使用它的應(yīng)用程序/庫可以被任何標(biāo)準(zhǔn)兼容的C++編譯器編譯，如Clang、GCC、ICC、MinGW和MSVC。

點(diǎn)擊下載Qt最新試用版

一個QML時鐘應(yīng)用程序，它演示了使用ListView類型來顯示ListModel生成的數(shù)據(jù)，以及使用SpringAnimation類型來制作圖像動畫。

Clocks演示了使用ListView類型來顯示ListModel生成的數(shù)據(jù)。模型所使用的委托人被指定為自定義的QML類型，該類型在Clock.qml文件中被指定。

JavaScript方法被用來獲取不同時區(qū)的幾個城市的當(dāng)前時間，QML類型被用來在鐘面上用動畫時鐘指針顯示時間。

運(yùn)行示例

要從Qt Creator中運(yùn)行該示例，請打開歡迎模式并從示例中選擇該示例。如需了解更多信息，請訪問構(gòu)建和運(yùn)行示例。

顯示由列表模型生成的數(shù)據(jù)

在clocks.qml文件中，我們使用Rectangle類型來創(chuàng)建應(yīng)用程序主窗口。

Rectangle {
    id: root
    width: 640; height: 320
    color: "#646464"

我們使用ListView類型來顯示ListModel類型提供的項目列表。

 ListView {
        id: clockview
        anchors.fill: parent
        orientation: ListView.Horizontal
        cacheBuffer: 2000
        snapMode: ListView.SnapOneItem
        highlightRangeMode: ListView.ApplyRange

        delegate: Content.Clock { city: cityName; shift: timeShift }
        model: ListModel {
            ListElement { cityName: "New York"; timeShift: -4 }
            ListElement { cityName: "London"; timeShift: 0 }
            ListElement { cityName: "Oslo"; timeShift: 1 }
            ListElement { cityName: "Mumbai"; timeShift: 5.5 }
            ListElement { cityName: "Tokyo"; timeShift: 9 }
            ListElement { cityName: "Brisbane"; timeShift: 10 }
            ListElement { cityName: "Los Angeles"; timeShift: -8 }
        }
    }

列表元素的定義與其他QML類型一樣，只是它們包含角色定義而不是屬性的集合。角色既定義如何訪問數(shù)據(jù)，又包括數(shù)據(jù)本身。

對于每個列表元素，我們使用cityName角色指定城市名稱，并使用timeShift角色指定時區(qū)，以相對UTC（協(xié)調(diào)世界時）的正負(fù)偏移。

時鐘自定義類型被用作ListView中的delegate，定義的列表項目的視覺外觀。要使用Clock類型，我們添加了一條import語句，用于導(dǎo)入名為content類型所在位置的文件夾：

import "content" as Content

我們使用圖像類型顯示箭頭，以指示用戶是否可以輕拂視圖以在左側(cè)或右側(cè)看到更多時鐘：

 Image {
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        anchors.margins: 10
        source: "content/arrow.png"
        rotation: -90
        opacity: clockview.atXBeginning ? 0 : 0.5
        Behavior on opacity { NumberAnimation { duration: 500 } }
    }

    Image {
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 10
        source: "content/arrow.png"
        rotation: 90
        opacity: clockview.atXEnd ? 0 : 0.5
        Behavior on opacity { NumberAnimation { duration: 500 } }
    }
}

opacity當(dāng)列表視圖位于x軸的起點(diǎn)或終點(diǎn)時，我們使用該屬性隱藏箭頭。

在Clock.qml中，我們定義了一個timeChanged()函數(shù)，其中我們使用JavaScriptDate對象中的方法來獲取UTC中的當(dāng)前時間并將其調(diào)整為正確的時區(qū)：

 function timeChanged() {
        var date = new Date;
        hours = internationalTime ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
        night = ( hours < 7 || hours > 19 )
        minutes = internationalTime ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes()
        seconds = date.getUTCSeconds();
    }

我們使用Timer類型以100毫秒的間隔更新時間：

 Timer {
        interval: 100; running: true; repeat: true;
        onTriggered: clock.timeChanged()
    }

我們在項目類型中使用圖像類型在模擬時鐘面上顯示時間。白天和晚上使用不同的圖像：

Item {
        anchors.centerIn: parent
        width: 200; height: 240

        Image { id: background; source: "clock.png"; visible: clock.night == false }
        Image { source: "clock-night.png"; visible: clock.night == true }

應(yīng)用于圖像類型的旋轉(zhuǎn)變換提供了一種旋轉(zhuǎn)時鐘指針的方法。原點(diǎn)屬性持有相對于父點(diǎn)固定的點(diǎn)，當(dāng)項目的其余部分旋轉(zhuǎn)時。角度屬性決定了以順時針為單位旋轉(zhuǎn)指針的角度。

Image {
            x: 92.5; y: 27
            source: "hour.png"
            transform: Rotation {
                id: hourRotation
                origin.x: 7.5; origin.y: 73;
                angle: (clock.hours * 30) + (clock.minutes * 0.5)
                Behavior on angle {
                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
                }
            }
        }

        Image {
            x: 93.5; y: 17
            source: "minute.png"
            transform: Rotation {
                id: minuteRotation
                origin.x: 6.5; origin.y: 83;
                angle: clock.minutes * 6
                Behavior on angle {
                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
                }
            }
        }

        Image {
            x: 97.5; y: 20
            source: "second.png"
            transform: Rotation {
                id: secondRotation
                origin.x: 2.5; origin.y: 80;
                angle: clock.seconds * 6
                Behavior on angle {
                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
                }
            }
        }

        Image {
            anchors.centerIn: background; source: "center.png"
        }

當(dāng)時間更改時，我們在屬性上使用行為類型angle來應(yīng)用SpringAnimation。的spring和damping特性使所述時鐘指針的彈簧狀運(yùn)動，和一個modulus的360使動畫目標(biāo)值環(huán)繞在一個完整的圓。

我們使用文本類型在時鐘下方顯示城市名稱：

 Text {
            id: cityLabel
            y: 210; anchors.horizontalCenter: parent.horizontalCenter
            color: "white"
            font.family: "Helvetica"
            font.bold: true; font.pixelSize: 16
            style: Text.Raised; styleColor: "black"
        }

Qt常用組件：

• QtitanRibbon| 下載試用: 遵循Microsoft Ribbon UI Paradigm for Qt技術(shù)的Ribbon UI組件，致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart | 下載試用 :是一個C ++庫，代表一組控件，這些控件使您可以快速地為應(yīng)用程序提供漂亮而豐富的圖表。并且支持所有主要的桌面操作系統(tǒng)。
• QtitanDataGrid | 下載試用 :這個Qt數(shù)據(jù)網(wǎng)格組件使用純C++創(chuàng)建，運(yùn)行速度極快，處理大數(shù)據(jù)和超大數(shù)據(jù)集的效果突出。QtitanDataGrid完全集成了QtDesigner，因而極易適應(yīng)其他相似的開發(fā)環(huán)境，保證100%兼容Qt GUI。