作者：PearlLisa_Shanghai_901 | 来源：互联网 | 2023-01-03 14:04
ListView的用法
ListElement定义了单元属性，这些属性是ListModel和delegate通信的基础
ListModel动态添加元素时，需要给定的ListElement中定义的属性。
delegate中显示元素也是引用ListElement中的属性。
ListView的delegate有两种方式。
第一种方式：直接定义delegate。
importQtQuick2.5
Rectangle{id:qq
width:400
height:400
visible:true
color:"red"
ListModel{id:w3
ListElement{colorr:"#FFA120";name:"nafefe"}ListElement{colorr:"#A24345";name:"eeeee"}ListElement{colorr:"#001123";name:"ttttttttt"}}
ListView{id:q1
width:parent.width;
height:parent.height
model:w3
delegate:Item{id:w4
width:30
height:30
Rectangle{id:w1
anchors.fill:w4
color:colorr
}
Text{id:w2
text:name
anchors{left:w4.right}anchors.verticalCenter:w4.verticalCenter
}
}
}
}
运行结果如下：
第二种方式：
将delegae定义成组件，在ListView中加用其id。
importQtQuick2.5
Rectangle{id:qq
width:400
height:400
visible:true
color:"red"
ListModel{id:w3
ListElement{colorr:"#FFA120";name:"nafefe"}ListElement{colorr:"#A24345";name:"eeeee"}ListElement{colorr:"#001123";name:"ttttttttt"}}
ListView{id:q1
width:parent.width;
height:parent.height
model:w3
delegate:ContactModel{}}
}
在另一个文件中进行组件的定义，给文件命名为ContactModel.qml
//组件定义，在原有Item基础上加在Component {id:eew}
importQtQuick2.0
Component{id:eew
Item{id:w4
width:30
height:30
Rectangle{id:w1
anchors.fill:w4
color:colorr
}
Text{id:w2
text:name
anchors{left:w4.right}anchors.verticalCenter:w4.verticalCenter
}
}
}
效果如图所示：
总结：model:放置的是ListModel的id，用于读取其中的参数数据
relegate：放置组件id或者文件名引用
在组件中添加鼠标点击事件，需要使用index
importQtQuick2.0
Component{id:eew
Item{id:w4
width:30
height:30
Rectangle{id:w1
anchors.fill:w4
color:colorr
}
Text{id:w2
text:name
anchors{left:w4.right}anchors.verticalCenter:w4.verticalCenter
}
MouseArea{anchors.fill:w1
onClicked:{q1.currentIndex=index;
varhh=q1.currentIndex;
console.log(hh);
}
}
}
}
现在还不清楚index怎么就获取到了鼠标点击的是rectangle块，但是鼠标的点击事件功能已经实现了。参考文章：
http://blog.163.com/wslngcjsdxdr%40126/blog/static/16219623020147133550574/
上面获取了鼠标点击Rectangle的点击序列，便可以进行界面切换了，在上层文件中声明变量，然后在获取到的序列中复制，在通过visible属性进行判断显示即可，代码如下：
京公网安备 11010802041100号