シンプルな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 } 
     } 
    } 
} 

確かに、あなたが本当にあなただけのパスを変更する必要が視野の中心に現在の項目を配置したい場合は、開始点を中心に移動するなど。