qml PathView实现滚动选择项

路径视图PathView

简要:将数据模型提供的数据存放在路径上显示出来
所以PathView需要几个关键要素才能输出，如下:

PathView {
            anchors.fill: parent
            delegate: cardDelegate //展示数据使用的delegate
            model: datamodel  //数据模型
            path: path_view   //路径配置
            pathItemCount: 5  //显示的个数
        }

接下来先说说数据模型model，创建5个数据

ListModel {
        id:datamodel;
        ListElement {name:"德里克罗斯";pic: "image/rose.png";}
        ListElement {name:"卡梅罗安东尼";pic: "image/an.png";}
        ListElement {name:"詹姆斯哈登";pic: "image/harden.png";}
        ListElement {name:"科比布莱恩特";pic: "image/kobe.png";}
        ListElement {name:"凯里欧文";pic: "image/living.png";}

    }

数据模型model写好后，编写展示数据模型的cardDelegate

Component{
     id:cardDelegate
     Column{
         width: 64; height: 64
         scale: PathView.picScale; //尺寸大小
         opacity: PathView.picOpacity;//透明度
         z:PathView.picZ;
         Image {
             anchors.horizontalCenter: nameText.horizontalCenter
             width: 64;
             height: 64;
             //fillMode :Image.TileVertically
             source: pic
          }
          Text {
             id:nameText
             font.pointSize: 13
             color: "red"
             text: qsTr(name)
          }
     }
}

最后就是显示的路径

Path{
        id:path_view
        //贝慈尔曲线
        startX:430;startY:300
       // PathAttribute {name:"picZ";value: 0;}
       // PathAttribute {name:"picAngle";value: 70;}
        PathAttribute {name:"picScale";value: 1.00;}
        PathAttribute {name:"picOpacity";value: 1.00;}
        PathQuad{x:430;y:240;controlX:600;controlY:270;}
       // PathAttribute {name:"picZ";value: 100;}
       // PathAttribute { name:"picAngle";value: -70;}
        PathAttribute {name:"picScale";value: 0.50;}
        PathAttribute {name:"picOpacity";value: 0.50;}
        PathQuad{x:430; y:300; controlX:260;controlY:270}
        
    }

这里的难点大概是画曲线，我也是琢磨了一会儿，startX和startY是起始点，然后PathQuad中的x和y是终止点，controlX和controlY是拉伸点(可以这么认为：controlX和controlY是中间点，用来变成一条曲线的。)

效果如下图：