2016-10-27 9 views
3

SwipeView要素に基づいてParallax Viewを作成しようとしています。 QMLドキュメントの例は、リストビューでそれを達成する方法を示しています。QML:SwipeViewのアイテムの中間スワイプ位置

Image { 
    id: background 
    source: "background.png" 
    fillMode: Image.TileHorizontally 
    x: -list.contentX/2 
    width: Math.max(list.contentWidth, parent.width) 
} 

ListView { 
    id: list 
    anchors.fill: parent 
    spacing: 20 
    snapMode: ListView.SnapToItem 
    orientation: ListView.Horizontal 
    highlightRangeMode: ListView.StrictlyEnforceRange 
    boundsBehavior: Flickable.StopAtBounds 
    maximumFlickVelocity: 1000 

    model: _some_cpp_list 
    //Loader is used as a workaround for QTBUG-49224 
    delegate: Loader { 
     id: loaderDelegate 
     source: "MyDelegate.qml" 
     width: myScreen.width 
     height: myScreen.height 
     onLoaded: { 
      loaderDelegate.item.logic = modelData 
     } 
    } 
} 

、これは動作しますが、私はそれが私が望む行動を達成するために以下のコードを必要とするため、SwipeViewを使用したいリストビューのinstad:

SwipeView { 
    id: list 
    anchors.fill: parent 
    spacing: 20 
    Repeater { 
     model: _some_cpp_list 
     delegate: MyDelegate { 
      logic: modelData 
     } 
    } 

x: -list.contentX/2

は、私はこのラインで使用するオフセットSwipeViewの現在の「X」の位置やスワイプにアクセスできる方法はありますか?

私が今までに見つけた最も近いものはx: -swipeView.contentData[0].x/2ですが、スムーズな移行ではなく項目のジャンプが発生します。

+2

アイテムの位置がListViewによって管理されるため、水平方向のListViewのアイテムのx座標を制御することはできません。最初の例でアイテムの位置を操作できる理由は、実際にデリゲートの位置を操作していないが、別のアイテムがLoaderデリゲートにラップされているためです。 SwipeViewページでは、同様のラッパーを使用しない限り、QML Translateを使用して変換を適用できます。 SwipeViewの内部ListViewとそのcontentXには、SwipeView.contentItemを介してアクセスできます。 – jpnurmi

+2

私はどれくらい助けてくれるのか分かりませんが、http://doc.qt.io/qt-5/qtquick-views-example.htmlのParallaxViewの例もチェックしてください。 – jpnurmi

+0

@jpnurmiそう...これはあまりにもいいコメントをコメントにするコメント。 :D是非、私はそれをupvoteしましょう! – BaCaRoZzo

答えて

2

項目の位置がListViewで管理されているため、項目の横座標をListViewに制御することはできません。最初の例で項目の位置を操作できる理由は、デリゲートの位置を実際には操作していないが、Loaderデリゲートにラップされた別の項目です。

SwipeViewページの場合、同様のラッパーを使用しない場合は、Translate QMLタイプを使用して変換を適用できます。 SwipeViewの内部ListViewにアクセスし、contentXを介してSwipeView.contentItemにアクセスできます。所望の視差効果を計算することは、読者の練習として残されている。 :)

PS。 https://doc.qt.io/qt-5/qtquick-views-example.htmlParallaxViewの例も参照してください。

関連する問題