半岛外围网上直营

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元，欢迎咨询慧都获取更多优惠>>