QT内部的计算机程序分析1

之前想自己写一个计算机结果不怎么会写，所以之后就想参考一下QT的内部程序；

QT的计算机程序主要是由.Pro，.cpp，.qml，以及.js 4种文件组成；

Qt Quick 例程- Calqlatr

QT内部的计算器程序1

Calqlatr演示各种QML和QtQuick功能，例如显示自定义组件和使用动画在应用程序视图中移动组件。应用程序逻辑用JavaScript实现，外观用QML实现。

运行示例

要从QtCreator运行示例，请打开欢迎模式并从示例中选择示例。有关更多信息，请访问“构建和运行示例”。

显示自定义组件

在Calqlatr应用程序中，我们使用以下自定义类型，它们分别定义在一个单独的.qml文件中：

Button.qml
Display.qml
NumberPad.qml

为了使用自定义类型，我们将一个import语句添加到主QML文件calqlatr.qml中，该文件导入名为Content的文件夹，该文件夹是类型所在的位置：

import "content"

然后，我们可以通过将组件类型添加到任何QML文件中来显示自定义组件。例如，我们在calqlatr.qml中使用NumberPad类型来创建计算器的数字垫。我们将该类型放置在一个项QML类型中，该类型是QtQuick中所有可视项的基本类型：

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

此外，我们使用NumberPad类型中的Button类型来创建计算器按钮。qml指定了NumberPad.qml中每个按钮实例可以修改的按钮的基本属性。对于数字按钮和分隔符按钮，我们还使用我们在Button.qml中定义的属性别名文本指定Text属性。

对于操作符按钮，我们还使用属性别名颜色指定另一种颜色(绿色)，并将运算符属性设置为true。我们在执行计算的函数中使用运算符属性。我们将按钮放置在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 }
  }

有些按钮也有一个可调光属性集，这意味着当计算器引擎不接受来自该按钮的输入时，它们可以被视觉禁用(变暗)。例如，平方根操作符的按钮因负值而变暗。

动画元件

我们使用显示类型来显示计算。在Display.qml中，我们使用图像使显示组件看起来像一张纸条，其中包含一个抓地力。用户可以拖动抓地力将显示器从左向右移动。当用户释放抓地力时，我们在calqlatr.qml文件中定义的动画控制器QML类型在向前或向后运行受控动画。要运行动画，我们将根据方向调用CompleteToEnd()或CompleteToBeginning()。我们在MouseArea的onReleasedSignal处理程序中这样做，其中控制器是我们的动画控制器的id：

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

与其他QML动画类型不同，动画控制器不是由内部定时器驱动的，而是通过显式地将其进度属性设置为0.0到1.0之间的值来驱动的。在动画控制器中，我们并行地运行两个Number动画实例，将数字垫和显示组件同时移动到视图的对面。此外，我们还运行了一个Sequential动画实例，以便在转换过程中缩放数字垫，从而使动画具有一定的深度。

      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 }
              }
          }
      }

我们使用Ease型的缓和曲线，在OutQuad中加速运动到一半，然后减速。

在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.darer()来使颜色变暗，在按下按钮时使用qt.light()来点亮按钮。后者是在一个称为“按下”的单独状态下完成的，当按钮的MouseArea的按下属性被设置时，它会**。颜色更改是通过在颜色属性上定义行为来动画化的。为了动态地更改NumberPad中所有按钮的暗淡属性，我们将其按钮Pared信号连接到Button的updateDimmed()函数中的Button.qml中：

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

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

这样，当一个按钮被按下时，Numpad上的所有按钮都会收到一个按钮信号，并根据计算器引擎的状态被**或停用。

执行计算

js文件定义了我们的计算器引擎。它包含用于存储计算器状态的变量，以及当用户按下数字按钮和运算符按钮时调用的函数。要使用该引擎，我们将calqlatr.qml文件中的Compuator.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)
      }