一、ListView动态加载model的代码，这样写的目的是为了动态修改元素的值
ListModel {
id: camStatusModel
// 一个 ListElement 对象就代表一条数据
//第一行
ListElement{
camname:"摄像机1"
status: ""
}
ListElement{
camname:"摄像机2"
status: ""
}
ListElement{
camname:"摄像机3"
status: ""
}
ListElement{
camname:"摄像机4"
status: ""
}
ListElement{
camname:"摄像机5"
status: ""
}
ListElement{
camname:"摄像机6"
status: ""
}
ListElement{
camname:"摄像机7"
status: ""
}
ListElement{
camname:"摄像机8"
status: ""
}
}
ListModel {
id: phoneModel0
// 一个 ListElement 对象就代表一条数据
//第一行
ListElement{
count: ""
speed: ""
rate: ""
}
//第二行
ListElement{
count: ""
speed: ""
rate: ""
}
//第三行
ListElement{
count: ""
speed: ""
rate: ""
}
//第四行
ListElement{
count: ""
speed: ""
rate: ""
}
//第五行
ListElement{
count: ""
speed: ""
rate: ""
}
//第六行
ListElement{
count: ""
speed: ""
rate: ""
}
//第七行
ListElement{
count: ""
speed: ""
rate: ""
}
//第八行
ListElement{
count: ""
speed: ""
rate: ""
}
}
ListModel {
id: phoneModel1
// 一个 ListElement 对象就代表一条数据
//第一行
ListElement{
count: ""
speed: ""
rate: ""
}
//第二行
ListElement{
count: ""
speed: ""
rate: ""
}
//第三行
ListElement{
count: ""
speed: ""
rate: ""
}
//第四行
ListElement{
count: ""
speed: ""
rate: ""
}
//第五行
ListElement{
count: ""
speed: ""
rate: ""
}
//第六行
ListElement{
count: ""
speed: ""
rate: ""
}
//第七行
ListElement{
count: ""
speed: ""
rate: ""
}
//第八行
ListElement{
count: ""
speed: ""
rate: ""
}
}
ListModel {
id: phoneModel2
// 一个 ListElement 对象就代表一条数据
//第一行
ListElement{
count: ""
speed: ""
rate: ""
}
//第二行
ListElement{
count: ""
speed: ""
rate: ""
}
//第三行
ListElement{
count: ""
speed: ""
rate: ""
}
//第四行
ListElement{
count: ""
speed: ""
rate: ""
}
//第五行
ListElement{
count: ""
speed: ""
rate: ""
}
//第六行
ListElement{
count: ""
speed: ""
rate: ""
}
//第七行
ListElement{
count: ""
speed: ""
rate: ""
}
//第八行
ListElement{
count: ""
speed: ""
rate: ""
}
}
ListModel {
id: phoneModel3
// 一个 ListElement 对象就代表一条数据
//第一行
ListElement{
count: ""
speed: ""
rate: ""
}
//第二行
ListElement{
count: ""
speed: ""
rate: ""
}
//第三行
ListElement{
count: ""
speed: ""
rate: ""
}
//第四行
ListElement{
count: ""
speed: ""
rate: ""
}
//第五行
ListElement{
count: ""
speed: ""
rate: ""
}
//第六行
ListElement{
count: ""
speed: ""
rate: ""
}
//第七行
ListElement{
count: ""
speed: ""
rate: ""
}
//第八行
ListElement{
count: ""
speed: ""
rate: ""
}
}
ListModel {
id: phoneModel4
// 一个 ListElement 对象就代表一条数据
//第一行
ListElement{
count: ""
speed: ""
rate: ""
}
//第二行
ListElement{
count: ""
speed: ""
rate: ""
}
//第三行
ListElement{
count: ""
speed: ""
rate: ""
}
//第四行
ListElement{
count: ""
speed: ""
rate: ""
}
//第五行
ListElement{
count: ""
speed: ""
rate: ""
}
//第六行
ListElement{
count: ""
speed: ""
rate: ""
}
//第七行
ListElement{
count: ""
speed: ""
rate: ""
}
//第八行
ListElement{
count: ""
speed: ""
rate: ""
}
}
ListModel {
id: phoneModel5
// 一个 ListElement 对象就代表一条数据
//第一行
ListElement{
count: ""
speed: ""
rate: ""
}
//第二行
ListElement{
count: ""
speed: ""
rate: ""
}
//第三行
ListElement{
count: ""
speed: ""
rate: ""
}
//第四行
ListElement{
count: ""
speed: ""
rate: ""
}
//第五行
ListElement{
count: ""
speed: ""
rate: ""
}
//第六行
ListElement{
count: ""
speed: ""
rate: ""
}
//第七行
ListElement{
count: ""
speed: ""
rate: ""
}
//第八行
ListElement{
count: ""
speed: ""
rate: ""
}
}
ListModel {
id: phoneModel6
// 一个 ListElement 对象就代表一条数据
//第一行
ListElement{
count: ""
speed: ""
rate: ""
}
//第二行
ListElement{
count: ""
speed: ""
rate: ""
}
//第三行
ListElement{
count: ""
speed: ""
rate: ""
}
//第四行
ListElement{
count: ""
speed: ""
rate: ""
}
//第五行
ListElement{
count: ""
speed: ""
rate: ""
}
//第六行
ListElement{
count: ""
speed: ""
rate: ""
}
//第七行
ListElement{
count: ""
speed: ""
rate: ""
}
//第八行
ListElement{
count: ""
speed: ""
rate: ""
}
}
ListModel {
id: phoneModel7
// 一个 ListElement 对象就代表一条数据
//第一行
ListElement{
count: ""
speed: ""
rate: ""
}
//第二行
ListElement{
count: ""
speed: ""
rate: ""
}
//第三行
ListElement{
count: ""
speed: ""
rate: ""
}
//第四行
ListElement{
count: ""
speed: ""
rate: ""
}
//第五行
ListElement{
count: ""
speed: ""
rate: ""
}
//第六行
ListElement{
count: ""
speed: ""
rate: ""
}
//第七行
ListElement{
count: ""
speed: ""
rate: ""
}
//第八行
ListElement{
count: ""
speed: ""
rate: ""
}
}
//根据(ListView:listCamera)的index为(ListView:listPoints)动态加载model,
//这样做的目的是为了动态修改每个点的数据，如果只为显示的话不需要这样做，这样做太麻烦了
function getModel(idx){
console.info("idx:"+idx);
if(idx===0)
{
return phoneModel0;
}else if(idx===1)
{
return phoneModel1;
}else if(idx===2)
{
return phoneModel2;
}else if(idx===3)
{
return phoneModel3;
}else if(idx===4)
{
return phoneModel4;
}else if(idx===5)
{
return phoneModel5;
}else if(idx===6)
{
return phoneModel6;
}else if(idx===7)
{
return phoneModel7;
}
}
GroupBox {
title: qsTr("实时状态")
width: parent.width
height: parent.height
padding: 8
Column{
width: parent.width
height: parent.height
Rectangle {
id: fieldControl
width: parent.width
height: 40
Row{
padding: 4
spacing: 8
anchors.fill: parent
Button {
text: "启动采集"
onClicked:
{
if(promptLabel.text=="当前状态:采集已启动")
{
dlg01_label.text="采集已启动!";
dlg01.visible=true;
}
else
{
promptLabel.text="当前状态:采集已启动";
dlg01_label.text="采集已启动!";
dlg01.visible=true;
}
start2capture();
}
}
Button {
text: "停止采集"
onClicked: {
if(promptLabel.text=="当前状态:采集已停止")
{
dlg01_label.text="采集已停止";
dlg01.visible=true;
}
else
{
promptLabel.text="当前状态:采集已停止";
dlg01_label.text="采集已停止";
dlg01.visible=true;
}
stop2capture();
}
}
Label {
id:promptLabel
width: parent.width // 文本控件的宽度，缺省为0，但是会显示文字
height: parent.height // 文本控件的高度，缺省为0，但是会显示文字
color: "red"
verticalAlignment: Text.AlignVCenter
}
}
}
Rectangle {
id: fieldCamera
width: parent.width
height: parent.height-40
ListView{
id: listCamera
anchors.fill: parent
model:camStatusModel 此值表示列数
snapMode: ListView.SnapToItem
orientation: ListView.Horizontal //竖版排列
delegate:camDelegate
// 1.定义delegate，内嵌三个Text对象来展示Model定义的ListElement的三个role
Component {
id: camDelegate
Rectangle {
width: fieldCamera.width/8
height: listCamera.height
Column{
id: idcameraitem
spacing: 6
padding: 4
width: parent.width
height: parent.height-40
Label{id: idcameraname;text: "摄像头"+(index+1)}
Label{id: idcamerastatus;text: "状态"}
Button{text: "开启视频"; font.pixelSize: 12; height: 20
onClicked: openVideo(index)
}
Button{text: "关闭视频"; font.pixelSize: 12; height: 20
onClicked: closeVideo(index)
}
Rectangle{
width: idcameraitem.width
height: idcameraitem.height-50
anchors.bottomMargin: 10
ListView{
id: listPoints
anchors.fill: parent
model:getModel(index)
delegate:phoneDelegate
// 1.定义delegate，内嵌三个label对象来展示Model定义的ListElement的三个role
Component {
id: phoneDelegate
Rectangle {
color: listPoints.currentIndex==index? "green" : "white"
width: parent.width
height: 50
anchors.margins: 4
Column{
spacing: 2
width: parent.width
Label {text:"<b>流量:</b>"+count}
Label {text:"<b>速度:</b>"+speed}
Label {text: "<b>占有率:</b>"+rate}
}
MouseArea {
anchors.fill: parent
onClicked: listPoints.currentIndex=index
}
}
}
}
}
}
}
}
}
}
}
}
二、如果只为显示数据只用delegate（委托）循环一下就可以了！
ListView{
id: listPoints
anchors.fill: parent
model:phonemodel0
delegate:Rectangle {
color: listPoints.currentIndex==index? "green" : "white"
width: parent.width
height: 50
anchors.margins: 4
Column {
spacing: 2
width: parent.width
Label {text:"<b>流量:</b>"+count}
Label {text:"<b>速度:</b>"+speed}
Label {text: "<b>占有率:</b>"+rate}
}
MouseArea {
anchors.fill: parent
onClicked: listPoints.currentIndex=index
}
}
}
676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
