2014-01-20 14 views
4

我一直在努力實現滾動一種使用QML.Below圖像的Pathview元素的東西之間的距離顯示我想要的降低日曆和信息元素之間的距離的進展 scroll 。請幫忙。減少設爲Qml pathview成員

下面是我的滾動代碼。

import QtQuick 2.0 

Rectangle { 

//  property real rotationOrigin: PathView.origin 
    id: scroll 
    width: 800; height: 480 
    color: "white" 
// property real rotationAngle 
    ListModel { 
     id: appModel 
     ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" } 
     ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" } 
     ListElement { name: "Camera"; icon: "pics/Camera_48.png" } 
     ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" } 
     ListElement { name: "Messaging"; icon: "pics/EMail_48.png" } 
     /*ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" } 
     ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" }*/ 
    } 

    Component { 

     id: appDelegate 
     Item { 
      id: item 
      width: 240; height: 80 
      scale: PathView.iconScale 
      property real rotationAngle: PathView.angle 
      transform: Rotation { 
       id: rotation 
       origin.x: item.width/2 
       origin.y: item.height/2 
       axis.x: 1; axis.y:0 ; axis.z: 0 
       angle: rotationAngle 
      } 

      Image { 
       id: myIcon 
       y: 20; anchors.verticalCenter: parent.verticalCenter 
       source: icon 
       smooth: true 
      } 
      Text { 
       anchors { 
        leftMargin: 10 
        left: myIcon.right; verticalCenter: parent.verticalCenter } 
       text: name 
       font.pointSize: 25 
       smooth: true 
      } 

      MouseArea { 
       anchors.fill: parent 
       onClicked: { 
        view.currentIndex = index 
        console.log("onClicked" + index); 
       } 

      } 
     } 
    } 

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

    PathView { 
     Keys.onRightPressed: if (!moving) { incrementCurrentIndex(); console.log(moving) } 
     Keys.onLeftPressed: if (!moving) decrementCurrentIndex() 
     id: view 
     anchors.fill: parent 
     highlight: appHighlight 
     preferredHighlightBegin: 0.5 
     preferredHighlightEnd: 0.5 
     focus: true 
     model: appModel 
     delegate: appDelegate 
     path: Path { 
      startX: scroll.width/2 
      startY: 0 
      PathAttribute { name: "z"; value: 0 } 
      PathAttribute { name: "angle"; value: 75 } 
      PathAttribute { name: "iconScale"; value: 0.85 } 
      PathLine { x: scroll.width/2; y: scroll.height/4; } 
      PathAttribute { name: "z"; value: 50 } 
      PathAttribute { name: "angle"; value: 70 } 
      PathAttribute { name: "iconScale"; value: 0.85 } 
      PathLine { x: scroll.width /2; y: scroll.height/2; } 
      PathAttribute { name: "z"; value: 100 } 
      PathAttribute { name: "angle"; value: 0 } 
      PathAttribute { name: "iconScale"; value: 1.0 } 
      PathLine { x: scroll.width /2; y: 3*(scroll.height/4); } 
      PathAttribute { name: "z"; value: 50 } 
      PathAttribute { name: "angle"; value: -70 } 
      PathAttribute { name: "iconScale"; value: 0.85 } 
      PathLine { x: scroll.width /2; y: scroll.height; } 
      PathAttribute { name: "z"; value: 0 } 
      PathAttribute { name: "angle"; value: -75 } 
      PathAttribute { name: "iconScale"; value: 0.85 } 
     } 
    } 
} 

回答