Qt_Quick开发实战精解_3
事件处理：
qml中如故一个事件想要能够被单击，就要在其上放置一个MouseArea元素
signal: onClicked() onDoubleClicked() onPressed() onReleased() onPressAndHold()
Rectangle{
width:600
height:800
color: "green"
MouseArea{
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked:{
if(mouse.button == Qt.RightButton)
parent.color = 'blue'
else if ((mouse.button == Qt.LeftButton) && mouse.modifiers & Qt.ShiftModifier)
parent.color = "green"
else
parent.color = 'red'
}
}
}
drag:分组属性 drag.target: 指定目标 drag.active： 获得拖拽目标信息 drag.axis: 指定方向
Rectangle{
id: container
width: 600
height: 800
Rectangle{
id: rect
width: 50
height:50
color: "red"
opacity:(600.0-rect.x)/600 透明度
MouseArea{
anchors.fill: parent
drag.target: rect
drag.axis: Drag.XAxis 水平方向
drag.minimumX:0
drag.maximumX: container.width-rect.width
}
}
}
按键处理：
Qt获得键盘动作产生键盘事件--> Qt部件具有焦点 接受事件---> 场景将事件交给具有焦点的qml项目--->具有焦点的qml项目接受事件--->传播停止
Rectangle{
width: 100
height: 100
focus: true
Keys.onPressed:{
if(event.key == Qt.Key_A)
{
console.log("Key A Was pressed");
event.accepted = true 防止事件项上层项目传播
}
}
}
KeyNavigation:元素
Grid{
width: 200
height: 200
columns: 2
Rectangle{
id: topLeft
width: 50
height: 50
color: focus ? "red": "lightgray"
focus: true
KeyNavigation.right: topRight
KeyNavigation.down: bottomLeft
}
Rectangle{
id: topRight
width:50
height:50
color: focus ? "red": "lightgray"
KeyNavigation.right: topLeft
KeyNavigation.down: bottomRight
}
Rectangle{
id: bottomLeft
width: 50;height: 5
color: focus ? "red": "lightgray"
KeyNavigation.right: bottomRight
KeyNavigation.up: topLeft
}
Rectangle{
id: bottomRight
width: 50;height: 50
color: focus? "red" : "lightgray"
KeyNavigation.left: bottomLeft
KeyNavigation.up: topRight
}
查询活动焦点项目
It
em::activeFocus 属性
radius: 10 半径 smooth: true 光滑的
焦点的作用域：
FocusScope{
需要绑定道子项目的可视属性上
property aliase color: rectangle.color
x: rectangle.x; y: rectangle.y
width: rectangle.width;height: rectangle.height
Rectangle{
id: widget
color: "lightsteelblue";width: 175;height: 255 radius: 10; smooth:true
Text {id: label;anchors.centerIn: parent}
focus: true
Keys.onPressed:
{
if(event.key == Qt.Key_A)
label.text = "Key A was pressed"
else if (event.key == Qt.Key_B)
label.text = "Key B was pressed"
else if (event.key == Qt.Key_C)
label.text = "Key C was pressed"
}
}
}
当作为一个可重用或则被导入的组件时 焦点失效
Recttangle{
id:window
color: "white";width : 240;height: 150
Column{
anchors.centerIn:parent; spacing: 15
MyWidget{ 获得焦点
focus:true
color: "lightblue"
}
MyWidget{ 未获得焦点
color: "palegreen"
}
}
}
定时器
Item {
Timer{
interval: 500 设置时间间隔
running: true;
repeat: true 是否重复触发
onTriggered: time.text = Date().toString()信号
}
Text{
id: time
}
}
使用loader动态加载组件
Item{
width: 400;height: 400
Loader{id: pageLoader}
MouseAera{
anhors.fill: parent
onClicked: pageLoader.source = "Page.qml"
}
}
Connections:元素接受信号
Item{
width:100
height:100
Loader{
id: myLoader
source: "MyWidget.qml"
}
Connections{ 连接
target: myLoader.item
onMessage: console.log(msg)
}
}
Rectangle{
id: myItem
signal message(string msg)
width: 100;height:100
MouseArea{
anchors.fill: parent
onClicked: myItem.message("Clicked!") 转发信号
}
}
Loader 是一个焦点作用域,对于它的任何获得活动焦点的子项目都必须将 focus设置为true
Redtangle{
width:200
height: 200
Loader{
id: loader
focus:true
}
MouseArea{
anchors.fill: parent
onClicked: loader.source = "KeyReader.qml"
}
Keys.onPress:{
console.log("Captured:",event.text)
}
}
Item{
Item{
focus: true
Keys.onPressed:
{
console.log("Loader item captured",event.text) 获得按键
event.accepted = true 防止事件传到外层
}
}}
图形和动画
Gradient：渐变 GradientStop子项目
Rectangle{
width: 100
height: 100
gradient: Gradient{
GradientStop{position:0.0;color: "red"}
GradientStop {position: 0.33;color: "yellow"}
GradientStop{positon:1.0;color: "green"}
}
}
只有在垂直线性渐变可以使用,如 果需要使用不同方向的渐变,可以结合旋转和裁剪操作来实现 .
Image 元素：来声明显示图片 fillMode:对图片拉伸和平铺
Image{
id: iamge
width: 120;
fillMode:Image.Title
source: "qtlogo.png"
}
Image{
id:image
width:120;height:120
fillMode:Image.Title
source:"http://www.baidu.com/img/baidu_sylogol.gif"
onStatusChanged:{
if(image.status == Image.Ready) console.log(Loaded)
else if (image.status == Image.Loading) console.log(loading)
}
}
BorderImage
{
width: 180
height: 180
border{left:30; top:30; right: 30;bottom:30}
horizontalTileMode: BorderImage.Stretch
//水平方向和垂直方向的平铺模式都设置为拉伸
verticalTileMode: BorderImage.Stretch
source: "color.png"
}
Rectangle{
width: animation.width; height: animation.height+8
AnimatedImage{id:animation;source: "color.png"} 没有gif图片 没有实现效果
Rectangle{
property int frames: animation.frameCount
width: 4; height:8
x: (animation.width-width)*animation.currentFrame/frames
y: animation.height
color: "red"
}
}
scale: 属性 缩放 rotation属性： 旋转
Rectangle{
color: "red"
x:25;y25;width: 25;height:25
scale: 1.6
transfromOrigin: "TopLeft"
}
Item 还有一个 transform 属性,需要指定一个 Transform 元素的列表. Trans-form 元素是一个基本类型,无法被直接实例化,可用Transform 类型有 3 个 .Rotation 、 Scale 和 Translate ,分别用来进行旋转、缩放和平移。这些元素可以通过专门的属性来进行更加高级的变换
设置 .Rotation 提供了坐标轴和原点属性,坐标制有 aXls. X 、 axis. y 和 aXls. Z 分别代表 X 轴、 Y 输和 Z 辙,也就是说可以实现 3D 效果.原点自 origin. X 和 ongm. y 来指定.简单的 2D 旋转是不需要指定坐标轴的,默认使用 Z 轴 (axis { x : 0; y: 0 ; Z: O}) 即可。对于典型的 3D 旋转,既需要指定原点,也qr,;要指定坐标轴。图 6 - 32 为原点和坐标轴的设置示意图.使用 angle 属性以指定顺时针旋转的度数 .下面 的代码将一个蓝色矩形以 Y 割IJ 为旋转轴进行了旋转.
Rectangle{
color: "red"
width: 250;height:250
scale: 1.6
transform: Rotation {origin.x: 30;origin.y:30;axis{x:0;y:1;z:0}angle:72}
}
Row{
Rectangle{
width: 100;height: 100;color: "blue"
transform: Translate{y:20} 简单理解为改变的意思切换
}
Rectangle{
width: 100;height: 100;color:"red"
transform: Translate{y:-20}
}
}
用户界丽用来显示不同场景中的界面,在 QML 中,任何对象都可以在不同的状态间变化,每一个状态中都可以修改相关项目的属性来显示一个不同的配置,对于不是 ltem 派生的对象可以通过StateGroup 元素来使用状态可以向项目的 states 属性添加一个 State 对象, states 底性包含了该项目状态的列表。
Rectangle{
id: rect
width: 100 height:100
color: "red"
MouseArea{
anchors.fill: parent
onClicked: myRect.state = moved
}
states:{
State{ 项目
name: "moved"
修改对象的属性
PropertyChangs{target: rect;x:50;y:50}
}
}
}
State 不仅限于对属性值进行修改,它还可以:
》 使用 Sta teChangeScript 运行一些脚本;
》 使用 Prop ertyChanges 为 一个对象军写现有的信号处理苦苦;
〉 使用 PropertyChanges 为 一 个项目重定义父项目;
〉 使用 AnchorChanges 修改锚的值.
when: 属性
当鼠标点击时移动 释放时还原
states: State{ name: "moved";when: mouseArea.pressed }
空字符串表示默认状态： onReleased : myRect.state = ""
,可以在对象的属性值上应用动面对象来随着时间逐渐改变它们从而创建动画。
动画被应用为属性值源 (propertyvaluesource) ,要使用"动画 on属性"语法。
Rectangle{
propertyAnimation on x {to: 50;duration: 1000;loops: Animation.Infinite}这星的 loops 属性指定为Animation. Infinite ,表明该动画是无限循环的.
}
Behavior为一个属性值改变执行一个默认的动画：
Item{
Rectangle{
id:rect
width: 100;height: 100;color: "blue"
Behavior on x {PropertyAnimation{duration: 1000}}
}
MouseArea{
anchors.fill: parent
onClicked: {rect.x = mouse.x;}
}
}
在信号处理器中创建动画： onClicked: PropertyAnimation{target: rect; properties:"x,y";to: 50;duration : 1000}
独立动画： 不需要绑定任何特定的对象和属性；PropertyAnimation对象
PropertyAnimation{
id: animation
targrt: rect
properties: "x,y"
duration: 100
}
onClicked: {
animation.to = 50 作为独立对象
animation.running = true 独立对象没用运动 可以使用： running属性 和start(),stop() 函数明确运行
}
切换：
需要定义一个Transiton对象，然后将其添加到项目中：
onclicked: rect.state = "moved"
state: State{
name: "moved"
PropertyChanges{target：rect;x:50;y:50}
}
属性 对象
transitions: Transition{
PropertyAnimation{properties: "x,y";duration: 1000}
}
当 Rectangle 改变到 moved 状态时. Transition 将被触发 ,切换的 PropertyAnimation 将会使用动画将 x 和 y 属性改变到它们的新值
所有动画都继承Animation 元素 但是不能直接创建对象，但提供类必要的属性和和函数
easing属性控制属性值使用缓和曲线
