QT Demo 之 imageelements

在学习了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