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

點擊獲取更多文章教程

本文講的是一個計算器的案例，它使用自定義組件，并使用AnimationController進行動畫處理，并為應用程序邏輯添加JavaScript。

Calqlatr演示了各種QML和Qt Quick功能，例如顯示自定義組件以及使用動畫在應用程序視圖中移動組件。應用程序邏輯是用JavaScript實現的，外觀是用QML實現的。

要從Qt Creator運行示例，請打開“ welcome”模式，然后從“ example”中選擇example。

在Calqlatr應用程序中，我們使用以下自定義類型，它們分別在單獨的.qml文件中定義：

• Button.qml
• Display.qml
• NumberPad.qml

為了使用自定義類型，我們在主要的QML文件calqlatr.qml中添加了一個import語句，該語句將導入名為content類型所在位置的文件夾：

import  "content"

然后，我們可以通過將組件類型添加到任何QML文件中來顯示自定義組件。例如，我們在calqlatr.qml中使用NumberPad類型來創建計算器的數字鍵盤。我們將類型放置在Item QML類型中，該類型是Qt Quick中所有可視項的基本類型：

    Item {
        {
        id:  pad
        width:  180
        NumberPad { { id:  numPad;  y:  10;  anchors.horizontalCenter: horizontalCenter: parent.horizontalCenter }}
    }}

此外，我們在類型中使用Button NumberPad類型來創建計算器按鈕。Button.qml指定按鈕的基本屬性，我們可以為NumberPad.qml中的每個按鈕實例修改按鈕。對于數字按鈕和分隔符按鈕，我們還使用text在Button.qml中定義的屬性別名來指定text屬性。

對于操作員按鈕，我們還使用屬性別名指定另一種顏色（綠色）color，并將操作員屬性設置為true。我們在執行計算的函數中使用operator屬性。

我們將按鈕放置在Grid QML類型中，以將它們放置在網格中：

Grid {
    {
    columns:  3
    columnSpacing:  32
    rowSpacing:  16

    signal buttonPressed

    Button { { text:  "7" }
    }
    Button { { text:  "8" }
    }
    Button { { text:  "9" }
    }
    Button { { text:  "4" }
    }
    Button { { text:  "5" }
    }
    Button { { text:  "6" }
    }
    Button { { text:  "1" }
    }
    Button { { text:  "2" }
    }
    Button { { text:  "3" }
    }
    Button { { text:  "0" }
    }
    Button { { text:  ".";  dimmable:  true }
    }
    Button { { text:  " " }
    }
    Button { { text:  "±";  color:  "#6da43d";  operator:  true;  dimmable:  true }
    }
    Button { { text:  "?";  color:  "#6da43d";  operator:  true;  dimmable:  true }
    }
    Button { { text:  "+";  color:  "#6da43d";  operator:  true;  dimmable:  true }
    }
    Button { { text:  "√";  color:  "#6da43d";  operator:  true;  dimmable:  true }
    }
    Button { { text:  "÷";  color:  "#6da43d";  operator:  true;  dimmable:  true }
    }
    Button { { text:  "×";  color:  "#6da43d";  operator:  true;  dimmable:  true }
    }
    Button { { text:  "C";  color:  "#6da43d";  operator:  true }
    }
    Button { { text:  " ";  color:  "#6da43d";  operator:  true }
    }
    Button { { text:  "=";  color:  "#6da43d";  operator:  true;  dimmable:  true }}
}}

一些按鈕也具有dimmable屬性集，這意味著只要計算器引擎不接受該按鈕的輸入，就可以在視覺上禁用（變暗）它們。例如，平方根運算符的按鈕顯示為負值。

未完待續……下篇文章中我們將講解計算器開發中動畫組件的使用。

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