import QtQuick 2.12
Item {
Rectangle {
id: rect
width: 100
height: 100
gradient: Gradient {
// position定义一个从0.0 - 1.0之间的位置
// color设置颜色
GradientStop {position: 0.0; color: "red"}
GradientStop {position: 0.33; color: "green"}
GradientStop {position: 1.0; color: "blue"}
}
Image {
width: 120
height: 120
// fillMode图片剪裁
// Image.Stretch 默认, 图片拉伸自适应,图片根据设置的宽度和高度显示,如果没设置宽度和高度,则按图片原大小显示
// Image.PreserveAspectFit 按比例缩放,不裁剪
// Image.PreserveAspectCrop 均匀缩放,必要时裁剪
// Image.TileVertically 水平拉伸,垂直平铺
// Image.TileHorizontally 垂直拉伸,水平平铺
// Image.Tile 像贴瓷砖一样
// Image.Pad 原始图像不做处理
fillMode: Image.Tile
// 如果加载图片大,最好在一个低优先级的线程中进行
asynchronous: true
// 图片来自网络,则会自动在其他线程中异步加载
// 图片会在内部进行缓存和共享,如果在几个IMage元素中使用了相同的source,那么会加载该图片的一个备份
source: "http:://www.exam.com/logo.png"
}
// BorderImage 元素通过缩放或平铺图片的各个部分来创建超出图片的边界
// 一个BorderImage元素将一个源图片分成9格区域(九宫格)
// 1 2 3
// 4 5 6
// 7 8 9
// 4个角(1, 3, 7, 9)不进行缩放
// 2和8通过horizontalTileMode属性设置的模式进行缩放
// 4和6通过verticalTileMode属性设置的模式进行缩放
// 中间部分(5)会结合horizontalTileMode和verticalTileMode属性设置的模式进行缩放
// border属性指定了源图片每个边缘的距离
// horizontalTileMode和verticalTileMode属性可以模式
// BorderImage.Stretch 拉伸
// BorderImage.Repeat 平铺但可能修剪最后的图片
// BorderImage.Round 平铺但是将图片进行缩小来确保最后的图片不进行修剪
BorderImage {
id: img
source: "logo.png"
width: 100
height: 100
border {left: 5; right: 5; top: 5; bottom: 5}
horizontalTileMode: BorderImage.Stretch
verticalTileMode: BorderImage.Stretch
}
// AnimatedImage可以用来播放包含了一系列帧的图片动画,如gif文件
AnimatedImage {
source: "logo.gif"
// currentFrame 当前帧
// frameCount 动画总长度
// playing 播放
// paused 暂停
}
// scale缩放
// scale小于1,缩小
// scale大于1,放大
// scale小于0,显示镜像效果
scale: 1.5
// rotation 指定顺时针旋转的度数
rotation: 30
//缩放以及旋转都是以transformOrigin属性指定的点为原点进行的
// transformOrigin一共有9个点(九宫格)
// 1(TopLeft) 2(Top) 3(TopRight)
// 4(Left) 5(Center) 6(Right)
// 7(BottomLeft) 8(Bottom) 9(BottomRight)
transformOrigin: "TopLeft"
// transform元素是一个基本对象,无法被直接实例化,
// 可用transform类型有3个Rotation, Scale, Translate
transform: [
// 旋转
// Rotation提供了坐标轴和原点属性
// 坐标轴有axis.x, axis.y, axis.z分别表示x轴, y轴, z轴
// origin.x和origin.y指定原点
// angle属性可用指定顺时针旋转的度数
Rotation {
origin.x: 30
origin.y: 30
axis: {x: 0; y: 1; z: 0}
angle: 12
},
// 缩放
// origin.x和origin.y指定原点
// xScale和yScale分别用来设置x轴和y轴方向上的缩放比例因子
Scale {
origin.x: 25
origin.y: 25
xScale: 3
yScale: 3
},
// 偏移
// x和y分别设置在x轴和y轴方向上的偏移量
Translate {
x: 1
y: 1
}
]
// 所有基于Item的对象都有一个默认状态
// 默认状态的状态名称为空字符串
// 还可以通过states的State对象来为其指定附加状态
// 每一个状态都有一个在本项目中唯一的名称
// 对于不是Item派生的对象可以通过StateGroup元素来使用状态
// 一个项目可以为其state属性指定一个空字符串来明确的将其状态设置为默认状态
// State可以
// 使用StateChangeScript运行一些脚本
// 使用PropertyChanges为一个对象重写现有的信号处理器
// 使用PropertyChanges为一个项目重定义父项目
// 使用AnchorChanges修改锚的值
states: [
State {
// when 当动作释放时返回原来的状态
name: "moved"; when: MouseArea.pressed
PropertyChanges {
target: rect
x: 50
y: 50
}
}
]
MouseArea {
onClicked: rect.state = "moved"
}
// PropertyAnimation是用来为属性提供动画的最基本的动画元素
// PropertyAnimation可以为real, int, color, rect, point, size, vector3d等属性设置动画
// NumberAnimation继承自PropertyAnimation, 对real和int提供了更高效的实现
// Vector3dAnimation继承自PropertyAnimation, 对vector3d提供了更高效的实现
// ColorAnimation继承自PropertyAnimation, 对color提供了更高效的实现
// RotationAnimation继承自PropertyAnimation, 对rotation提供了更高效的实现
// SmoothedAnimation是专门的NumberAnimation, 当目标值改变时在动画中为其提供一个平滑的变化
// SpringAnimation提供了一个想弹簧一样的动画,可以设置mass, damping, epsilon等属性
// ParentAnimation用来在改变父项目时产生动画(对应ParentChange)
// AnchorAnimation用来在改变锚时产生动画(对应AnchorChange)
// PauseAnimation在动画中间暂停
// ScriptAction允许在动画中执行javascript,也可以和StateChangeScript一起使用来重用已经存在的脚本
// PropertyAction在动画中间立即改变一个属性而不对该属性的变化使用动画
// 动画方式
// 1、使用属性值源来创建一个动画,可以立即为一个指定的属性使用动画
// 2、使用行为动画,当要给属性改变值时触发
// 3、在一个信号处理器中创建,当接收到一个信号时触发
// 4、作为一个独立动画,可以在脚本中进行,也可以重新绑定到不同对象
// 5、使用切换,在不同状态间提供动画
// 1、使用属性值源来创建一个动画,可以立即为一个指定的属性使用动画
// 要使用“动画 on 属性”语法
PropertyAnimation on x {to: 50; duration: 1000; loops: Animation.Infinite}
// 2、使用行为动画,当要给属性改变值时触发
// 使用Behavior为一个属性改变指定一个默认的动画
Behavior on x { PropertyAnimation {duration: 500} }
// 3、在一个信号处理器中创建,当接收到一个信号时触发
MouseArea {
onClicked: PropertyAnimation {target: rect; properties: "x,y"; to: 50; duration: 1000}
}
// 4、作为一个独立动画,可以在脚本中进行,也可以重新绑定到不同对象
PropertyAnimation {
id: animation
target: rect
properties: "x,y"
duration: 1000
}
MouseArea {
onClicked: {
animation.to = 50
// 一个独立的动画对象默认是没有运行的,必须使用running属性或者start()和stop()函数来运行
animation.running = true
}
}
// 5、使用切换,在不同状态间提供动画
// 要创建一个切换,需要定义一个Transition对象,然后将其添加到项目的transitions
// 当Rectangle改变到moved状态时,Transition将被触发
transitions: Transition {
PropertyAnimation { target: rect; properties: "x,y"; duration: 1000}
}
// 组合动画
// SequentialAnimation中的动画会一个接一个的运行
// ParallelAnimation中的动画会同时运行
SequentialAnimation {
loops: Animation.Infinite
NumberAnimation {to: rect.height; easing.type: Easing.OutBounce; duration: 2000}
PauseAnimation {duration: 1000}
NumberAnimation {to: 0; easing.type: Easing.OutQuad; duration: 2000}
}
ParallelAnimation {}
//Flickable元素可以将其子项目设置在一个可以拖拽和弹动的界面上,使得子项目的视图可以滚动
//visibleArea属性可以显示滚动条,visibleArea.xPosition, visibleArea.yPosition, visibleArea.widthRatio, visibleArea.heightRatio
Flickable {
width: 200
height: 200
contentWidth: 100
contentHeight: 100
clip: true // Flickable不会自动剪裁它的内容,可以将clip设置为true来隐藏超出区域的内容
}
// Flipable可以在其正面和反面进行翻转
// Flipable有一个flipped的布尔值属性,当在Flipable中的MouseArea上单击鼠标时都会切换该属性的值
// 当flipped为true时,项目变为back状态,为false时,恢复到默认状态
Flipable {
front: Image {source: "front.png"}
back: Image {source: "back.png"}
}
}
}