首页 > 代码库 > 【learning log】Qt
【learning log】Qt
- Qt Quick
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.0Rectangle { 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 } } }}
【learning log】Qt
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。