标签：qt 源码分析 demo window calqlatr
import QtQuick 2.0 import "content" import "content/calculator.js" as CalcEngine
同样，这次我们针对qml代码开始的最常见的import部分也不放过了，也要至少做到基本了解和使用。
在Qml中如果需要使用系统组件，必须在开始进行声明。对于自定义的组件也需要在开始的时候import进来，并且需要注意的是，系统组件直接通过名称即可，而对于自定义组件，需要使用""包起来。
QML支持三种的import，分别是：
注：三种import中只有import js时，必须使用as指定出唯一的一个Identifier，其它两种可选。
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: 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函数了。
紧接着下面就又定义了两个函数：
function operatorPressed(operator) { CalcEngine.operatorPressed(operator) }
function digitPressed(digit) { CalcEngine.digitPressed(digit) }
在之前的文章《如何在QML中定义和使用函数》是我们有了解到如何在Qml中定义和调用一个函数，这里的函数主体也非常简单，是直接透传调用content/calculator.js中对应的函数。但是这两个函数是在哪里有调用到呢？？？
我找找找，当前文件中没有，无奈使用grep进行查找，发现在Button.qml中有下述的函数调用：
MouseArea {
onClicked: {
if (operator)
window.operatorPressed(parent.text)
else
window.digitPressed(parent.text)
}
}
无力吐槽，又是跨文件的使用Object Id，这种设计和使用简直是要系统大了会莫明其妙崩溃的节奏啊。
在整个Rectangle下有以下三个子元素：
下面就针对每一个子元素详细展开分析。
Item {
id: pad
width: 180
NumberPad { y: 10; anchors.horizontalCenter: parent.horizontalCenter }
}
代码中指定了Item的width为180，其中数字和运算符部分封装到一个独立的NumberPad的qml文档中。并且指定了NumberPad在Item中的位置是一坐标为相对值10，水平方向相对于Item居中(PS：读者可以自己改变这里的数值和对齐方式，看一下分别的运行效果)。
Grid {
columns: 3
columnSpacing: 32
rowSpacing: 16
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: "." }
Button { text: " " }
Button { text: "±"; color: "#6da43d"; operator: true }
Button { text: "?"; color: "#6da43d"; operator: true }
Button { text: "+"; color: "#6da43d"; operator: true }
Button { text: "√"; color: "#6da43d"; operator: true }
Button { text: "÷"; color: "#6da43d"; operator: true }
Button { text: "×"; color: "#6da43d"; operator: true }
Button { text: "C"; color: "#6da43d"; operator: true }
Button { text: " "; color: "#6da43d"; operator: true }
Button { text: "="; color: "#6da43d"; operator: true }
}
打开NumberPad.qml文件，看到源码，我才知道原来布局这么简单，直接一个Grid搞定了(其中columns: 3 指定了每行排列三个元素)。但是需要注意的是，在"."之后以及"C"之后因为有一个空白，所以在上面使用Grid进行布局的时候，也需要添加对应的" "的控件：
Button { text: "." }
Button { text: " " }
...
Button { text: "C"; color: "#6da43d"; operator: true }
Button { text: " "; color: "#6da43d"; operator: true }
在上面的操作符部分，其中"±"、"?"、"√"、"÷"、"×"这几个操作符都不是标准的ASCII字符，其十六进制值分别是"C2B1"、"E2889"2、"E2889A"、"C3B7"、"C397"，采用的是”UTF-8无BOM格式"编码。
请注意，这里的Button显示的text和在calculator.js脚本文件中的判断是一一相关的，也就是说，如果在这里修改操作符的text，就会出现在点击该按钮时不能完成原来的功能了(语言有点绕，下面讲解到calculator.js时会讲到这一部分)。
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 }
}
}
}
这里使用到的AnimationController是我们之前没有遇到的，先看一下官方文档中说明：
Normally animations are driven by an internal timer, but the AnimationController allows the given animation to be driven by a progress value explicitly.
从文档中我们了解到，AnimationController是一种手动来控制其中的动画运行方式的控件。
AnimationController 有两个属性和三个函数，分别是：
Properties
Methods
本示例中使用到了上面的所有属性和函数，下面就一个个逐步展开。
This property holds the animation to be controlled by the AnimationController.
该字段的意义很好理解，就是指的AnimationController中的具体animation。这里具体使用到的是ParallelAnimation控件，这个也是我们之前没有遇到的。其实ParallelAnimation非常好理解，下面是官方说明：
The SequentialAnimation and ParallelAnimation types allow multiple animations to be run together. Animations defined in a SequentialAnimation are run one after the other, while animations defined in a ParallelAnimation are run at the same time.
从说明上可以看出，SequentialAnimation和ParallelAnimation都是封装多个子animation来执行动画，只不过SequentialAnimation中的子animation是按顺序一个个执行，而ParallelAnimation中的子animation是同时执行。官方有一个例子很好的演示了什么情况下需要多个animation同时执行：
Rectangle {
id: rect
width: 100; height: 100
color: "red"
ParallelAnimation {
running: true
NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
}
}
上面的示例演示了如何让一个Rectangle按照斜线方向进行移动。
我们看一下在calqlatr示例中，使用ParallelAnimation控件来表现什么动画效果呢？
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 }
}
}
}
其中：
这样，上面三个动画因为集成在一个ParallelAnimation控件中，那么同时进行动画，就完成了最终的效果(具体见运行效果)。
先看一下progress属性的说明：
This property holds the animation progress value.
The valid progress value is 0.0 to 1.0, setting values less than 0 will be converted to 0, setting values great than 1 will be converted to 1.
因为在介绍ParallelAnimation控件时讲到，“AnimationController是一种手动来控制其中的动画运行方式的控件”，那么如何让动画停在具体的那一帧呢？这里就需要使用到progress属性。
在本示例中使用到progress属性的时候略微复杂，那么我们就可以做一个专门的测试，在一个Button的onClicked函数中使用下述代码：
onClicked: controller.progress = 0.3
(or onClicked: controller.progress = 0.7)
经过测试，在单击该Button的时候，UI则会按照AnimationController控件中的动画描述停留在30%(或70%)的位置处。
该示例中使用progress是完成了当拖动Display下部的按钮时，整个UI跟随着鼠标的位置在慢慢的变化。
Finishes running the controlled animation in a backwards direction.
After calling this method, the animation runs normally from the current progress point in a backwards direction to the beginning state.
The animation controller‘s progress value will be automatically updated while the animation is running.
从上面的说明中，我们了解到completeToBeginning()函数实际上是从动画的当前位置倒序执行，并变化到初识状态。
该示例中使用completeToBeginning()函数是完成了当拖动Display下部的按钮从右侧向左侧移动的过程中松开鼠标时，整个UI回到初识位置，而不是停留在当前鼠标松开的位置(对于计算器的UI只有左右两种UI效果，不存在切换到一半的效果)。
Finishes running the controlled animation in a forwards direction.
After calling this method, the animation runs normally from the current progress point in a forwards direction to the end state.
The animation controller‘s progress value will be automatically updated while the animation is running.
其意义和使用效果均和completeToBeginning()函数是相对称的，不在赘述。
Reloads the animation properties
If the animation properties changed, calling this method to reload the animation definations.
从说明上可以看出，当ParallelAnimation控件中的animation属性发生变化时，需要调用该函数来进行UI重绘以及整个ParallelAnimation控件状态的创建。
具体到calqlatr示例中，就是当使用鼠标改变应用的宽和高时，需要重新对UI布局，并刷新ParallelAnimation控件的状态(比如completeToEnd()的时候，需要移动到更远的位置)。
onWidthChanged: controller.reload()
onHeightChanged: controller.reload()
Display {
id: display
x: -16
width: window.width - pad.width
height: parent.height
MouseArea {...}
}
Display控件是一个自定义的qml控件，具体实现是在Display.qml文件中。这里调用时，只是设置了x坐标、width和height以及MouseArea的具体动作。
这里为什么设置x坐标为-16，是因为Display左右两侧各有一个宽度为16的条边的图片。设置为-16，这样在左侧的时候，只会显示右边的条边图案；当移动到右侧时，只会显示左侧的条边图案。
Item {
id: display
property bool enteringDigits: false
function displayOperator(operator){}
function newLine(operator, operand){}
function appendDigit(digit){}
function clear(){}
Item {
id: theItem
width: parent.width + 32
height: parent.height
Rectangle {}
Image {}
Image {}
Image {}
ListView {}
}
}
从代码上可以看出，Display控件有以下元素：
这几个函数以及ListView中的内容变化均留在分析calculator.js的时候详细展开，本章中重点是针对qml控件的变化。
MouseArea {
property real startX: 0
property real oldP: 0
property bool rewind: false
anchors {}
height: 50
onPositionChanged: {}
onPressed: startX = mapToItem(window, mouse.x).x
onReleased: {}
}
该MouseArea定义了在操作Display底部的按钮时，整个UI的变化。
先看一下anchors和height部分：
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
<pre name="code" class="plain"> height: 50
通过设置anchors的bottom、left和right均为parent的对应值，而高度是50是因为该按钮和底部的距离是20再加上自身按钮的高度是30。那么最终的效果就是，按钮的点击范围扩大为Display底部的整个区域，便于用户的操作。
我们继续分析MouseArea的onPositionChanged部分：
onPositionChanged: {
var reverse = startX > window.width / 2
var mx = mapToItem(window, mouse.x).x
var p = Math.abs((mx - startX) / (window.width - display.width))
if (p < oldP)
rewind = reverse ? false : true
else
rewind = reverse ? true : false
controller.progress = reverse ? 1 - p : p
oldP = p
}
注意，这里使用到了startX变量，该变量是在单击鼠标时获取的鼠标位置：
onPressed: startX = mapToItem(window, mouse.x).x
其中mapToItem函数我们在之前《QT Demo 之 MouseArea》中有学习到，其作用是把在当前空间中的坐标映射到window空间中的位置，简单的讲就是获取当前鼠标基于整个窗口的位置。
在得到startX之后，通过和窗口的水平中心进行比较，即可得到是在左侧还是在右侧进行操作。
当鼠标移动时，再次通过 mapToItem(window, mouse.x).x获取到鼠标的当前位置，并赋值给mx临时变量。因为鼠标移动是一个过程，中间会触发多次onPositionChanged回调函数，那么不断的通过比较当前坐标和初始坐标之间的间隔，以及配合初始鼠标的位置，即可得到鼠标最后释放时的操作方向。不过在整个过程中，都是通过设置controller.progress的属性来是的UI动画和鼠标同步。
上面的解释比较复杂，而且描述的不是很清晰，下面就使用场景来描述一下：
按钮在右侧，使用鼠标向左移动：那么reverse为true，p值始终大于oldP，则rewind和reverse保持一致都是true，即鼠标的移动方向最终是向左
但是有两种场景上面没有考虑到，那就是：
其实也是可以添加条件进行限制的，只是注意这里的p使用的绝对值，在处理上面四种场景时方便但不能覆盖所有场景。至于如何优化此处的代码使得也能覆盖上面两种场景，此处不再详述。如有读者读到这里不清楚，则可以在进行交流沟通。
按照上面的场景分析，当确定鼠标的最终移动方向后，则当释放鼠标按钮时，就需要UI动画切换到开始或者结束的状态，而不能停留在中间的某个状态上。
onReleased: {
if (rewind)//鼠标的移动方向最终是向左
controller.completeToBeginning()
else//鼠标的移动方向最终是向右
controller.completeToEnd()
}
本节学到的新知识：
在最刚开始接触Qml时，乍看calqlatr的qml代码完全是一头雾水，在经过前面几篇分析的基础上，现在在来学习calqlatr的代码就不是那么复杂和难于理解了。
这一篇的博客篇幅比较长，也花费了我将近一周的业余时间完成。和之前的示例代码相比，虽然都是使用各种qml控件，但是这个示例中尤其是Mousearea的处理部分则是添加了很多的业务逻辑部分，而且理解起来还不是那儿直接。
不知道具体的效率如何，但是从代码的编写上，感觉Qt的Qml对于UI的操作性还是蛮强的。
QT Demo 之 calqlatr(2) calqlatr.qml
标签：qt 源码分析 demo window calqlatr
原文地址：http://blog.csdn.net/nfer_zhuang/article/details/42007093
