Qt_Quick开发实战精解_4

属性动画元素

PropertyAnimation 提供动画属性被 NunberAnimation colorAnimation RotationAnimation Vector3dAnimation 继承

colorAimation on color {from : "red";to "yellow";duration: 1000}

SmoothedAnima t ion: 它是一个专门的 NumberAnimation ,当目标值改变时在动画中为其提供了一个平滑的变化;)- SpringAnimation: 提供了一个像弹簧 一样的动画,可以设置 mass 、 damping 和epsilon 等属性;
)- ParentAnimation: 用来 在改变父项 目时产生动 画〈对应ParentChange 元素) ;)- Anchor Animation: 用来在改变销时产生动画〈对应 AnchorChanges 元素).
动画作用于： x
PropertyAnimation on x {to: 50;duration: 1000; easing.type:Easing.OutBounce}

ParallelAnimation中动画会同时进行
SequentialAnimation 动画会一个接一个的运行

一个上下跳动的图片
Rectangle {
width: 400
height: 600
id: rect

Image{
id: image
source: "qt.png"
anchors.horizontalCenter: parent.horizontalCenter
y:0
SequentialAnimation on y{
loops: Animation.Infinite //让动画处于循环状态
NumberAnimation{
to: rect.height-image.height 改变y坐标
easing.type: Easing.OutQuad;duration: 1000}

PauseAnimation{duration: 1000}
NumberAnimation{to: 0;easing.type: Easing.OutQuad;duration:1000} 改变y坐标
PauseAnimation{duration: 1000} 暂停
}
}

}

Rectangle {
width: 400
height: 600
id: rect
color: "red"

MouseArea{id: mouseArea; anchors.fill:parent}
states: State{
name: "pressed";when : mouseArea.pressed 当按下鼠标时颜色颜色变为蓝色

PropertyChanges {
target: rect;color: "blue";
y: mouseArea.mouseY;width: mouseArea.mouseX //声明要改变
}
}
transitions:Transition{ //定义具体的转变内容
SequentialAnimation{ //动画一个一个运行

ColorAnimation {

duration: 200
}

PauseAnimation {
duration: 100
}

NumberAnimation{
duration: 500
easing.type: Easing.OutBounce
targets: rect
properties: "y"
}

NumberAnimation{
duration: 800
easing.type: Easing.InOutQuad
targets: rect
properties: "width"
}
}
}
}

PauseAnimation: 在动花中间进行暂停;
ScriptAction: 允许在动向中执行 JavaScript,也可以和StateChangeScript起使用来重用已经符在的脚本;
PropertyAction: 在动画中间立即改变 一 个属性而不对该属性的变化使用
动画

Flickable(弹动) 和 Flipable

Flickable 将其子项目设置在一个可以拖拽和弹动的界面上

如果模型中没有包含命名的角色,那么可以通过 modelData 角色来提供数据。

import QtQuick 2.6
import QtQuick.Window 2.2
/*
Rectangle{

width:360;height:360
color: "blue"

//图片比窗口大 可以拖拽查看
Flickable{
id:flickable
width: 200;height: 200
//设置拖拽内容的大小
contentWidth: image.width;contentHeight: image.height
clip: true
Image{id:image;source: "qt.png"}

}
Rectangle{
id: scrollbar
anchors.right:flickable.right
y:flickable.visibleArea.yPosition*flickable.height >0 ? flickable.visibleArea.yPosition*flickable.height:0
width: 10
height: flickable.visibleArea.heightRatio* flickable.height
color: "black"
}

}

//可以将正反面反转
Flipable{
id: flipable
width: 200
height: 200
property bool flipped : false

front: Image{source: "qt.png";anchors.centerIn:parent}
back: Image{source: "qt.png";anchors.centerIn: parent}

transform:Rotation //旋转
{
id: rotation
origin.x : flipable.width/3
origin.y: flipable.heihgt/3
axis.x: 0;axis.y:1;axis.z: 0
angle: 0 //改变角度

}

states:State{
name: "back"
PropertyChanges {
target: rotation;angle: 180

}
when: filpable.flipped

}
transitions: Transition{

NumberAnimation{target:rotation;property : "angle";duration: 2000}

}

MouseArea{
anchors.fill:parent
onClicked:{ flipable.flipped = !flipable.flipped
console.log("clicked")
}
}

}

import QtQuick 2.0

Flipable {
id: flipable
width: 240
height: 240

property bool flipped: false

front: Image { source: "qt.png"; anchors.centerIn: parent }
back: Image { source: ""; anchors.centerIn: parent }

transform: Rotation {
id: rotation
origin.x: flipable.width //设置旋转的中心
origin.y: flipable.height/5
axis.x: 1; axis.y: 1; axis.z: 1 // set axis.y to 1 to rotate around y-axis将axis.y设置为1以围绕y轴旋转
angle: 0 // the default angle
}

states: State {
name: "back"
PropertyChanges { target: rotation; angle: 180 } //旋转角度
when: flipable.flipped
}

transitions: Transition {
NumberAnimation { target: rotation; property: "angle"; duration: 1000 } //数字动画 目标 属性 持续时间
}

MouseArea {
anchors.fill: parent
onClicked: flipable.flipped = !flipable.flipped
}
}

 

模型和视图
QML的 一些 视图项目(虫[1 ListView 、 GridView 和Repeater等) 使用数据模型来为其提供数据进行显示。这些项目通常' 也需要一个委托(delegate) 组件来为模型中的每一个条日创建一个实例，模型可以是静态的,也可以进行动态的修改、移除或者移动项同
通过命名委托绑定 的 数据角色来为委托提供数据

 

 

Item{

width:200
height: 200
ListModel{ //模型 提供数据
id: myModel
ListElement{type: "dog";age: 5}
ListElement{type: "dog";age:8}
//一个特殊的角色 index
//如果装模型中没有包含命名的角色,那么可以通过 modelData 角色来提供数据。
}

Component{ //委托组件 设置显示方式
id: myDelegate
Text{text: type + ":"+age}

}

ListView{ //视图 进行显示

anchors.fill: parent
model: myModel
delegate:myDelegate

}
}

XmlListModel允许从一个XML数据源创建一个模型,可以通过 XmlRole 元素来指定一个角色
该模型可以非常容易创建基于网络的应用程序
xmlListModel{ //提供数据

}

 

Rectangle{

width: 380
height:380

XmlListModel{ //提供数据
id: feedModel
source:"http://rss.news.yahoo.com/rss/oceania"
query:"rss/channel/item"
XmlRole{name:"title";query:"title/string()"}
XmlRole{name:"link";query:"link/string()"}
XmlRole{name: "description";query:"description/string()"}

}
ListView{
anchors.fill: parent
model: feedModel
delegate: Column{
Text{text:"title"+title}
Text{text: "link"+link}
Text{text:"descrption"+description}
MouseArea{}
}
}
}

在模型中定义函数： setData(int row,const QString &field_name,QVariant new_value)
然后在委托中调用

ListView.view.model.setData(index,filed,value)

ListView 排列条目
GridView 网格
PathView 路径

WebView 需要的Flickable一起创建视图
模型可以定义在一个独立的文件中

 

highlight: Rectangle{color: "lightsteelblue",radius: 5(边角圆滑)}

Component{

id: contactDlelgate
Rectangle{
id: wrapper
width: wrapper.width
color: ListView.isCurrentItem? "black": "red"
Text{
id: contactInfo
text: name+":" number
color: wrapper.ListView.isCurrent? "red":"black"
}
}
}

 

将图片放入网格中：

 

Rectangle{
width: 400
height: 400

color: "white"

ListModel{
id: appModel
ListElement{name:"qt";icon:"qt.png"}
ListElement{name:"qt";icon:"qt.png"}
ListElement{name:"qt";icon:"qt.png"}
ListElement{name:"qt";icon:"qt.png"}
ListElement{name:"qt";icon:"qt.png"}
ListElement{name:"qt";icon:"qt.png"}

}

Component{
id: appDelegate
Item{
width: 100
height: 100
Image{
id: myIcon
width: 70;height:70
y:20
anchors.horizontalCenter:parent.horizatalCenter
source: icon

}
Text{
anchors {top: myIcon.bottom
horizontalCenter: parent.horizontalCenter

}
text: name

}
}

 

}
Component{
id: appHighlight
Rectangle{width: 80;height: 80;color: "lightsteelblue"}

}

GridView{
anchors.fill: parent
cellWidth: 100;cellHeight: 100
highlight: appHighlight
focus: true //为了可以使用导航建
model: appModel
delegate: appDelegate
}
}

import QtWebKit 3.0

Flickable{ //中心区域可以拖拽

width: 400
height:300
contentWidth: webView.width;contentHeight: wedView.height

WebView
{
id: webView
url:"http://www.baidu.com"
}
}

file:///home/hmsnc/qml/easing/easing.qml:284 module "QtWebKit" is not installed

*/

Rectangle{
width: 400
height: 240
color: "white"

ListModel{ //模型提供数据
id: appModel
ListElement{name:"qt1";icon:"qt.png"}
ListElement{name:"qt2";icon:"qt.png"}
ListElement{name:"qt3";icon:"qt.png"}
ListElement{name:"qt5";icon:"qt.png"}
ListElement{name:"qt6";icon:"qt.png"}
ListElement{name:"qt7";icon:"qt.png"}

}

Component{ //委托实例每一条数据
id: appDelegate
Item{
width: 100;height: 100
scale: PathView.iconScale //范围
Image{
id: myIcon
y:20;anchors.horizontalCenter: parent.horizontalCenter
width: 80;height: 80
source: icon
smooth: true

}
Text{
anchors {top: myIcon.bottom
horizontalCenter: parent.horizontalCenter

}
text: name
smooth: true
}

MouseArea{
anchors.fill: parent
onClicked: view.currentIndex = index
}

}
}

Component{
id: appHighlight
Rectangle{width: 80;height: 80;color: "lightsteelblue"}

}

PathView{
id: view
anchors.fill: parent
highlight: appHighlight
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5 //首选突出显示
focus: true
model: appModel
delegate: appDelegate
path: Path{ //有一个或则多个路径段组成 Pathline PathQuad PathCubic
startX: 10 //设置起点
startY: 50


PathAttribute {name:"iconScale";value:0.5}
PathQuad{x:200;y:150;controlX:50;controlY:200}

PathAttribute {name:"iconScale";value:0.5}
PathQuad{x:390;y:50;controlX:350;controlY:200}

PathAttribute {name:"iconScale";value:0.5}

}

}
}

直线路径
Path{
startX:50; startY:50
pathLine{x:200;y:200}
}

条目间的空隙用PathPercent对象调节