QML:SwipeView中项目的中间滑动位置

问题描述

我正在尝试基于SwipeView元素创建视差视图. QML文档中的示例说明了如何使用ListView实现它:

I'm trying to create a Parallax View based on a SwipeView element. Examples in QML documentation illustrate how to achieve it with ListView:

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来实现ListView，因为它需要更少的代码来实现我想要的行为:

Now, this works, but instad of ListView I want to use SwipeView, since it requires less code to achieve the behaviour I want:

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

有什么方法可以访问SwipeView的当前"x"位置或在此行中使用的滑动偏移量:

Is there any way I could access SwipeView's current "x" position or swipe offset to use in this line:

x: -list.contentX / 2?

到目前为止，我找到的最接近的是x: -swipeView.contentData[0].x / 2，但这会导致跳过项目而不是平稳过渡.

The closest I've found so far is x: -swipeView.contentData[0].x / 2, but it causes jumping over items rather than smooth transition.

推荐答案

您无法控制水平ListView中项目的x坐标，因为项目位置由ListView管理.之所以能够在第一个示例中操作项目位置，是因为您实际上不是在操纵委托人位置，而是将另一个项目包裹在Loader委托中.

You can't control the x-coordinate of items in a horizontal ListView, because the item positions are managed by the ListView. The reason why you're able to manipulate the item positions in your first example is that you're not actually manipulating the delegate position, but another item wrapped into a Loader delegate.

对于SwipeView页，除非要使用类似的包装程序，否则可以使用Translate QML类型应用转换.您可以通过SwipeView.contentItem访问SwipeView的内部ListView及其contentX.计算所需的视差效果作为练习留给读者. :)

For SwipeView pages, unless you want to use similar wrappers, you could apply a transformation using the Translate QML type. You can access SwipeView's internal ListView and its contentX via SwipeView.contentItem. Calculating the desired parallax effect is left as an exercise for the reader. :)

PS.另请参见ParallaxView示例，位于 https://doc.qt.io /qt-5/qtquick-views-example.html .

PS. See also the ParallaxView example at https://doc.qt.io/qt-5/qtquick-views-example.html.

这篇关于QML:SwipeView中项目的中间滑动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！