基于QML2.0的View之PathView
继QML2.0TabView之后，打算简单说下PathView这个QML视图，最近找到先前研究的项目，但是对于PathView这个在qml2.0里面继续出现的旧东西，感觉好熟悉，看看qml2.0是否新增了一些特性或者修复了哪些bug，遂研究了下。
Properties cacheItemCount : int count : int currentIndex : int currentItem : Item delegate : Component dragMargin : real dragging : bool flickDeceleration : real flicking : bool highlight : Component highlightItem : Item highlightMoveDuration : int highlightRangeMode : enumeration interactive : bool maximumFlickVelocity : real model : model moving : bool offset : real path : Path pathItemCount : int preferredHighlightBegin : real preferredHighlightEnd : real snapMode : enumeration Attached Properties isCurrentItem : bool onPath : bool view : PathView Signals dragEnded() dragStarted() flickEnded() flickStarted() movementEnded() movementStarted() Methods decrementCurrentIndex() incrementCurrentIndex() int indexAt(int x, int y) Item itemAt(int x, int y) positionViewAtIndex(int index, PositionMode mode)
以上是PathView的一些属性，还有信号，还有方法，各位可以参阅英译汉，懒得不想翻译
个人比较喜欢C++与QML混合编程，应该纯QML可能对于数据处理部分很是吃力，所以部分数据处理放置C++，这样是比较好，UI都是QML来实现
看下C++部分代码：
widget.h部分
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
#include <QtDeclarative/QtDeclarative>
#include <QGraphicsObject>
#include <QParallelAnimationGroup>
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = 0);
~Widget();
QDeclarativeView* lolView;
QGraphicsObject* lolObj;
QParallelAnimationGroup* qrGroup;
QString lolJson;
void showQMLView();
QString pingzhuangJson(QList<QStringList>);
void showAnimation();
QList<QStringList> getFileName(QString str);
public slots:
void slotClose(QVariant,int);
void slotQrFinishedAnimation();
};
#endif // WIDGET_H
widget.cpp部分
#include "widget.h"
#include <QApplication>
#include <QDesktopWidget>
Widget::Widget(QWidget *parent)
: QWidget(parent),lolView(NULL)
{
QList<QStringList> lst=getFileName("./qml/CoverFlowQuickApp/lol/");
lolJson = pingzhuangJson(lst);
}
Widget::~Widget()
{
}
void Widget::showQMLView()
{
if(NULL==lolView){
qDebug() << "hello in Show Log view1";
lolView = new QDeclarativeView(0);
lolView->setMinimumSize(QSize(1320,800));
lolView->setSource(QUrl("qrc:qml/CoverFlowQuickApp/main.qml"));
lolView->setWindowFlags(Qt::FramelessWindowHint);
lolView->setAttribute(Qt::WA_TranslucentBackground);
lolView->setStyleSheet("background:transparent;");
lolView->setWindowTitle(QString::fromUtf8("LOL客户端"));
lolObj = lolView->rootObject();
connect(lolObj,SIGNAL(signalsendClose(QVariant,int)),this,SLOT(slotClose(QVariant,int)));
}
QMetaObject::invokeMethod(lolView->rootObject(),"getJsonfromWidget",
Q_ARG(QVariant,QVariant::fromValue(lolJson)));
lolView->move(((QApplication::desktop()->width()/2)-(lolView->width()/2)),((QApplication::desktop()->height()/2)-(lolView->height()/2)));
lolView->show();
}
QString Widget::pingzhuangJson(QList<QStringList> lst)
{
QString strJson ="{\"response\":100,\"message\":\"xxxxxx\",\"data\":{\"lolinfo\":{\"lol_info\":[";
for(int i=0;i<lst.count();i++){
strJson += "{";
strJson.append("\"userid\":");
strJson.append("\""+QString::number(i)+"\"");
strJson.append(",\"icon\":");
strJson.append("\"lol/"+lst.at(i).at(0)+"\"");
strJson.append(",\"name\":");
QString tmp = lst.at(i).at(1);
tmp.chop(4);
strJson.append("\""+tmp+"\"");
strJson.append("},");
}
strJson.chop(1);
strJson.append("]}}}");
//qDebug()<<"strJsonstrJsonstrJson "<<strJson;
return strJson;
}
QList<QStringList> Widget::getFileName(QString str){
//"./qml/CoverFlowQuickApp/lol/
QString root = str;
QDir rootDir(root);
QStringList strings;
strings << "*.png" ;
QStringList fileList;
QString fileListName;
QList<QStringList> listVetor;
QFile file("./lol.txt");
QFileInfoList list = rootDir.entryInfoList(strings);
for(int i=0;i<list.count();i++)
{
QFileInfo tmpInfo= list.at(i);
if(tmpInfo.isFile() && !(tmpInfo.baseName().contains("close")))
{
QString fileName = tmpInfo.fileName();
fileListName.append(tmpInfo.baseName());
fileListName.append("\n");
fileList.append(fileName);
if(fileList.count() == 5){
listVetor.append(fileList);
fileList.clear();
}
}
}
qDebug()<<"listVetor "<<listVetor<<listVetor.count();
return listVetor;
}
void Widget::showAnimation()
{
qrGroup = new QParallelAnimationGroup;
connect(qrGroup,SIGNAL(finished()),this,SLOT(slotQrFinishedAnimation()));
QPropertyAnimation *animation2 = new QPropertyAnimation(lolView, "size");
animation2->setDuration(1000);
animation2->setStartValue(QSize(this->width(),this->height()));
animation2->setEndValue(QSize(0,0));
QPropertyAnimation *animation4 = new QPropertyAnimation(lolView, "windowOpacity");
animation4->setDuration(800);
animation4->setStartValue(1.0);
animation4->setEndValue(0.0);
animation2->setEasingCurve(QEasingCurve::OutCubic);
animation4->setEasingCurve(QEasingCurve::OutCubic);
qrGroup->addAnimation(animation2);
qrGroup->addAnimation(animation4);
qrGroup->start();
}
void Widget::slotQrFinishedAnimation()
{
qApp->quit();
}
void Widget::slotClose(QVariant var,int iType)
{
int localx;
int localy;
qDebug()<<""<<iType<<" "<<var;
if(iType == 0){
QStringList lst=var.toStringList();
if(lst.count()==2){
localx = lolView->x();
localy = lolView->y();
lolView->move(localx + lst.at(0).toInt(), localy+lst.at(1).toInt());
}
}else{
showAnimation();
// qApp->quit();
}
}
这个类 主要是加载本地图片发生到QML来实现图片预览，另外增加了动画关闭窗口功能，关闭应用等
再来看下QML部分
import QtQuick 1.1
Item {
width: 120*11; height: 800
signal signalsendClose(variant strclose,int iType)
ListModel {
id: appModel
// ListElement { name: "弗力贝尔"; icon: "lol/Volibear_Square_0.png" }
// ListElement { name: "沃里克"; icon: "lol/Warwick_Square_0.png" }
// ListElement { name: "齐勒斯"; icon: "lol/Xerath_Square_0.png" }
// ListElement { name: "XinZhao_Square_0"; icon: "lol/XinZhao_Square_0.png" }
// ListElement { name: "Yorick_Square_0"; icon: "lol/Yorick_Square_0.png" }
// ListElement { name: "Ziggs_Square_0"; icon: "lol/Ziggs_Square_0.png" }
// ListElement { name: "Zilean_Square_0"; icon: "lol/Zilean_Square_0.png" }
// ListElement { name: "Zyra_Square_0"; icon: "lol/Zyra_Square_0.png" }
// ListElement { name: "Nidalee_Square_0"; icon: "lol/Nidalee_Square_0.png" }
// ListElement { name: "Nocturne_Square_0"; icon: "lol/Nocturne_Square_0.png" }
// ListElement { name: "Nunu_Square_0"; icon: "lol/Nunu_Square_0.png" }
// ListElement { name: "Olaf_Square_0"; icon: "lol/Olaf_Square_0.png" }
// ListElement { name: "Fiddlesticks_Square_0"; icon: "lol/Fiddlesticks_Square_0.png" }
// ListElement { name: "Fiora_Square_0"; icon: "lol/Fiora_Square_0.png" }
// ListElement { name: "Fizz_square_0"; icon: "lol/Fizz_square_0.png" }
// ListElement { name: "Galio_Square_0"; icon: "lol/Galio_Square_0.png" }
}
// property XmlListModel tmpModel;
// XmlListModel {
// id: xmlModel
// source:"qrc:/qml/CoverFlowQuickApp/pics/lol.xml"
// query: "/lol/lolel/File"
// XmlRole { name: "fileName"; query: "fileName/string()" }
// XmlRole { name: "filePng"; query: "filePng/string()" }
// Component.onCompleted: {
// console.log("kasjkashjkashkahksj "+query.toString())
// tmpModel = xmlModel;
// }
// }
Item{
id: myText
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
height: 30
Text {
id: myText1
text: "当前为 -1"
anchors.centerIn: parent
font.bold: true
font.pixelSize: 20
font.family: "微软雅黑"
}
}
CoverFlow {
listModel: appModel
width: parent.width
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: myText.top
onIndexChanged: {
myText1.text = "当前为: " + index
}
itemWidth: 120
itemHeight: 120
color: "black"
}
Image {
source: "lol/close.png"
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 10
MouseArea {
anchors.fill: parent
onClicked: signalsendClose([""],1);
}
}
MouseArea
{
id: backmove
height: 200
anchors{
left: parent.left
right: parent.right
rightMargin: 100
top:parent.top
}
acceptedButtons: Qt.LeftButton
property int ix:0
property int iy:0
onPressed:
{
backmove.ix = mouseX;
backmove.iy = mouseY;
}
onPositionChanged:
{
var dyx = mouseX - backmove.ix;
var dyy = mouseY - backmove.iy;
var paralist = [dyx,dyy]
//paralist si windows move offset
signalsendClose(paralist,0)
}
}
function getJsonfromWidget(str){
console.log("str "+str);
var jsonObject = eval('(' + str + ')');
var resultDataObj = jsonObject.data.lolinfo.lol_info;
var response = jsonObject.response;
console.log("refresh data : "+response+" "+resultDataObj[0].icon)
for(var i =0;i<16;i++)
{
if(typeof resultDataObj[i] == "object")
console.log("refresh: "+resultDataObj[i].name)
appModel.append(resultDataObj[i]);
}
}
}
import QtQuick 1.0
Rectangle {
id: coverFlow
property int itemWidth: 120*listModel.count
property int itemHeight: 120*listModel.count
property ListModel listModel
property int angleValue: 60
signal indexChanged(string index)
gradient: Gradient {
GradientStop { position: 0.0; color: "black" }
GradientStop { position: 0.5; color: "gray" }
GradientStop { position: 1.0; color: "black" }
}
Component {
id: appDelegate
Flipable {
id: myFlipable
property bool flipped: false
property real rotationAngle: PathView.angle
width: itemWidth; height: itemHeight
z: PathView.z
scale: PathView.iconScale
function itemClicked()
{
if(PathView.isCurrentItem) {
//myFlipable.flipped = !myFlipable.flipped
myPathView.interactive = !myFlipable.flipped
}
else if(myPathView.interactive) {
myPathView.currentIndex = index;
console.log("sljaslfajlfjal")
}
}
Keys.onReturnPressed: itemClicked()
MouseArea {
anchors.fill: parent
onClicked: itemClicked()
}
transform: Rotation {
id: rotation
origin.x: myFlipable.width/2
origin.y: myFlipable.height/2
axis.x: 0; axis.y: 1; axis.z: 0
angle: rotationAngle
}
states: State {
name: "back"
PropertyChanges { target: rotation; angle: 180 }
PropertyChanges {target: myFlipable; width: myPathView.width; height: myPathView.height }
when: myFlipable.flipped
}
transitions: Transition {
ParallelAnimation {
NumberAnimation { target: rotation; property: "angle"; duration: 250 }
NumberAnimation {target: myFlipable; properties: "height,width"; duration: 250}
}
}
front: CoverItem{
id:items
width: itemWidth
height: itemHeight*2
onSignalClickeItem: {
console.log("skajfkajffafaf "+iIndex+ " icon "+iconString);
backs.curImg = iconString;
animationx.stop();
animationx.start();
}
}
// back:
}
}
CoverBackItem{
id:backs
// width: itemWidth*2
// height: itemHeight*2
opacity: 0.0
z:100
anchors.centerIn: parent
}
SequentialAnimation {
id:animationx
NumberAnimation { target: backs; property: "opacity"; to: 1; duration: 500;easing.type: Easing.InQuad }
PauseAnimation { duration: 500 }
NumberAnimation { target: backs; property: "opacity"; to: 0; duration: 500;easing.type: Easing.InQuad }
}
PathView {
id: myPathView
Keys.onRightPressed: if (!moving && interactive) incrementCurrentIndex()
Keys.onLeftPressed: if (!moving && interactive) decrementCurrentIndex()
anchors.fill: parent
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
focus: true
interactive: true
model: listModel
delegate: appDelegate
path: Path {
startX: 0
startY: coverFlow.height / 2
PathAttribute { name: "z"; value: 100 }
PathAttribute { name: "angle"; value: angleValue }
PathAttribute { name: "iconScale"; value: 1.0 }
PathLine { x: coverFlow.width / 2; y: coverFlow.height / 2; }
PathAttribute { name: "z"; value: 0 }
PathAttribute { name: "angle"; value: 0 }
PathAttribute { name: "iconScale"; value: 0.7 }
PathLine { x: coverFlow.width; y: coverFlow.height / 2; }
PathAttribute { name: "z"; value: 100 }
PathAttribute { name: "angle"; value: -angleValue }
PathAttribute { name: "iconScale"; value: 1.0 }
}
}
Item{
id: myText3
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
height: 30
Text {
id: myText4
text: "英雄联盟-英雄抉择"
anchors.centerIn: parent
font.bold: true
font.pixelSize: 18
font.family: "微软雅黑"
color: "red"
}
}
Component.onCompleted: {
myPathView.currentIndexChanged.connect(function(){
//indexChanged(myPathView.currentIndex);
indexChanged(listModel.get(myPathView.currentIndex).name);
})
}
}
话说这里都是qtquick1.1 因为C++里面使用的是QDeclareView来加载qml1，好多看观经常看到报错就是qml1与qml2的view不同导致 或者说纯qml应用和C++、QML混合应用的区别所在。
效果图：
稍后附上源码
SourceCode