QML PathView+实战

PathView是一个强大展示数据的工具

属性:type	含义
delegate:Component	视图渲染的代表容器
dragMargin:real	鼠标能够拖动容器的最大距离
dragging:bool	表明视图是否由于拖动而移动
flickDeceleration:real	表明视图轻弹减缓的速度
flicking:bool	表明是否由于用户点击视图而移动
highlight:Component	高亮控件容器
highlightItem:item	保存的高亮控件实例
highlightMoveDuration:int	高亮控件移动的时间
hightlightRangeMode:enumeration	高亮范围模式 1.PathView.NOhighlightRange:高亮范围无限制，可以自由移动 2.PathView.ApplyRange:试图在高亮范围内移动,可能会因为鼠标交互而超出 3.PathView.StrictlyEnforceRange:永远在范围内移动,通过鼠标和键盘动作而改变
interactive:bool	视图是否可以交互
maximumFlickVelocity:real	最大轻弹速度
model:model	提供数据的模型
movementDirection:enumeration	当设置视图当前索引时,视图移动方向 1.PathView.Shortest 选择路径最小代价方向 2.PathView.Positive 选择前进的方向 3.PathView.Negative 选择后退的方向
moving:bool	当前视图是否在移动
offset:real	反映当期位置距初始位置有多远
path:Path	设置路径布局
pathItemCount:int	路径可视化的Item个数

这次做个明星介绍浏览,我就挑选几个我最爱的男歌手放上去,PathView里主要就是对Path的掌控,使其美观其实也是比较困难的,不过可以自己调整参数,看效果
先来看看效果图

qml代码

import QtQuick 2.7

Rectangle {
    width:600;
    height:600;
    id:root;
    ListModel {
        id:imageCards;
        ListElement {name:"五月天";src:"./images/wyt.jpg";intro:"";}
        ListElement {name:"张敬轩";src:"./images/zjx.jpeg";intro:"";}
        ListElement {name:"周杰伦";src:"./images/zjl.jpg";intro:""}
        ListElement {name:"张国荣";src:"./images/zgr.jpg";intro:""}
    }
    PathView {
        anchors.fill:parent;
        delegate:imageCard;
        model:imageCards;
        clip:true;
        path:Path {
            startX: 100;startY:root.height / 2;
            PathAttribute {name:"itemZ";value:0;}
            PathAttribute {name:"itemAngle";value:-30.0;}
            PathAttribute {name:"itemScale";value:0.65}
            PathAttribute {name:"itemOpacity";value:0.85}
            PathLine {x:root.width / 2;y:root.height / 2;}  
            PathPercent {value:0.5}
            PathAttribute {name:"itemAngle";value:0.0}
            PathAttribute {name:"itemZ";value:10;}
            PathAttribute {name:"itemScale";value:0.75;}    
            PathAttribute {name:"itemOpacity";value:0.85}
            PathLine {x:root.width - 50;y:root.height / 2;}
            PathAttribute {name:"itemZ";value:0;}
            PathAttribute {name:"itemAngle";value:30.0}
            PathPercent {value:1}
        }
        preferredHighlightBegin:0.5;
        preferredHighlightEnd:0.5;
    }
    Component {
        id:imageCard;
        Rectangle {
            id:imageroot;
            width:100;
            height:200;
            color:"#563C8E";
            scale:PathView.itemScale;
            opacity:PathView.itemOpacity;
            z:PathView.itemZ;
            clip:true;
            property variant rotY:PathView.itemAngle;
            transform:Rotation {
                angle:imageroot.rotY;
                axis {x:0;y:1;z:0}
                origin.x:0;
                origin.y:0;
            }
            Image {
                id:imageself;
                source:src;
//              fillMode:Image.PreserveAspectFit;
                width:imageroot.width;
                height:imageroot.height * 0.85;
                anchors.top:imageroot.top;
            }
            Text {
                text:name;
                anchors.bottom:imageroot.bottom;
                anchors.bottomMargin:3;
                anchors.horizontalCenter:imageroot.horizontalCenter;
            }
        }
    }
}