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

點擊下載Qt最新試用版

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

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

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

運行示例

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

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

在clocks.qml文件中，我們使用Rectangle類型來創(chuà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)世界時）的正負偏移。

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

import "content" as Content

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

 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當列表視圖位于x軸的起點或終點時，我們使用該屬性隱藏箭頭。

在Clock.qml中，我們定義了一個timeChanged()函數(shù)，其中我們使用JavaScriptDate對象中的方法來獲取UTC中的當前時間并將其調(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 }

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

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"
        }

當時間更改時，我們在屬性上使用行為類型angle來應用SpringAnimation。的spring和damping特性使所述時鐘指針的彈簧狀運動，和一個modulus的360使動畫目標值環(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技術的Ribbon UI組件，致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart | 下載試用 :是一個C ++庫，代表一組控件，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖表。并且支持所有主要的桌面操作系統(tǒng)。
• QtitanDataGrid | 下載試用 :這個Qt數(shù)據(jù)網(wǎng)格組件使用純C++創(chuàng)建，運行速度極快，處理大數(shù)據(jù)和超大數(shù)據(jù)集的效果突出。QtitanDataGrid完全集成了QtDesigner，因而極易適應其他相似的開發(fā)環(huán)境，保證100%兼容Qt GUI。