(基于qt 5.3.1)
一、Qt Quick入门
1.启动Qt Quick App的两种方式
窗口标题、图标等由qml控制
main.cpp用QQmlApplicationEngine：
//main.cpp
#include
#include
int main(int argc, char *argv[])//主函数必须带参
{
QGuiApplication app(argc, argv);//app的参数和main的参数对应
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
// "qrc:///"表示该qt工程的根目录
return app.exec();
}
main.qml用Window：
//main.qml
import QtQuick 2.2
import QtQuick.Window 2.1
Window {
visible: true
width: 360
height: 360
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
Text {
text: qsTr("Hello World")
anchors.centerIn: parent
}
}
窗口标题、图标由c++代码控制
main.cpp用QQuickView：
#include
#include //头文件
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQuickView viewer;
viewer.setResizeMode(QQuickView::SizeRootObjectToView);
viewer.setSource(QUrl("qrc:///main.qml"));
viewer.show();
return app.exec();
}
main.qml用Item(Rectangle等)：
import QtQuick 2.2
import QtQuick.Window 2.1
Rectangle {
visible: true
width: 360
height: 360
Text {
text: qsTr("Hello World")
anchors.centerIn: parent
}
}
注意：此处不能调用Qt.quit()。
2.Window对象
visibility：控制窗口最小化、最大化、全屏等。
直接在Window里面加入：
visibility: Window.Minimized
visibility: Window.Maximized
visibility: Window.FullScreen
color："blue","#FFFFFF"
opacity：设置窗口透明度，取值范围0~1
title：标题
3.Rectangle:
color: Qt.rgba(r,g,b,a) ，rgba在0~1之间，rgb表示每种颜色所占的比例，a表示颜色的深浅。
gradient：渐变填充，优先级高于color。每一个GradientStop为一个确定颜色的位置，在两个确定颜色之间渐变填充。
Rectangle {
width: 320
height: 480
gradient: Gradient{
GradientStop{
position:0.0
color:"black"
}
GradientStop{
position:0.33
color:"blue"
}
GradientStop{
position:1.0
color:"white"
}
}
}
rotation：旋转角度，可以用rotation:90实现横向渐变。
4.Item
Item是Rectangle的父类。
x,y：位置。
z：图层的优先级。z越大，越在其他图层上面。
clip：在父类设定，默认为false，当设置为true时自动调整子类的大小使之不会跑到父类外面去。
5.anchors
利用图元之间的相对位置布局。
anchors.left:parent.left表示当前图元的最左侧和它父类的最左侧重合。
anchors.leftMargin:20表示当前图元的最左侧向右移动20像素。
anchors.fill:parent表示当前图元填满它的父类。
anchors.centerIn:parent表示当前图元居中放置于它的父类中。
Rectangle {
width: 300
height: 200
Rectangle{
id:rect1
anchors.left:parent.left
anchors.leftMargin: 20
anchors.top:parent.top
anchors.topMargin: 20
width:120
height:120
color:"red"
}
Rectangle{
anchors.left: rect1.right
anchors.leftMargin: 20
anchors.top: rect1.top
width:120
height:120
color:"blue"
}
}
Rectangle {
width: 300
height: 200
Rectangle{
color:"blue"
anchors.fill:parent
border.width: 6
border.color: "black"
Rectangle{
anchors.centerIn: parent
width:120
height:120
radius:8
border.width: 2
border.color: "white"
antialiasing: true //抗锯齿
color:"red"
}
}
}
6.Keys
响应键盘。
focus：焦点，要让某个元素响应按键，必须把它的focus设成true。
Keys.enabled：键盘使能
Keys.onPressed：检测到某个键被按下时，就将event.key设成Qt.Keys_x，后者是宏，为那个键对应的ASCII码。
按某个数字键，就显示某个数字的程序：（按Esc键退出）
注意：默认为中文输入法，要手动切换。
import QtQuick 2.2
import QtQuick.Window 2.1
Window{
visible: true
height: 360
width: 480
Rectangle{
width: 480
height: 360
color:"#c0c0c0"
focus:true
Keys.enabled: true
Keys.onEscapePressed: Qt.quit()
Keys.onBackPressed: Qt.quit()
Keys.onPressed: {
switch(event.key){
case Qt.Key_0:
case Qt.Key_1:
case Qt.Key_2:
case Qt.Key_3:
case Qt.Key_4:
case Qt.Key_5:
case Qt.Key_6:
case Qt.Key_7:
case Qt.Key_8:
case Qt.Key_9:
event.accepted=true
keyView.text=event.key-Qt.Key_0;
break;
}
}
Text{ //可以写在后面
id:keyView
font.bold: true
font.pixelSize: 24
text: qsTr("text")
anchors.centerIn: parent
}
}
}
7.Text
显示文本。
wrapMode：换行方式，WordWrap在两个单词之间换行，WrapAnywhere可以在单词内部换行。
font：字体设置，font.bold:true表示加粗，font.pixelSize:24表示一个字占24像素，font.underline:true表示下划线。
text：文本内容。
style：文字风格，有Outline，Raised，Sunken等。
stylecolor：描边的颜色。
font.family: "楷体" 设置字体
8.Button
需要引入import QtQuick.Controls 1.2
用onClicked表示按下按钮后的操作。
这个操作相当于c++代码。
Button{
text:"Quit"
anchors.centerIn: parent
onClicked:{
Qt.quit();
}
}
checkable：设置Button是否可选。
iconSource：用URL的方式指定图标图片。
focus：如果设置为true，则空格表示按下此按钮。
style：设置按钮的风格。
style:ButtonStyle 有background，control和lable三个属性，可以用于设置按钮的背景，并随操作而改变。
implicitWidth: 必须要加implicit。
implicitHeight:
control.pressed：是否按下按钮
control.hovered：鼠标是否悬停在按钮上
style: ButtonStyle{
background: Rectangle{
implicitWidth: 70
implicitHeight: 25
border.width: control.pressed?2:1
border.color:
(control.hovered||control.pressed)?"green":"#888888"
}
}
9.Image
显示照片。
sources：照片的来源，可以是本地照片也可以是网络照片，本地照片前要加"file:///"。
Window{
visible: true
height: 360
width: 480
Image{
anchors.fill: parent
source: "file:///C:/Users/doujihu/Desktop/其他/photos/照片.jpg"
}
}
默认同步显示图片，要开启异步设置：asynchronous: true
10.busyIndicator
等待的圆圈标记。
running:true 显示等待标记
style:BusyIndicatorStyle{} 用于设置等待图片。
11.FileDialog
需要引入import QtQuick.Dialogs 1.1
文件对话框，用于保存\打开文件。
id.open()：弹出文件对话框
title：文件对话框的标题
nameFilters:["Image Files(*.jpg *.png *.gif)"]
文件过滤器，只有这些后缀名的文件能被选中。
onAccepted:{}
选中后执行的操作
id.fileUrl:文件地址，以file:///开头
string类的slice方法：s.slice(a,b)截取从a到b的部分，可以省略a或b。
FileDialog{
id:fileDialog
title:"please choose"
nameFilters: ["Image Files(*.jpg *.png *.gif)"]
onAccepted:{
imageViewer.source=fileDialog.fileUrl;
var imageFile=new String(fileDialog.fileUrl);
imagePath.text=imageFile.slice(8);
}
}
二、ECMAScript
弱类型：类型都叫var，一个变量可以赋值不同的数据类型。
语句后可以不写分号，以换行作为结尾标记。
原始类型：Undefined,Null,Boolean,Number,String,Object
typeof 运算符：返回类型名
Undefined类型只有一个underfined值，表示未初始化的变量，没有明确返回值的函数，也返回undefined。
Null类型只有一个值null。
Boolean相当于bool。
Number支持十六进制，八进制，科学记数法等。最大值为Number.MAX_VALUE,最小值为Number.MIN_VALUE。如果超过最大值，会返回Infinity，可以用isFinit()判断是否有穷。NaN：表示强制类型转换的对象不是纯数字，只能用isNaN()判断。
String字符串类型，没有char。String类的变量是只读的，不能通过S[0]='a'来修改。
Number.toString(base=10) 把数字以base为基转化为字符串。
parseInt(String)和parseFloat(String) 从字符串的最左边开始，到第一个非数字字符为止，提取数字。
Boolean() 对于非空对象，返回true，否则返回false。
Number() 对整个值转换，如果整个值不是有效数字，返回NaN。
Object类：所有类的基类。
类成员可以动态添加：
Window {
height:480
width:640
Component.onCompleted: {
var person= new Object();
person.name="zhang san"; //person原来没有name成员
person.year=20;
console.log(person.name);
console.log(person.year);
}
}
也可以添加方法：
Component.onCompleted: {
var person= new Object();
person.name="zhang san";
person.year=20;
person.show = function show(){ \\用等号声明函数
console.log("name:",this.name,"\nyear:",this.year);
\\this的使用和c++一样
}
person.show();
}
对象的属性和方法可以用类似于map的下标访问。
console.log(person["name"]);
person["show"](); //相当于person.show();
使用for...in...可以遍历一个对象的属性。
for(var i in person){
console.log(i,":",person[i]);
}
对象的字面量表示法：可以直接用大括号加冒号实例化类。
Window {
height:480
width:640
Component.onCompleted: {
var person = {
"name": "zhangsan",
"year": 20, //注意：两个成员之间必须用逗号隔开
"show": function show(){
console.log(this.name,":",this.year);
}
}
person.show();
}
}
String类：
str.indexOf("string",first=0)：从first开始查找"string"，返回string在str中的第一个字符的下标，如果搜不到，输出-1。
str.search("string") ：总是从头开始查找"string"，支持正则表达式，返回下标。
str.match("string")：从头开始匹配"string"，支持正则表达式，返回存放所有子串的数组。
str.slice(a,b)：提取[a,b)的子串。若为负数，则表示倒数几个字符。（和python类似）。
str.substr(a,b)：从a开始，提取长度为b的子串。
str.toLowerCase()：转化成小写。
str.replace("str1","str2")：把str中的第一个str1换成str2，如果想把str中的str1都换成str2，要用正则表达式/str1/g。
str.split(str1)：以str1为分隔符，将str划分，返回数组（不含str1）。
str.arg(i)：把%d换成i。console.log("%1+%2=%3".arg(3).arg(4).arg(7));
正则表达式：
/"String"/i等价于RegExp("String","i")，"String"叫模式，"i"叫修饰符。
修饰符：
"i"：忽略大小写。
"g"：查找所有符合条件的匹配，而不是在找到第一个匹配后停止。
"m"：跳过换行符匹配。
元字符：
"."：匹配除换行符外的任意字符。
"\w"：匹配字母，数字，下划线或汉字。
"\s"：匹配任意空白字符。
"\S"：匹配任意非空白字符。
"\d"：匹配数字字符。
"\D"：匹配非数字字符。
"\b"：匹配单词的开始或结束。
"^"：匹配字符串的开始。
"$"：匹配字符串的结束。
量词：
"*"：重复零次，一次或多次。
"+"：重复一次或多次。
"?"：重复零次或一次。
"{n}"：重复n次。
"{n,}"：重复n次或多次。
"{n,m}"：重复n到m次。
console.log(str.match(/^We.*/mg));
表示匹配所有以We开头的行。
字符集：[xyz]匹配x，y，z，[0-9]匹配0到9。
转义字符：*，.,\。
正则表达式可用于String类的search()，match()，replace()，split()方法。
Array类：可变数组，类型可以不同。
var a=[1,2,3,4,5];
a.push(6,7,8,9)：向数组末尾插入一个或多个元素，返回数组长度。
a.pop()：删除并返回最后一个元素。
用越界下标也可以扩充数组，直接a[6]=7即可，此时a[5]=undefined。
a.shift()：删除并返回a[0]。
a.unshift(6,7,8,9)：从a[0]开始塞进去若干元素。
a.sort(cmp)：对数组排序。
数组的下标可以为负数，负数下标不会受到任何方法的影响。如a[-1]=6。
a.join(str)：以str为分隔符，将a转化为字符串。
a.concat(b)：返回数组a连接数组b形成的新数组。注意：不能写成a+b。
a.slice(start,end)：返回[start,end)的新数组。
a.splice(index,num)：删除a从index开始的num个元素，并返回它们组成的数组。
Math类：
Math.random() 返回0-1之间的随机数。
Date类：
Date()返回现在时间构成的字符串。
Date.now()返回1970.1.1至今的毫秒数，可以用来做计时器。
和c++不一样的是，对象使用完不用delete，直接array=null即可。
函数：
function 函数名(变量名1,...){}
变量名前面不用写类型，任何一个函数都有返回值，返回值可以为任何类型。
运算符：
===：全等于，值和类型都一样。为了防止null==0。
">>>"：带零扩展的右移，移动后最左侧补0，负数右移后变成正数。
void()：强制转化为undefined。
str instanceof String 判断str是否是String类型，如果是，返回true，可以用于一般的Object（typeof不行）。
console：
console.time(tag)：启动计时器，tag是个字符串。
console.time(tag)：停止tag对应的计时器并输出时间。
Global，Math，JSON不需要实例化就可以使用，被称作内置对象。
QML基本类型：
url：资源地址，可以是本地地址，相对地址和网络位置。
encodeURI("url")：把url中无效的空格自动替换成/
list：储存对象的数组，如item的children属性，children[i]表示它的第i个孩子。
enumeration：枚举类型
Qt.openUrlExternally("url")：打开url，可以是本地文件，也可以用浏览器打开网址。
三、Qt Quick 信号处理
信号处理器：on
附加信号处理器：<别的类型>.on
如在Rectangle里面用Keys.onEscapePressed:{}，表示按下Esc键的情况。
Component信号：
Component.onCompleted：组件创建完成时执行的操作。
Component.onDestruction：组件销毁时执行的操作。
Connections：将多个对象和一个信号连接，或者在对象的作用域外使用它的信号。
Connections{
target:发出信号的对象名
on:{
代码块;
}
}
（当然也可以在Button里面直接写）
信号分为两类：输入操作（鼠标，键盘等）产生的信号，属性改变产生的信号（on
自定义信号：相当于一个返回值为Signal的函数
Signal 信号名(属性名1 参数1,属性名2 参数2...);
当需要发出这个信号时，调用此函数。
在Connection里面用on信号名对这个信号进行处理，这里可以使用Signal函数的参数。
Loader：加载组件。
Loader.sourceComponet表示它使用哪个已有的组件来加载新的组件，这个已有的组件叫item。
onLoaded是加载完成的信号。
Window {
height:640
width:480
visible:true
Rectangle{
anchors.fill: parent
Text{
id:coloredText
anchors.horizontalCenter: parent.horizontalCenter
anchors.top:parent.top
anchors.topMargin: 4
text:"Hello World!"
font.pixelSize: 32
}
Component{
id: colorComponent
Rectangle{
id:colorPicker
width:50
height:30
signal colorPicked(color clr);
MouseArea{
anchors.fill: parent
onPressed: colorPicker.colorPicked(colorPicker.color)
}
}
}
Loader{
id:redLoder
anchors.left: parent.left
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
sourceComponent: colorComponent
onLoaded:{
item.color="red";
}
}
Loader{
id:blueLoder
anchors.left: redLoder.right
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
sourceComponent: colorComponent
onLoaded:{
item.color="blue";
}
}
Connections{
target: redLoder.item
onColorPicked:{
coloredText.color=clr;
}
}
Connections{
target: blueLoder.item
onColorPicked:{
coloredText.color=clr;
}
}
}
}
signal.connect(func1,func2,...)：把signal对象连接到另外的信号或方法上，当信号发射时，连接到信号上的其他信号或方法就会被调用。用于一个信号连接多个方法。
Rectangle{
id: forwarder
anchors.fill: parent
signal send()
onSend: console.log("Send!");
MouseArea{
id:mousearea
anchors.fill: parent
onClicked: console.log("Mouse!");
}
Component.onCompleted: {
mousearea.clicked.connect(send);
//当clicked被触发时，调用send方法，即send也被触发。
}
}
鼠标：
在一个item内部用MouseArea对象。
enable:true表示开始处理鼠标事件。
acceptedButtons设定接受哪些按键，中间用或隔开：Qt.LeftButton|Qt.RightButton|Qt.MidButton
hoverEnabled:true表示开始处理鼠标悬停事件。
鼠标信号：
clicked：单击，在内部用mouse.button读取哪个键，mouse.x和mouse.y为鼠标坐标。
doubleClicked：双击。
pressed：按住鼠标。
pressAndHold：长按鼠标。
released：松开鼠标。
entered：鼠标进入事件区域。
exited：鼠标离开事件区域。
mouse.accepted=true：鼠标事件终止，不再往下传递。
键盘：
必须先把focus设成true。
Keys.enabled：true表示开始处理按键。
Keys.onPressed：一般按键信号，有一个叫event的参数。
Keys.onXXXPressed：特殊按键信号，如空格，回车等。
Keys.forwardTo:[a,b,c] 表示传递给列表内的对象，如果某个对象accept了某个按键，那么列表中排在它后面的对象就不会收到该按键事件。
event.accepted：处理完成标记。
event.key：按下的键，用于和Qt.Key_x比较。
Keys.priority：设置Keys附加属性的优先级。Keys.BeforeItem在Item之前处理按键（默认），Keys.AfterItem在Item之后处理按键。比如Item自带按键处理，如果在Item之后处理按键，按键会被Item吞掉，如CheckBox。
Window {
height:640
width:480
visible:true
Rectangle{
id:rect1
anchors.fill: parent
color:"gray"
focus:true
Keys.enabled: true
Keys.onEscapePressed: Qt.quit();
Keys.forwardTo: [moveText,likeQt]
Keys.priority: Keys.BeforeItem
Text{
id:moveText
x:20
y:20
width:200
height:30
text:"Moving Text"
color:"blue"
font.bold: true
font.pixelSize: 24
Keys.enabled: true
Keys.onSpacePressed: {
rect1.color="black";
event.accepted=true;
}
Keys.onPressed: {
switch(event.key){
case Qt.Key_Left:
if(x>=5)
x-=10;
break;
case Qt.Key_Right:
if(x<=330)
x+=10;
break;
case Qt.Key_Down:
if(y<=600)
y+=10;
break;
case Qt.Key_Up:
if(y>=5)
y-=10;
break;
default:
return;
//必须return，否则switch外面的accepted会把信号吃掉，checkbox收不到空格信号
}
event.accepted=true;
}
}
CheckBox{
id:likeQt;
text:"Like Qt Quick"
anchors.left: parent.left
anchors.leftMargin: 10
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
z:1
}
}
}
计时器：Timer
running:true 计时器开始工作
onTriggered：每经过一个计时周期产生一个信号。
interval：计时周期，默认为1000ms。
repeat:true 可以复位
triggeredOnStart:true 启动后立刻触发一次。
start() stop() restart()
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
Window {
height:640
width:480
visible:true
Rectangle{
anchors.fill: parent
color:"gray"
QtObject{
id:attrs
property int counter; //设置临时变量，不能用var。
Component.onCompleted: {
attrs.counter = 10;
}
}
Text{
id: countShow
anchors.centerIn: parent;
color: "blue"
font.pixelSize: 40
}
Timer{
id: countDown
interval: 1000;
repeat :true
triggeredOnStart: true
onTriggered: {
countShow.text=attrs.counter;
attrs.counter--;
if(attrs.counter<0){
countDown.restart();
attrs.counter=10;
}
}
}
Button{
id:startButton
anchors.top: countShow.bottom
anchors.topMargin: 20
anchors.horizontalCenter: countShow.horizontalCenter;
text:"Start"
onClicked:{
attrs.counter=10;
countDown.start();
}
}
}
}
四、组件与动态对象
1.Component
既可以定义在单独的.qml文件中，也可以在其他item里面定义。
Component只能包含一个顶层Item，而且除了这个Item外只能有id。它自己不可见，必须通过Loader实例化后才可见。定义在单独文件中的Component，文件名就是组件名，组件名的首字母必须大写。
KeyNavigation.left/right/tab:XXX 把focus传递给XXX。
一个完整的实例：
ColorPicker.qml：
//ColorPicker.qml
//增加了用回车和空格选定的功能
import QtQuick 2.2
Rectangle {
id: colorPicker
width: 50
height: 30
signal colorPicked(color clr);
function configureBorder(){ //当focus改变时，用来改变边框粗细和颜色的函数
colorPicker.border.width=colorPicker.focus?2:0
colorPicker.border.color=colorPicker.focus?"yellow":"black"
}
MouseArea{
anchors.fill: parent
onClicked:{
colorPicker.colorPicked(colorPicker.color);
mouse.accepted=true;
colorPicker.focus=true;
}
}
Keys.onReturnPressed: {
colorPicker.colorPicked(colorPicker.color);
event.accepted=true;
}
Keys.onSpacePressed: {
colorPicker.colorPicked(colorPicker.color);
event.accepted=true;
}
onFocusChanged: configureBorder();
Component.onCompleted: configureBorder();
}
main.qml：
//main.qml
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
Window {
height:640
width:480
visible:true
Rectangle{
anchors.fill: parent
Text{
id:coloredText
anchors.horizontalCenter: parent.horizontalCenter
anchors.top:parent.top
anchors.topMargin: 4
text:"Hello World!"
font.pixelSize: 32
}
function setTextColor(clr){ //染色函数
coloredText.color=clr;
}
ColorPicker{
id:redColor
color:"red"
focus:true
anchors.left: parent.left
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
KeyNavigation.right: blueColor //按右方向键把focus传递给blueColor
KeyNavigation.tab: blueColor
}
ColorPicker{
id:blueColor
color:"blue"
anchors.left: redColor.right
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
KeyNavigation.left: redColor
KeyNavigation.right: pinkColor
KeyNavigation.tab: pinkColor
}
ColorPicker{
id:pinkColor
color:"pink"
anchors.left: blueColor.right
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
KeyNavigation.left: blueColor
KeyNavigation.tab: redColor
}
Component.onCompleted: {
redColor.colorPicked.connect(setTextColor);
blueColor.colorPicked.connect(setTextColor); //这里是函数名，不是func()
pinkColor.colorPicked.connect(setTextColor);
}
}
}
2.Loader
source：加载qml文档。
sourceComponent：加载Component对象。
item：指向它加载组件对应的顶层对象，如它加载的组件是个Rectangle，则用item可以访问那个Rectangle的属性和信号。
Loader.item可以作为Connections的target来处理信号。
Loader的尺寸和位置默认与Component一样，可以单独在Loader内修改。
注意Loader的focus和它对应的item的focus不一样，在Loader里可以直接用item.focus=focus来传递，但是在item中要单独设一个property Item loader，用它的focus来保存它对应Loader的focus。
用Loader实现与上例相同的功能，但是逻辑更复杂：
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
Window {
height:640
width:480
visible:true
Rectangle{
anchors.fill: parent
Text{
id:coloredText
anchors.horizontalCenter: parent.horizontalCenter
anchors.top:parent.top
anchors.topMargin: 4
text:"Hello World!"
font.pixelSize: 32
}
Component{
id: colorComponent
Rectangle{
id:colorPicker
width:50
height:30
signal colorPicked(color clr);
property Item loader;
border.width: focus?2:0
border.color: focus?"yellow":"black"
MouseArea{
anchors.fill: parent
onClicked: {
colorPicker.colorPicked(colorPicker.color);
loader.focus=true;
}
}
Keys.onReturnPressed: {
colorPicker.colorPicked(colorPicker.color);
event.accepted=true;
}
Keys.onSpacePressed: {
colorPicker.colorPicked(colorPicker.color);
event.accepted=true;
}
}
}
Loader{
id:redLoder
width:80
height:60
focus:true
anchors.left: parent.left
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
sourceComponent: colorComponent
KeyNavigation.right: blueLoder
onLoaded:{
item.color="red";
item.focus=true;
item.loader=redLoder
}
onFocusChanged: item.focus=focus;
}
Loader{
id:blueLoder
anchors.left: redLoder.right
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
sourceComponent: colorComponent
KeyNavigation.left: redLoder
onLoaded:{
item.color="blue";
item.loader=blueLoder;
}
onFocusChanged: item.focus=focus;
}
Connections{
target: redLoder.item
onColorPicked:{
coloredText.color=clr;
}
}
Connections{
target: blueLoder.item
onColorPicked:{
coloredText.color=clr;
}
}
}
}
3.动态创建和销毁组件
在Rectangle（rootItem）加一个标记位：property bool colorPickerShow: false;
把sourceComponent改成undefined，这个组件就隐藏了。
相当于一个状态机：当click时，根据现态是true还是false决定如何转移。
Button{
id:ctrlButton
text:"Show"
anchors.left: parent.left
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
onClicked:{
if(rootItem.colorPickerShow){
redLoader.sourceComponent=undefined;
blueLoader.sourceComponent=undefined;
rootItem.colorPickerShow=false;
ctrlButton.text="Show";
}
else{
redLoader.sourceComponent=colorComponent;
blueLoader.sourceComponent=colorComponent;
redLoader.focus=true;
rootItem.colorPickerShow=true;
ctrlButton.text="Hide";
ctrlButton.anchors.leftMargin=400;
}
}
}
4.用ECMAScript动态创建对象
Qt.creatComponent("XXX.qml")：创建一个XXX.qml组件并返回该组件。
Component.creatObject(parent,{"属性1":XXX,"属性2":YYY,...})：以parent为父类，以大括号内的内容为属性初始值，创建一个该组件的实例并返回该实例。
rootItem.component.status==Component.Ready 判断组件是否创建成功。
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
Window {
height:640
width:480
visible:true
Rectangle{
id: rootItem
anchors.fill: parent
property int count: 0;
property Component component: null;
Text{
id:coloredText;
text: "Hello World!"
anchors.centerIn: parent
font.pixelSize: 24
}
function changeTextColor(clr){
coloredText.color=clr;
}
function createColorPicker(clr){
if(rootItem.component==null){
rootItem.component=
Qt.createComponent("ColorPicker.qml");
}
var colorPicker;
if(rootItem.component.status==Component.Ready){
colorPicker=rootItem.component.createObject(rootItem,
{"color":clr,"x":rootItem.count*55,"y":10});
colorPicker.colorPicked.connect(rootItem.changeTextColor);
//clr这个参数从createColorPicker传递到changeTextColor
}
rootItem.count++;
}
Button{
id: add
text:"add"
anchors.left: parent.left
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
onClicked:{
//下面这一行书上写错了
rootItem.createColorPicker(Qt.rgba(Math.random(),
Math.random(),Math.random(),1));
}
}
}
}
5.销毁动态创建的对象
对于Loader创建的对象，直接把source设为空串或者把sourceComponent设置成undefined即可自动销毁。
对于Qt方法创建的对象，调用其destroy(time=0ms)方法即可销毁，time为销毁延迟的时间。
利用数组实现组件的删除：
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
Window {
height:640
width:480
visible:true
Rectangle{
id: rootItem
anchors.fill: parent
property int count: 0;
property Component component: null;
property var array: new Array();
Text{
id:coloredText;
text: "Hello World!"
anchors.centerIn: parent
font.pixelSize: 24
}
function changeTextColor(clr){
coloredText.color=clr;
}
function createColorPicker(clr){
if(rootItem.component==null){
rootItem.component=
Qt.createComponent("ColorPicker.qml");
}
var colorPicker;
if(rootItem.component.status==Component.Ready){
colorPicker=rootItem.component.createObject(rootItem,
{"color":clr,"x":rootItem.count*55,"y":10});
colorPicker.colorPicked.connect(rootItem.changeTextColor);
rootItem.array.push(colorPicker);
}
rootItem.count++;
}
Button{
id: add
text:"add"
anchors.left: parent.left
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
onClicked:{
rootItem.createColorPicker(Qt.rgba(Math.random(),
Math.random(),Math.random(),1));
}
}
Button{
id: del
text:"del"
anchors.left: add.right
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
onClicked:{
rootItem.array[rootItem.array.length-1].destroy();
rootItem.array.pop();
rootItem.count--;
}
}
}
}
五、元素布局
布局定位器：只改变父类的大小，不改变孩子们的尺寸。
布局管理器：根据界面尺寸变化自动调整孩子们的尺寸。
1.Row和Column
用锚布局设置行的位置，用spacing属性设定Item的间隔，用layoutDirection属性指定布局方向，默认为从左到右，设定为Qt.RightToLeft时从右向左。
Column一样。
2.Grid和Flow
网格，由rows和columns设置行列数，默认为x行4列；rowSpacing和columnSpacing指定行列间距。
flow属性为放置方法，默认为从左到右，放满一行再放下一行；可以改成Grid.TopToBottom。
Flow：按照自身的宽和高是否超出边界而自动折行。
3.GridLayout
高级的Grid。
要引入import Qtquick.Layouts 1.1
Layout.fillWidth: true 填充一行的所有剩余空间，要提前确定Layout的宽度。
RowLayout、ColumnLayout同理。
六、常用元素
1.TextInput
输入一行文本。要设置focus:true才能有效。
maximumLength：设置编辑框允许输入字符的最大长度。
echoMode：回显属性，默认为TextInput.Normal，可以设置为TextInput.Password：显示黑圆圈（用Passwordcharacter设置），TextInput.NoEcho：不回显。
inputMask：限制输入字符的格式，如000.000.000.000可以作为ip地址。
IntValidator、RegExpValidator分别为整数和正则表达式验证器，用于限制输入字符的格式。
selectByMouse:true 可以用鼠标选择编辑框内的文字。
当按下回车键或编辑框失去焦点时，会发出accepted信号，可以用onAccepted来处理。
2.TextField
高级版TextInput。
textColor：设置文本颜色，注意不是color。
控件TextFieldStyle的background属性可以设定TextField的背景图案。
TextField{
id:input
style: TextFieldStyle{
textColor:"black"
background: Rectangle{
radius:2
implicitWidth: 100
implicitHeight: 24
border.color: "yellow"
border.width: 1
}
}
}
3.TextEdit
多行文本编辑框。
warpMode:TextEdit.WordWrap 在单词边界处折行。
4.TextArea
可以用TextAeraStyle的background属性设定背景色，但是不能设置背景图案，只能用TextEdit底下放个z序较小的Rectangle对象来实现。
selectionColor：选中字符边框的颜色。
selectedTextColor：选中字符的颜色。
TextArea支持鼠标和键盘的滚动。
5.RadioButton
单选。
需要引入import QtQuick.Controls 1.2
ExclusiveGroup：互斥分组，分组内的元素只能选一个。通过按钮类的exclusiveGroup属性声明是哪个分组。
XXX.current：表示XXX当前被选中的元素。
text：显示文本
checked：显示RadioButton是否被选中
hovered：指示鼠标是否悬停在按钮上
pressed：按钮按下时为true。
activeFocusOnPress：按钮获得焦点时为true。
RadioButtonStyle组件：定制按钮样式。
background：定制选项的背景。
indicator：定制选中的指示图标。
label：定制单选按钮的文本。
control：使用style的RadioButton对象，如control.text为对应按钮旁边的文字。
spacing：图标和文本之间的间隔。
当选中某个选项时，发送clicked信号，可以用onClicked处理。
单项选择示例：
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2
Window {
height:640
width:480
visible:true
Rectangle{
anchors.fill: parent
color:"white"
Rectangle{
id:resultHolder
color:"#a0a0a0"
width:200
height:60
anchors.centerIn: parent
visible: false
z:2
opacity: 0.8
border.width: 2
border.color: "#808080"
Text{
id:result
anchors.centerIn: parent
font.pointSize: 20
color:"#0500ff"
font.bold: true
}
}
ExclusiveGroup{
id:mos;
}
Component{
id:radioStyle
RadioButtonStyle{
background:Rectangle{
opacity: 0.8
color:"#a0a0a0"
border.width: 2
border.color: control.activeFocus?"yellow": "#808080"
}
indicator:Rectangle{
visible:false
}
label: Text{
font.pixelSize: 24
color: control.activeFocus? "blue":"black"
text: control.text
}
MouseArea{
anchors.fill: parent
enabled: true
onDoubleClicked:{
console.log(666);
result.text=choose1.text;
resultHolder.visible=true;
}
}
}
}
Text{
id:notation
text:"请选择喜欢的文字游戏:"
color:"black"
font.pixelSize: 32
anchors.top:parent.top
anchors.topMargin:45
anchors.left: parent.left
anchors.leftMargin: 45
}
RadioButton{
id:choose1
text:"ever17"
exclusiveGroup: mos
anchors.top:notation.bottom
anchors.topMargin: 4
anchors.left: notation.left
anchors.leftMargin: 20
focus:true
activeFocusOnPress: true
style:radioStyle
property bool click : false //实现双击确定
onCheckedChanged: {
if(!this.checked) this.click=0;
}
onClicked: {
if(this.click){
result.text=this.text;
resultHolder.visible=true;
this.click=false;
}
else this.click=true;
}
Keys.enabled: true
Keys.onReturnPressed: {
result.text=this.text;
resultHolder.visible=true;
}
Keys.onEscapePressed: {
resultHolder.visible=false;
}
KeyNavigation.up: choose4
KeyNavigation.down: choose2
}
RadioButton{
id:choose2
text:"素晴日"
exclusiveGroup: mos
anchors.top:choose1.bottom
anchors.topMargin: 4
anchors.left: choose1.left
activeFocusOnPress: true
style:radioStyle
property bool click : false //实现双击确定
onCheckedChanged: {
if(!this.checked) this.click=0;
}
onClicked: {
if(this.click){
result.text=this.text;
resultHolder.visible=true;
this.click=false;
}
else this.click=true;
}
Keys.enabled: true
Keys.onReturnPressed: {
result.text=this.text;
resultHolder.visible=true;
}
Keys.onEscapePressed: {
resultHolder.visible=false;
}
KeyNavigation.up: choose1
KeyNavigation.down: choose3
}
RadioButton{
id:choose3
text:"Clannad"
exclusiveGroup: mos
anchors.top:choose2.bottom
anchors.topMargin: 4
anchors.left: choose2.left
activeFocusOnPress: true
style:radioStyle
property bool click : false //实现双击确定
onCheckedChanged: {
if(!this.checked) this.click=0;
}
onClicked: {
if(this.click){
result.text=this.text;
resultHolder.visible=true;
this.click=false;
}
else this.click=true;
}
Keys.enabled: true
Keys.onReturnPressed: {
result.text=this.text;
resultHolder.visible=true;
}
Keys.onEscapePressed: {
resultHolder.visible=false;
}
KeyNavigation.up: choose2
KeyNavigation.down: choose4
}
RadioButton{
id:choose4
text:"白色相簿2"
exclusiveGroup: mos
anchors.top:choose3.bottom
anchors.topMargin: 4
anchors.left: choose3.left
activeFocusOnPress: true
style:radioStyle
property bool click : false //实现双击确定
onCheckedChanged: {
if(!this.checked) this.click=0;
}
onClicked: {
if(this.click){
result.text=this.text;
resultHolder.visible=true;
this.click=false;
}
else this.click=true;
}
Keys.enabled: true
Keys.onReturnPressed: {
result.text=this.text;
resultHolder.visible=true;
}
Keys.onEscapePressed: {
resultHolder.visible=false;
}
KeyNavigation.up: choose3
KeyNavigation.down: choose1
}
}
}
6.CheckBox
多选。
用CheckBoxStyle设置样式。
7.GroupBox
多选，外面加个边框。
title：标题
checkable:true 标题可选
flat:true 去掉边框
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2
Window {
height:640
width:480
visible:true
Rectangle{
anchors.fill: parent
color:"white"
Rectangle{
id:resultHolder
color:"#a0a0a0"
width:200
height:100
anchors.centerIn: parent
visible: false
z:2
opacity: 0.8
border.width: 2
border.color: "#808080"
radius: 8
Text{
id:result
anchors.fill: parent
anchors.margins:5
font.pointSize: 16
color:"blue"
font.bold: true
wrapMode: Text.WordWrap
}
}
Component{
id:checkStyle
CheckBoxStyle{
indicator: Rectangle{
implicitHeight: 14
implicitWidth: 14
border.color: control.hovered ? "darkblue" : "gray"
border.width:1
Canvas{ //画布，详见下一章
anchors.fill: parent
anchors.margins: 3
visible:control.checked
onPaint:{
var ctx=getContext("2d");
ctx.save();
ctx.strokeStyle="#C00020"
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(width,height);
ctx.moveTo(0,height);
ctx.lineTo(width,0);
ctx.stroke();
ctx.restore();
}
}
}
label: Text{
color:control.checked?"blue":"black"
text:control.text
}
}
}
GroupBox{
id:groupbox
checkable: true
title:"请选择你喜欢的文字游戏（们）："
anchors.top:parent.top
anchors.topMargin:8
anchors.left: parent.left
anchors.leftMargin: 20
width:280
height:160
Column{
id:games
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 5
spacing: 8
CheckBox{
text:"潜伏之赤途"
style:checkStyle
onClicked: resultHolder.visible = false;
}
CheckBox{
text:"中心少女"
style:checkStyle
onClicked: resultHolder.visible = false;
}
CheckBox{
text:"刻痕"
style:checkStyle
onClicked: resultHolder.visible = false;
}
CheckBox{
id:checkbox4
text:"恒水中学连环虐杀"
style:checkStyle
onClicked: resultHolder.visible = false;
}
}
Button{
id:confirm
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
text:"确定"
onClicked: {
var str=new Array();
var index=0;
var count=games.children.length;
for(var i=0;i0){
result.text=str.join();
resultHolder.visible=true;
}
}
}
}
}
}
8.ComboBox
下拉菜单。
用model:[字符串数组] 表示下拉选择的内容。
currentText表示当前选中的内容，currentIndex表示其数组序号。
9.ProgressBar
进度条。
minimumValue：最小值
maximumValue：最大值
value：当前值
orientation：Qt.Horizontal水平方向，Qt.Vertical垂直方向。
给进度条加百分比：不能只重写ProgressBarStyle里面的panel，否则进度条无法显示！必须重新载入background和progress。
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2
Window {
height:640
width:480
visible:true
Rectangle{
anchors.fill: parent
color:"white"
ProgressBar{
id:bar
minimumValue: 0
maximumValue: 100
value: 0
width: 150
height: 20
z:1
anchors.centerIn: parent
style: ProgressBarStyle{
id:progressbarstyle
background: Rectangle{
border.width: 1
border.color: control.hovered? "green":"gray"
color:"lightgray"
}
progress: Rectangle{
color:"#208020"
}
panel: Item{
implicitWidth: 200
implicitHeight: 20
Loader{
anchors.fill: parent
sourceComponent: background
}
Loader{
id:progressLoader
anchors.top:parent.top
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.margins: 3
z:1
width:currentProgress*(parent.width-6)
sourceComponent:progressbarstyle.progress
}
Text{
color:"blue"
text:currentProgress*100+"%"
z:2
anchors.centerIn: parent
}
}
}
Timer{
interval:1000
repeat: true
running: true
onTriggered: {
if(parent.value<99.9){
parent.value+=10;
}
else{
restart();
parent.value=0;
}
}
}
}
}
}
10.TabView
标签页。
count：标签页的总数。
currentIndex：标签页的序号，从0开始。
tabVisible：默认在顶部，Qt.BottomEdge在底部。
addTab(title,component)：增添一个以title为标题，以component控件为内容的标签页。
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2
Window {
height:640
width:480
visible:true
Rectangle{
anchors.fill: parent
color:"white"
Component{
id:tabContent
Rectangle{
implicitWidth: 100
implicitHeight: 100
anchors.fill: parent
color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
}
}
TabView{
id:tabView
anchors.top: parent.top
anchors.margins: 8
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
tabPosition: Qt.BottomEdge
Component.onCompleted: {
for(var i=0;i<5;i++){
tabView.addTab("tab-"+i,tabContent);
}
}
}
}
}
11.Slider
滑块。
minimumValue：设置最小值，默认为0。
maximumValue：设置最大值，默认为1。
value：当前值，默认为0
onValueChanged：当前值改变时，处理信号。
stepSize：步长。
Column{
width:200
spacing:16
Text{
id:sliderStat
color:"blue"
text:"current-0.1"
}
Slider{
width:200
height:30
stepSize:0.01
value:0.1
onValueChanged: {
sliderStat.text="current-"+value;
}
}
}
}
12.Flickable
可拖拽组件。
Window {
height:200
width:200
visible:true
visibility:Window.Maximized
Flickable {
anchors.fill: parent
contentWidth: image.width; contentHeight: image.height
Image { id: image; source: "file:///C:/Users/doujihu/Pictures/water.jpg" }
}
}
七、Canvas
画布。
Canvas{
anchors.fill: parent
onPaint:{
var ctx=getContext("2d");
}
}
lineWidth：画笔粗细
strokeStyle：画笔颜色
fillStyle：填充颜色
beginPath()：开始绘制路径。
moveTo(x,y)：将路径点从纸上拿起来，移动到(x,y)。
lineTo(x,y)：从当前点到(x,y)连一条直线路径，但是不涂色。
closePath()：将路径终点与起点相连，绘制一条封闭路径。
stroke()：将当前路径用strokeStyle涂色。
fill()：若当前路径闭合，则用fillStyle填充颜色。
rect(x1,x2,y1,y2)：绘制矩形路径。
arc(x,y,r,start,end,anticlockwise=1)：以(x,y)为圆心，r为半径，从start到end画弧路径，anticlockwise表示是否逆时针。
createLinearGradient(x1,y1,x2,y2)：返回一个从(x1,y1)到(x2,y2)的线性渐变对象gradient。用gradient.addColorStop(0~1,颜色)来设置渐变色的边界点。
Window {
width:400
height:240
visible:true
Canvas{
anchors.fill: parent
onPaint:{
var ctx=getContext("2d");
ctx.lineWidth=2;
ctx.strokeStyle="red";
var gradient=ctx.createLinearGradient(60,50,180,130);
gradient.addColorStop(0.0,Qt.rgba(1,0,0,1));
gradient.addColorStop(1.0,Qt.rgba(0,0,0,1));
ctx.fillStyle=gradient;
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI,1);
ctx.fill();
ctx.stroke();
}
}
}
绘制文字：
text("string",x,y)：建立文字路径。
fillText(),strokeText()：填充文字和描边。
设置字体：ctx.font="42px fantasy" 42像素大小，fantasy字体。
绘制图片：
drawImage(image,x,y)：在(x,y)处绘制image（可以是Image元素或url）。
当图片加载完成时，才能绘制图片：（放在onPaint下面）
Component.onCompleted: loadImage(source);
onImageLoaded: requestPaint();
可以利用这个来实现快速切换图片。
注意要清空画布，否则原来的图片不会消失。
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2
Window {
width:1024
height:768
visibility: Window.Maximized
visible:true
Canvas{
id:root
anchors.fill: parent
property string source: "file:///C:/Users/doujihu/Desktop/其他/素材/1.jpg"
onPaint:{
var ctx=getContext("2d");
ctx.save();
ctx.clearRect(0,0,root.width,root.height);
ctx.beginPath();
ctx.translate(400,0);
ctx.rotate(Math.PI/4);
ctx.drawImage(source,0,0);
ctx.restore();
}
Component.onCompleted: loadImage(source);
onSourceChanged: loadImage(source);
onImageLoaded: requestPaint();
MouseArea{
anchors.fill: parent
onClicked:{
root.source="file:///C:/Users/doujihu/Desktop/其他/素材/2.png"
}
}
}
}
图形变换：
变换前要ctx.save()，变换后要ctx.restore()。
translate(x,y)：将画布中心从(0,0)平移到(x,y)。
rotate(rad)：顺时针旋转rad弧度。
scale(x,y)：横向缩放x倍，纵向缩放y倍。
clip()：裁剪已有路径的内部。
先绘制路径，再调用clip()，最后再调用drawImage()。
八、动画
1.PropertyAnimation
通过改变对象的property实现动画。
有3种方法：(1)单独声明一个PropertyAnimation对象，在信号处理时调用animation.start()。(2)on
targets:目标对象 可以是[obj1,obj2,...]的数组，也可以是一个对象。
properties:"width,height" 对象的属性，多个属性用逗号隔开
to：多个属性共用的同一个目标值。
duration：持续时间(ms)。
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2
Window {
width:360
height:240
visible: true
Rectangle{
id:rootItem
anchors.fill: parent
color:"#EEEEEE"
Rectangle{
id:rect
width:50
height:150
anchors.centerIn: parent
color:"blue"
MouseArea{
id:mousearea
anchors.fill: parent
onClicked:{
animation.start();
}
}
PropertyAnimation on width{
id:animation
to:150
duration:1000
running:false
}
}
}
}
animation.running:true/animation.start() 开始运行动画
onStarted和onStopped为开始和结束信号，用一个var保存当前的状态，可以实现动画反复运行。
Window {
width:360
height:240
visible: true
Rectangle{
id:rootItem
anchors.fill: parent
color:"#EEEEEE"
Rectangle{
id:rect
width:50
height:150
anchors.centerIn: parent
color:"blue"
property var animation;
PropertyAnimation{
id:toSquare
target:rect
property:"width"
to:150
duration: 1000
onStarted: {
rect.animation=toSquare;
rect.color="red";
}
onStopped: {
rect.color="blue";
}
}
PropertyAnimation{
id:toRect
target:rect
property:"width"
to:50
duration: 1000
onStarted: {
rect.animation=toRect;
rect.color="red";
}
onStopped: {
rect.color="blue";
}
}
MouseArea{
anchors.fill: parent
onClicked:{
if(rect.animation===toRect||rect.animation===undefined){
toSquare.start();
}
else{
toRect.start();
}
}
}
}
}
}
easing.type：动画速度变化模型。默认为Easing.Linear。
NumberAnimation，RotationAnimation，ColorAnimation为专用的动画处理器。
2.PathAnimation
让目标对象沿着一个既定的路径运动。
anchorPoint:"x,y" 对象初始位置
orientationEntryDuration：将对象调整到初始方向所用的时间
orientationExitDuration：将对象调整到设定的终止方向(endRotation)所用的时间
orientation：控制目标对象沿路径运动时的旋转策略。默认值为PathAnimation.Fixed保持物体方位不旋转。TopFirst表示目标顶部贴合路径。
path：Path对象。
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2
Window {
width:400
height:240
visible: true
Canvas{
anchors.fill:parent
onPaint:{
var ctx=getContext("2d");
ctx.lineWidth=4;
ctx.strokeStyle="red";
ctx.beginPath();
ctx.arc(200,0,160,Math.PI*2,0,false);
ctx.stroke();
}
Rectangle{
id:rect
width:40
height:40
color:"blue"
x:20
y:0
MouseArea{
anchors.fill: parent
id:mouseArea
onClicked: pathAnim.start();
}
PathAnimation{
id:pathAnim
target:rect
duration:6000
anchorPoint: "20,20"
orientationEntryDuration: 200
orientationExitDuration: 200
easing.type: Easing.InOutCubic
orientation:PathAnimation.TopFirst;
path: Path{
startX:40
startY:0
PathArc{
x:360
y:0
useLargeArc: true
radiusX: 160
radiusY: 160
direction: PathArc.Counterclockwise;
}
}
}
}
}
}
3.ParallelAnimation
并行播放动画。
loops：循环方式。数字表示循环几次，Animation.Infinite表示无限循环。
animation.pause()表示暂停，此时animation.paused置1，running置0。可以通过anim.resume()恢复。
onClicked: {
if(anim.paused) anim.resume();
else if(anim.running) anim.pause();
else anim.start();
}
4.SequentialAnimation
顺序播放动画。
5.State
把几个属性绑成一个状态。
states: [State1,State2,...]：状态列表。
State{name:"string",when:表达式,changes:[PropertyChanges,AnchorsChanges等]}
when:当表达式为true时，触发状态变化。也可以用XXX.state="name"。
explicit:true：只变化一次，false将changes绑定。
6.StateChangeScript和ScriptAction
当状态改变\调用start()时，执行script:后面的代码。
name:"name"表示script的名字，可以被ScriptAction对象引用。
这样虽然逻辑上更直接，但是没法插入动画。
利用状态转移修改属性：
Window {
width:360
height:240
visible: true
Rectangle{
id:rootItem
color:"#EEEEEE"
anchors.fill: parent
Rectangle{
id:rect
color:"blue"
width:200
height:200
anchors.centerIn: parent
MouseArea{
id:mouseArea
anchors.fill: parent
onClicked:{
rect.state="resetWidth"
}
}
states:[
State{
name:"resetWidth"
StateChangeScript{
script:{
rect.color="red";
rect.width=rootItem.width;
}
}
}
]
}
}
}
等效于：
Window {
width:360
height:240
visible: true
Rectangle{
id:rootItem
color:"#EEEEEE"
anchors.fill: parent
Rectangle{
id:rect
color:"blue"
width:200
height:200
anchors.centerIn: parent
MouseArea{
id:mouseArea
anchors.fill: parent
onClicked:{
action1.start();
}
}
ScriptAction{
id:action1
script:{
rect.color="red";
rect.width=rootItem.width;
}
}
}
}
}
7.Transition
两个状态之间的过渡动画。
Item的transitions属性是个列表，保存Item定义的所有Transition。
scale:缩放系数。
与state对应的动画不用写target和from to。
对于并行动画，可以直接放在大括号内，对于顺序动画，必须加SequentitalAnimation并置reversible为true。
Window {
width:360
height:240
visible: true
Rectangle{
id:rootItem
color:"#EEEEEE"
anchors.fill: parent
Rectangle{
id:rect
color:"gray"
width:50
height:50
anchors.centerIn: parent
MouseArea{
id:mouseArea
anchors.fill: parent
}
states:State{
name:"pressed"
when:mouseArea.pressed
PropertyChanges {
target: rect
color:"green"
scale:2.0
}
}
transitions: Transition {
NumberAnimation{
property: "scale"
easing.type: Easing.InOutQuad
duration:1000
}
ColorAnimation { duration: 600 }
}
}
}
}
8.Behavior
给property绑定动画，当property改变时自动播放动画。
一个Behavior内只能有一个顶层动画。
Window {
width:360
height:240
visible: true
Rectangle{
id:rootItem
color:"#EEEEEE"
anchors.fill: parent
Rectangle{
id:rect
color:"yellow"
width:100
height:100
anchors.centerIn: parent
MouseArea{
id:mouseArea
anchors.fill: parent
onClicked:{
text1.opacity=0;
text1.text="bye!";
}
}
Text{
id:text1
color:"blue"
anchors.centerIn: parent
font.bold: true
font.pixelSize: 24
text:"hello world!"
Behavior on text{
PropertyAnimation{
duration:500
}
}
Behavior on opacity{
SequentialAnimation{
NumberAnimation{
id:anim1
from:1
to:0
duration:500
}
NumberAnimation{
id:anim2
from:0
to:1
duration:500
}
}
}
}
}
}
}
一个完整的对话框实现：
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2
Window {
width:360
height:240
visible: true
visibility: Window.Maximized
Rectangle{
id:rootItem
color:"#EEEEEE"
anchors.fill: parent
Rectangle{
id:rect
color:Qt.rgba(0,0,1,0.2);
width:parent.width
height:parent.height/4
anchors.bottom: parent.bottom
property string str: "一个人的一生应该是这样度过的：当他回首往事的时候，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。”"
property int index:0
MouseArea{
id:mouseArea
anchors.fill: parent
onClicked:{
if(rect.index