三十八、QML视图
一、ListView列表视图。
import QtQuick 1.0
Rectangle {
width:200;height:200
ListModel{ //数据模型
id:listModel
ListElement{name:"Tom";number:"001"}
ListElement{name:"John";number:"002"}
ListElement{name:"Sum1";number:"003"}
ListElement{name:"Sum2";number:"004"}
ListElement{name:"Sum3";number:"005"}
ListElement{name:"Sum4";number:"006"}
ListElement{name:"Sum5";number:"007"}
ListElement{name:"Sum6";number:"008"}
ListElement{name:"Sum7";number:"009"}
ListElement{name:"Sum8";number:"010"}
ListElement{name:"Sum9";number:"011"}
ListElement{name:"Sum10";number:"012"}
}
Component{ //代理
id:delegate
Item{ id:wrapper; width:200; height:40
Column{
x:5; y:5
Text{text:"<b>Name:</b>"+name}
Text{text:"<b>Number:</b>"+number}
//Text{text:"<b>Numberr:</b>"+number}
}
}
}
Component{ //高亮条
id:highlight
Rectangle{color:"lightsteelblue";radius:5}
}
ListView{ //视图
width:parent.width
height:parent.height
model:listModel //关联数据模型
delegate:delegate //关联代理
highlight:highlight //关联高亮条
focus:true //可以获得焦点,这样就可以响应键盘了
}
}
二、PathView路径视图
import QtQuick 1.0
Rectangle {
width:300;height:300;
ListModel{ //数据模型
id:listModel
ListElement{icon:"03.png"}
ListElement{icon:"03.png"}
ListElement{icon:"03.png"}
ListElement{icon:"03.png"}
ListElement{icon:"03.png"}
ListElement{icon:"03.png"}
}
Component{ //代理
id:delegate
Item{ id:wrapper; width:50; height:50
Column{
Image {source:icon;width:50;height:50}
}
}
}
PathView{ //路径视图
anchors.fill:parent;
model:listModel;
delegate:delegate
path:Path{
startX:120
startY:200
PathQuad{x:120;y:25;controlX:260;controlY:125}
PathQuad{x:120;y:200;controlX:-20;controlY:125}
}
}
}
将上面的代理和路径视图改一下,----PathAttribute,使不同路径上的图片的大小不一样
Component{ //代理
id:delegate
Item{ id:wrapper; width:50; height:50
scale:PathView.scale; opacity:PathView.opacity//
Column{
Image {source:icon;width:50;height:50}
}
}
}
PathView{ //路径视图
anchors.fill:parent; model:listModel; delegate:delegate
path:Path{
startX:120;
startY:200
PathAttribute{name:"scale";value:1.0}
PathAttribute{name:"opacity";value:1.0}
PathQuad{x:120;y:25;controlX:260;controlY:125}
PathAttribute{name:"scale";value:0.5}
PathAttribute{name:"opacity";value:0.5}
PathQuad{x:120;y:200;controlX:-20;controlY:125}
}
}