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;
}
}
}
}