Qt（發(fā)音為“ cute”，而不是“ cu-tee”）是一個跨平臺框架，通常用作圖形工具包，它不僅創(chuàng)建CLI應(yīng)用程序中非常有用。而且它也可以在三種主要的臺式機操作系統(tǒng)以及移動操作系統(tǒng)（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式設(shè)備，Android（Necessitas）和iOS的端口上運行。現(xiàn)在我們?yōu)槟闾峁┝嗣赓M的試用版。趕快點擊下載Qt最新試用版吧>>

點擊獲取更多文章教程

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

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

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

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

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

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

import  "content"

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

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

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

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

我們將按鈕放置在Grid QML類型中，以將它們放置在網(wǎng)格中：

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屬性集，這意味著只要計算器引擎不接受該按鈕的輸入，就可以在視覺上禁用（變暗）它們。例如，平方根運算符的按鈕顯示為負值。

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

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