具有居中当前项的简单 PathView

Posted 2023-02-16

【中文标题】具有居中当前项的简单 PathView

【英文标题】：Simple PathView with centered Current Item

【发布时间】：2017-11-22 09:23:53

【问题描述】：

我刚刚开始使用 QML 进行编程，我需要用一些图像制作一个简单的 Carousel。我发现最简单的方法是使用 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

【参考方案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 
        
    

当然，如果您真的想将当前项目放在视图的中心，您只需更改路径，即将起点移动到中心等。

【讨论】：

如果我移动起点（屏幕中间的 startX ），我的左侧没有任何图像，我想要那个。你的例子很好，但我想要我的 2D 旋转木马，而不是 3D。我怎样才能做到这一点？

你只需要改变你想要的路径。

我已经更改了示例，现在检查一下。

是的，现在它们都居中了。与我的示例相同的结果：所有图像都显示在一行上，但 currentItem （或选定的项目）不在中心，它总是在左边！

我已经阅读了文档，看起来我已经找到了解决方案。见我编辑的答案。