Qt（發音為“ cute”，而不是“ cu-tee”）是一個跨平臺框架，通常用作圖形工具包，它不僅創建CLI應用程序中非常有用。而且它也可以在三種主要的臺式機操作系統以及移動操作系統（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式設備，Android（Necessitas）和iOS的端口上運行。現在我們為你提供了免費的試用版。趕快點擊下載Qt最新試用版吧>>

點擊獲取更多文章教程

本文講的是一個計算器的案例，這是案例的下文部分，點擊查看上文如何創建計算機示例。它使用自定義組件，并使用AnimationController進行動畫處理，并為應用程序邏輯添加JavaScript。

我們使用顯示類型來顯示計算。在Display.qml中，我們使用圖像來使顯示組件看起來像一張紙條。用戶可以拖動手柄以將顯示從左向右移動。

當用戶釋放夾點時，我們在calqlatr.qml文件中定義的AnimationController QML類型會完成向前或向后運行受控動畫的過程。要運行動畫，我們根據方向調用completeToEnd（）或completeToBeginning（）。我們在MouseArea的onReleased信號處理程序中執行此操作，其中controller的AnimationController的ID是：

 MouseArea {
            ...
            onReleased: {
                if (rewind)
                    controller.completeToBeginning()
                else
                    controller.completeToEnd()
            }
        }

不像其他的QML動畫類型，AnimationController不是由內部定時器，但其進展財產之間明確地設置為價值驅動0.0和1.0。

在AnimationController內部，我們并行運行兩個NumberAnimation實例，以將數字鍵盤和顯示組件同時移動到視圖的相對側。另外，我們運行一個SequentialAnimation實例以在過渡期間縮放數字鍵盤，從而使動畫具有一定的深度。

 AnimationController {
        id: controller
        animation: ParallelAnimation {
            id: anim
            NumberAnimation { target: display; property: "x"; duration: 400; from: -16; to: window.width - display.width; easing.type: Easing.InOutQuad }
            NumberAnimation { target: pad; property: "x"; duration: 400; from: window.width - pad.width; to: 0; easing.type: Easing.InOutQuad }
            SequentialAnimation {
                NumberAnimation { target: pad; property: "scale"; duration: 200; from: 1; to: 0.97; easing.type: Easing.InOutQuad }
                NumberAnimation { target: pad; property: "scale"; duration: 200; from: 0.97; to: 1; easing.type: Easing.InOutQuad }
            }
        }
    }

我們使用該類型的緩動曲線Easing.InOutQuad將運動加速到一半，然后減速。

在Button.qml中，數字鍵盤按鈕的文本顏色也被設置為動畫。

  Text {
        id: textItem
        ...
        color: (dimmable && dimmed) ? Qt.darker(button.color) : button.color
        Behavior on color { ColorAnimation { duration: 120; easing.type: Easing.OutElastic} }
        states: [
            State {
                name: "pressed"
                when: mouse.pressed && !dimmed
                PropertyChanges {
                    target: textItem
                    color: Qt.lighter(button.color)
                }
            }
        ]
    }

我們使用Qt.darker（） ，以使顏色變暗時，該按鈕顯示為灰色，并用Qt.lighter（）來點亮當按下按鈕。后者是在名為“pressed”的單獨狀態下完成的，該狀態在設置按鈕的MouseArea的屬性時激活。

 通過在屬性上定義“ Behavior ”來對顏色變化進行動畫處理color。

為了動態更改的dimmed所有按鈕的屬性NumberPad，我們將其buttonPressed信號連接到Button.qml中Button的updateDimmed()函數：

  function updateDimmed() {
        dimmed = window.isButtonDisabled(button.text)
    }

    Component.onCompleted: {
        numPad.buttonPressed.connect(updateDimmed)
        updateDimmed()
    }

這樣，當按下一個按鈕時，所有按鈕都會NumPad接收buttonPressed信號，并根據計算器引擎的狀態被激活或停用。

Calculator.js文件定義了我們的計算器引擎。它包含用于存儲計算器狀態的變量，以及當用戶按下數字和計算按鈕時調用的函數。要使用引擎，我們將calqlatr.qml文件中的Calculator.js導入為CalcEngine：

import "content/calculator.js" as CalcEngine

 導入引擎會創建一個新實例。因此，我們僅在主QML文件calqlatr.qml中執行此操作,文件中定義的根項目包含幫助程序功能，該功能允許其他類型訪問計算器引擎：

  function operatorPressed(operator) {
        CalcEngine.operatorPressed(operator)
        numPad.buttonPressed()
    }
    function digitPressed(digit) {
        CalcEngine.digitPressed(digit)
        numPad.buttonPressed()
    }
    function isButtonDisabled(op) {
        return CalcEngine.disabled(op)
    }

當用戶按數字時，數字中的文本將出現在顯示屏上。當他們按下運算符時，將執行適當的計算，并且可以使用等號（=）運算符顯示結果。清除（C）按鈕將重置計算器操作。

本篇文章中的內容你都學會了嗎？如果這篇文章沒能滿足你的需求、點擊獲取更多文章教程！現在立刻下載Qt免費試用吧！更多Qt類開發工具QtitanRibbon、QtitanChart、QtitanNavigation、QtitanDocking、QtitanDataGrid在線訂購現直降1000元，歡迎咨詢慧都獲取更多優惠>>