Qt_Quick开发实战精解_3

Posted 2022-04-20 countryboy666

事件处理：
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
Loaderid: 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
GradientStopposition:0.0;color: "red"
GradientStop position: 0.33;color: "yellow"
GradientStoppositon: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
borderleft:30; top:30; right: 30;bottom:30
horizontalTileMode: BorderImage.Stretch
//水平方向和垂直方向的平铺模式都设置为拉伸
verticalTileMode: BorderImage.Stretch

source: "color.png"

Rectangle
width: animation.width; height: animation.height+8
AnimatedImageid: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 个 .Ro­tation 、 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;axisx:0;y:1;z:0angle:72

Row
Rectangle
width: 100;height: 100;color: "blue"
transform: Translatey:20 简单理解为改变的意思切换

Rectangle
width: 100;height: 100;color:"red"
transform: Translatey:-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"
修改对象的属性
PropertyChangstarget: 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 PropertyAnimationduration: 1000

MouseArea
anchors.fill: parent
onClicked: rect.x = mouse.x;

在信号处理器中创建动画： onClicked: PropertyAnimationtarget: 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"
PropertyChangestarget：rect;x:50;y:50


属性 对象
transitions: Transition
PropertyAnimationproperties: "x,y";duration: 1000

当 Rectangle 改变到 moved 状态时. Transition 将被触发 ,切换的 PropertyAnimation 将会使用动画将 x 和 y 属性改变到它们的新值

所有动画都继承Animation 元素 但是不能直接创建对象，但提供类必要的属性和和函数

easing属性控制属性值使用缓和曲线