QT Demo 之 calqlatr(2) calqlatr.qml

import QtQuick 2.0
import "content"
import "content/calculator.js" as CalcEngine

同样，这次我们针对qml代码开始的最常见的import部分也不放过了，也要至少做到基本了解和使用。

在Qml中如果需要使用系统组件，必须在开始进行声明。对于自定义的组件也需要在开始的时候import进来，并且需要注意的是，系统组件直接通过名称即可，而对于自定义组件，需要使用""包起来。

QML支持三种的import，分别是：

• import组件(命名空间)：The most common type of import is a module import. Clients can import QML modules which register QML object types and JavaScript resources into a given namespace.
• import目录:      A directory which contains QML documents may also be imported directly in a QML document. This provides a simple way for QML types to be segmented into reusable groupings: directories on the filesystem.
• import js文件：JavaScript resources may be imported directly in a QML document. Every JavaScript resource must have an identifier by which it is accessed.

注：三种import中只有import js时，必须使用as指定出唯一的一个Identifier，其它两种可选。

calqlatr.qml的代码主结构

Rectangle {
    id: window
    width: 320
    height: 480
    focus: true
    color: "#272822"

    onWidthChanged: controller.reload()
    onHeightChanged: controller.reload()

    function operatorPressed(operator) { CalcEngine.operatorPressed(operator) }
    function digitPressed(digit) { CalcEngine.digitPressed(digit) }

    Item {}

    AnimationController {}

    Display {}

}

其中id/width/height和color这几个基本properties无需多讲，在之前的示例代码中已经多次使用。这次新用到的一个property是focus，但是我们发现，就算我们把focus的值改为false或者去掉focus属性(使用default值)后，程序的运行并没有任何异常和不同。这里只能说明在这个示例中目前没有使用到这个property，TODO：后面我们会学习到focus这个property具体的作用。

onWidthChanged和onHeightChanged

在代码中有下述两行：

    onWidthChanged: controller.reload()
    onHeightChanged: controller.reload()

其意思非常好理解，就是当width或height改变的时候，调用controller.reload()函数来完成UI的重绘。但是让我纠结的是，onWidthChanged和onHeightChanged这两个事件响应函数是在那里定义的？？？

当我尝试通过帮助文档寻找这两个函数或者关于width和height的signal时，结果也是没有找到。这个时候，我就猜测了，估计又是Qt做了一些内置处理但是又没有任何文档说明的事情。

是不是，针对每一个property，都会有对应的onXXXChanged事件响应函数？答案，是的。因此，除了上面的onWidthChanged和onHeightChanged函数，还有下面的一系列函数：

    onParentChanged: ;
    onOpacityChanged: ;
    onColorChanged: ;
    onXChanged: ;
    onYChanged: ;
    onVisibleChanged: ;
    onFocusChanged: ;

当然，对于id这个特殊的property，就没有对应的onIdChanged函数了。

digitPressed(digit)和operatorPressed(operator)函数

紧接着下面就又定义了两个函数：

    function operatorPressed(operator) { CalcEngine.operatorPressed(operator) }
    function digitPressed(digit) { CalcEngine.digitPressed(digit) }

在之前的文章《如何在QML中定义和使用函数》是我们有了解到如何在Qml中定义和调用一个函数，这里的函数主体也非常简单，是直接透传调用content/calculator.js中对应的函数。但是这两个函数是在哪里有调用到呢？？？

我找找找，当前文件中没有，无奈使用grep进行查找，发现在Button.qml中有下述的函数调用：

    MouseArea {
        onClicked: {
            if (operator)
                wind