현재 중심의 단순 PathView

Question

방금 ​​QML로 프로그래밍을 시작 했으므로 일부 이미지가있는 간단한 회전식 메뉴를 만들어야합니다. 가장 간단한 방법은 PathView를 사용하는 것입니다. 나는 현재 아이템을 뷰의 중앙에 놓으려고 시도했지만 실패했다. 여기에 제가 한 코드가 있습니다.

Rectangle { 
    id: rectangle 
    height: 200 
    color: "#00000000" 
    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 
    Layout.fillWidth: true 

    PathView { 
     id: carouselView 
     anchors.fill: parent 
     model: listModel 

     delegate: Image { 
      width: PathView.isCurrentItem ? 256 : 128 
      height: PathView.isCurrentItem ? 256 : 128 
      source: iconSource 
     } 
     path: Path { 
      startX: 0 
      PathLine { 
       x: 800 
       y: 0 
      } 
     } 
     Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 
    } 
} 

ListModel { 
    id: listModel 
    ListElement { 
     iconSource: "qrc:///images/chair.svg" 
    } 
    ListElement { 
     iconSource: "qrc:///images/chair.svg" 
    } 
    ListElement { 
     iconSource: "qrc:///images/chair.svg" 
    } 
    ListElement { 
     iconSource: "qrc:///images/chair.svg" 
    } 
} 

원하는 효과는 가운데 현재 항목이있는 간단한 수평 회전식 컨베이어입니다. 사용 현재 버전 : 여기에 5.6

Answer 1

이 PathView 사용하여 간단한 회전 목마의 예는 다음과 같습니다

import QtQuick 2.9 
import QtQuick.Controls 2.2 

ApplicationWindow { 
    visible: true 
    width: 640 
    height: 640 
    Component { 
     id: delegate 
     Item { 
      width: 200; height: 200 
      scale: PathView.iconScale 
      opacity: PathView.iconOpacity 
      z: PathView.iconOrder 
      Image { anchors.fill: parent; source: modelData } 
     } 
    } 

    PathView { 
     id: view 
     anchors.fill: parent 
     anchors.bottomMargin: 150 
     anchors.topMargin: 50 
     pathItemCount: 7 
     preferredHighlightBegin: 0.5       // 
     preferredHighlightEnd: 0.5       // That should center the current item 
     highlightRangeMode: PathView.StrictlyEnforceRange // 
     model: 
      [ 
      "http://placeimg.com/200/200/any?rand=" + Math.random(), 
      "http://placeimg.com/200/200/any?rand=" + Math.random(), 
      "http://placeimg.com/200/200/any?rand=" + Math.random(), 
      "http://placeimg.com/200/200/any?rand=" + Math.random(), 
      "http://placeimg.com/200/200/any?rand=" + Math.random(), 
      "http://placeimg.com/200/200/any?rand=" + Math.random(), 
      "http://placeimg.com/200/200/any?rand=" + Math.random(), 
      "http://placeimg.com/200/200/any?rand=" + Math.random(), 
      ] 
     delegate: delegate 
     path: Path { 
      startX: 0; startY: view.height/2 
      PathAttribute { name: "iconScale"; value: 0.2 } 
      PathAttribute { name: "iconOpacity"; value: 10.2 } 
      PathAttribute { name: "iconOrder"; value: 0 } 
      PathLine {x: view.width/2; y: view.height/2 } 
      PathAttribute { name: "iconScale"; value: 1.2 } 
      PathAttribute { name: "iconOpacity"; value: 1 } 
      PathAttribute { name: "iconOrder"; value: 8 } 
      PathLine {x: view.width; y: view.height/2 } 
     } 
    } 
} 

물론을, 당신이 정말로 그냥 경로를 변경해야 할 뷰의 중앙에 현재 항목을 배치 할 경우, 즉, 시작점을 중앙으로 옮깁니다.