在学习了MouseArea和Text之后,这一节开始学习image相关的知识。
和上一节QT Demo 之 text一样,imageelements的入口也是一个LauncherList,然后添加了5个子example,下面我就针对每一个子example进行详细分析。
borderimage.qml
首先看到的是borderimage.qml的主体结构是由一个BorderImageSelector和Flickable组成的:
Rectangle {
id: page
width: 320
height: 480
BorderImageSelector {...}
Flickable {...}
}
BorderImageSelector
这里的BorderImageSelector是一个自定义的Component,由content/BorderImageSelector.qml文件定义。
从Demo的运行效果图上可以看到BorderImageSelector实际上是windows上部的左右导航按钮,如下图所示:
查看BorderImageSelector.qml的代码,也可以看到有一个有两个左右的按钮图片、一个按钮相应函数和一个使用Repeater来显示的文本:
Item {
id: selector
property int curIdx: 0
property int maxIdx: 3
property int gridWidth: 240
property Flickable flickable
width: parent.width
height: 64
function advance(steps) {...}
Image {...}
Image {...}
Repeater {...}
}
两个左右的按钮,使用的是同一张图片,只不过一个做了镜像;
按钮的点击操作也是一样,一个向左一个向右(调用selector.advance()函数,传递不同的参数来实现);
至于两个按钮的透明度,则是根据当前的是否是最左(或最右)来判断后,进行设置,以便给用户进行操作提示;
Image {
source: "arrow.png"
MouseArea{
anchors.fill: parent
onClicked: selector.advance(-1)
}
anchors.left: parent.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
opacity: selector.curIdx == 0 ? 0.2 : 1.0
Behavior on opacity {NumberAnimation{}}
}
Image {
source: "arrow.png"
mirror: true
MouseArea{
anchors.fill: parent
onClicked: selector.advance(1)
}
opacity: selector.curIdx == selector.maxIdx ? 0.2 : 1.0
Behavior on opacity {NumberAnimation{}}
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
}
advance()函数,则是通过改变curIdx的值影响两个Image以及Repeater的显示效果,通过改变flickable.contentX的值,改变外面的Flickable显示效果:
function advance(steps) {
var nextIdx = curIdx + steps
if (nextIdx < 0 || nextIdx > maxIdx)
return;
flickable.contentX += gridWidth * steps;
curIdx += steps;
}
最后的Repeater则是通过给定的数据([ "Scale", "Repeat", "Scale/Repeat", "Round" ]),按照指定的方式(delegate属性描述)进行多个item的显示,这里分别是设定了text的x座标以及透明度参数:
Repeater {
model: [ "Scale", "Repeat", "Scale/Repeat", "Round" ]
delegate: Text {
text: model.modelData
anchors.verticalCenter: parent.verticalCenter
x: (index - selector.curIdx) * 80 + 140
Behavior on x { NumberAnimation{} }
opacity: selector.curIdx == index ? 1.0 : 0.0
Behavior on opacity { NumberAnimation{} }
}
}
注:在BorderImageSelector.qml中多次使用了类似下面的的动画效果:
Behavior on opacity {NumberAnimation{}}
因为这里NumberAnimation{}动画是定义在Behavior中,所以其默认的from就是其属性变化的开始值(如上面的1.0),其默认的to就是其属性变化的结束值(如上面的0.0),duration的默认值是250ms。
Flickable子元素
该示例中除了上面的导航条,剩余的元素都放到了Flickable元素中,并且按照Grid的方式进行排列:
Flickable {
id: mainFlickable
width: parent.width
anchors.bottom: parent.bottom
anchors.top: selector.bottom
interactive: false //Animated through selector control
contentX: -120
Behavior on contentX { NumberAnimation {}}
contentWidth: 1030
contentHeight: 420
Grid {...}
}
注1:contentHeight的值是420,大小和整体的高度(480)减去导航条的高度(64)差不多,而contentWidth的值是1030,大概是整体宽度(320)的3倍多;
注2:在运行的程序中,我们发现无法使用鼠标进行水平方向的拖动,这与Flickabl