Qt示例教程：如何开发计算器应用程序（下）

Qt是一个跨平台框架，通常用作图形工具包，它不仅创建CLI应用程序中非常有用，而且能兼容多个平台。本文讲的是一个计算器的案例，它使用自定义组件，并使用AnimationController进行动画处理，并为应用程序逻辑添加JavaScript。

Qt（发音为“ cute”，而不是“ cu-tee”）是一个跨平台框架，通常用作图形工具包，它不仅创建CLI应用程序中非常有用。而且它也可以在三种主要的台式机操作系统以及移动操作系统（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式设备，Android（Necessitas）和iOS的端口上运行。现在我们为你提供了免费的试用版。赶快点击下载Qt最新试用版吧>>

点击获取更多文章教程

Qt quick示例-计算器

本文讲的是一个计算器的案例，这是案例的下文部分，点击查看上文如何创建计算机示例。它使用自定义组件，并使用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元，欢迎咨询在线客服获取更多优惠>>

来源：慧都