标签：des style blog http color os io 文件 for
Qt creator自带的入门 example。
Qt designer 在 windows 下用起来还是很不方便，所以基本上直接用 code editor 反而更轻松。喜欢creator很重要一点就是因为它NB的代码补全。
首先我们创建一个 qt quick 工程。把资源文件放到 main.qml 所在目录，然后 qt creator 就可以自动识别资源文件。
先设置好image， 然后创建矩形，作为边框，这里背景设为透明，边框半径设为6，创造圆角效果。然后是一些对齐之类的设置。
把 mouse area 放在 矩形下面（作为其子项， 在 designer 的 navigator 中 拖动 或者 在 code editor 中 添加都行），设置好layout， onClicked。
主要是实现点击图标，出现移动的效果。
然后添加 State， 可以先 声明一个 states 集合， 然后在里面定义各个 State。
State 里面最主要的就是 PropertChanges， 它改变一个 target 的 某个 property。这里是 icon 的坐标。
然后定义 Transition。from：和 to：的对象可以写 ”*“， 代表任意对象。左键点击 NumberAnimation，等待一会会出现”小灯泡“。点它，出现对动画路径的选项面板，
可以选择各种效果。
import QtQuick 2.0
Rectangle {
id: page
width: 360
height: 360
color: "#333333"
Rectangle {
id: topLeftRect
x: 10
y: 20
width: 64
height: 64
color: "#00000000"
radius: 6
anchors.left: parent.left
anchors.leftMargin: 10
anchors.top: parent.top
anchors.topMargin: 20
border.width: 1
border.color: "#808080"
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: {
page.state = ‘ ‘
}
}
}
Image {
id: icon
x: 10
y: 20
source: "states.png"
}
Rectangle {
id: middleRightRect
width: 64
height: 64
color: "#00000000"
radius: 6
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 10
transformOrigin: Item.Center
border.width: 1
border.color: "#808080"
MouseArea {
id: mouseArea1
anchors.fill: parent
onClicked: page.state = ‘State1‘
}
}
Rectangle {
id: bottomLeftRect
x: 6
y: 28
width: 64
height: 64
color: "#00000000"
radius: 6
anchors.left: parent.left
anchors.leftMargin: 10
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
border.width: 1
MouseArea {
id: mouseArea2
anchors.fill: parent
onClicked: page.state = ‘State2‘
}
border.color: "#808080"
}
states {
State {
name: "State1"
PropertyChanges {
target: icon
x: middleRightRect.x
y: middleRightRect.y
}
}
State {
name: "State2"
PropertyChanges {
target: icon
x: bottomLeftRect.x
y: bottomLeftRect.y
}
}
}
transitions {
Transition {
from: "*"
to: "State1"
NumberAnimation {
easing.type: Easing.OutBounce
properties: "x,y";
duration: 1000
}
}
Transition {
from: "*"
to: "State2"
NumberAnimation {
properties: "x, y"
easing.type: Easing.InOutQuad
duration: 2000
}
}
Transition {
NumberAnimation {
properties: "x, y"
duration: 2000
}
}
}
}
标签：des style blog http color os io 文件 for
原文地址：http://www.cnblogs.com/slowlight/p/3931205.html
