QML中的Model View——一個PathView實例

原創

2020-02-21 03:53

引言

QML中的Model View——一個ListView實例這篇文章爲大家介紹了 QML 中的 Model View，並提供了一個 ListView 的實例，本文將在此基礎上再爲大家提供一個 PathView 的例子。這個例子同樣也是很簡單的，僅用了一百二十行的 QML 代碼，在 N8 上運行的效果見下文所附圖片。

PathView主要代碼分析

爲了簡單明瞭，我們把所有需要的組件都寫到了main.qml中。我們一部分一部分來看一下。

    PathView {
        id: view
        focus: true
        model: myModel
        delegate: myDelegate
        anchors.fill: parent
        pathItemCount: 13
 
        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        highlightRangeMode: PathView.StrictlyEnforceRange
 
        flickDeceleration: 390
        path: myPath
    }

我們這裏使用了 QML PathView Element。與 ListView 類似，它也有需要有 Delegate 和 Model，只是說它多出了一個 Path，這是 PathView 所特有的，也是其特色所在。

下面我們看下 Path 是如何定義的：

    Path {
        id: myPath
        startX: 0; startY: 150
        PathAttribute {name: "rotateY"; value: 50.0}
        PathAttribute {name: "scalePic"; value: 0.5}
        PathAttribute {name: "zOrder"; value: 1}
 
        PathLine{x:180; y: 150}
        PathPercent {value: 0.44}
        PathAttribute {name: "rotateY"; value: 50.0}
        PathAttribute {name: "scalePic"; value: 0.5}
        PathAttribute {name: "zOrder"; value: 10}
 
        PathQuad{x:320; y: 190; controlX: 290; controlY: 190}
        PathPercent {value: 0.50}
        PathAttribute {name: "rotateY"; value: 0.0}
        PathAttribute {name: "scalePic"; value: 1.0}
        PathAttribute {name: "zOrder"; value: 50}
 
        PathQuad{x:460; y: 150; controlX: 510; controlY: 150}
        PathPercent {value: 0.56}
        PathAttribute {name: "rotateY"; value: -50.0}
        PathAttribute {name: "scalePic"; value: 0.5}
        PathAttribute {name: "zOrder"; value: 10}
 
        PathLine{x:640; y: 150}
        PathPercent {value: 1.00}
        PathAttribute {name: "rotateY"; value: -50.0}
        PathAttribute {name: "scalePic"; value: 0.5}
        PathAttribute {name: "zOrder"; value: 1}
    }

通俗一點講 Path 就是 Items 所走的線路，我們畫好一條線，那麼所有 Items 就會沿着這條線走。這條線可以由很多段線段連接而成，線段可以使直線 PathLine，可以使二次貝塞爾曲線 PathQuad，也可以是三次貝塞爾曲線 PathCubic。

在每段線段的末尾端點，我們可以自定義一些Item的屬性，這樣當Item移動到這個點的時候，它就會具有我們所設置的屬性。這樣就給了我們很大的自由發揮空間，我們可以設置出很多我們想要的效果。
這裏的屬性名我們可以任意設置，在 Delegate 中是可以直接引用這些屬性名的。

然後我們繼續看 Delegate 是如何做的：

    Component {
        id: myDelegate
 
        Item{
            property real tmpAngle : PathView.rotateY
            property real scaleValue: PathView.scalePic
            width: 340
            height: 260
            visible: PathView.onPath
            z: PathView.zOrder
 
            Image{
                id:myImage
                width: 340
                height: 260
                source: picName
                anchors.horizontalCenter: parent.horizontalCenter
                smooth: true
            }
            Image {
                id: subImage
                width: 340
                height: 260
                source: picName
                anchors.horizontalCenter: parent.horizontalCenter
                smooth: true
                transform: Rotation { origin.x: 0; origin.y: 260; axis { x: 1; y: 0; z: 0 } angle: 180 }
            }
            Rectangle{
                y: myImage.height;
                x: -1
                width: myImage.width + 1
                height: myImage.height
                gradient: Gradient {
                    GradientStop { position: 0.0; color: Qt.rgba(0,0,0, 0.7) }
                }
            }
 
            transform:[
                Rotation{
                    angle: tmpAngle 
                    origin.x: 340/2
                    axis { x: 0; y: 1; z: 0 }
                },
                Scale {
                    xScale:scaleValue; yScale:scaleValue
                    origin.x: 340/2;   origin.y: 260/2
                }
            ]
        }//Item
    }

非常簡單，畫了張圖片並對其進行了旋轉和縮放，還做了倒影效果（由於手機性能限制，我們不能做的很精細，在 PC 機上做精細之後效果會更好）。

Model 的定義非常簡單只是提供了幾張圖片而已，實際應用中大家可以根據自己的需要設置。

   ListModel {
        id: myModel
        ListElement { picName: "pics/1.png" }
        ListElement { picName: "pics/2.png" }
        ListElement { picName: "pics/3.png" }
        ListElement { picName: "pics/4.png" }
        ListElement { picName: "pics/7.png" }
        ListElement { picName: "pics/8.jpg" }
        ListElement { picName: "pics/9.jpg" }
        ListElement { picName: "pics/10.jpg"}
        ListElement { picName: "pics/5.png" }
        ListElement { picName: "pics/6.png" }
    }

原文鏈接