QML中ListView配合ScrollView实现列表功能
ListView在QML界⾯开发中主要⽤于列表的显⽰，往往配合ScrollView使⽤，ScrollView主要作⽤是给ListView增加右侧滚动条功能，⽤于ListView显⽰不下时，进⾏滚动。
具体的实现代码如下：
import Material 0.1
import QtQuick 2.4
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Window {
visible: true
property int dpi: 1
property string name:"姓名"
width : 300 *dpi
height: 300 * dpi
ListModel {
id: listModel
ListElement { name: "Apple" }
ListElement { name: "Orange" }
ListElement { name: "Banana" }
ListElement {name: "Computer1"}
ListElement {name: "Computer2"}
ListElement {name: "Computer3"}
ListElement {name: "Computer4"}
ListElement {name: "Computer5"}
ListElement {name: "Computer6"}
ListElement {name: "Computer7"}
ListElement {name: "Computer8"}
}
ScrollView {
anchors.fill: parent
ListView {
id:left_list
model:listModel
clip:true
orientation:  ListView.Vertical
snapMode  :  ListView.SnapToItem      //停靠在列表的最开始
cacheBuffer:  20
anchors.fill: parent
delegate: Rectangle{
id:delegate_list
// color: "red"
height: 40*dpi
width: 300*dpi
signal signalShowMenu(var id,int x,int y)
/
/⾼亮
MouseArea{
id:mouse_delegate
acceptedButtons: Qt.RightButton|Qt.LeftButton
hoverEnabled: true
propagateComposedEvents: true
enabled:true
enabled:true
anchors.fill: parent
onEntered:{
lor = "#DCDCDC"
btn_del.visible    = true
//  console.log("in")
}
onExited:{
lor = "white"
btn_del.visible    = false
//  console.log("out")
}
onClicked: {
mouse.accepted = false;
console.log("item click.");
}
onDoubleClicked: {
mouse.accepted = false;
console.log("item double click.");
}
}
RowLayout{
spacing: 20 *dpi
anchors{
left: parent.left
leftMargin: 12*dpi
right: parent.right
rightMargin: 12*dpi
}
//⽤于将该⾏显⽰在矩形垂直居中
anchors.verticalCenter: parent.verticalCenter
Label{
id:left_list_user
anchors {
leftMargin: 12*dpi
left: left_list_photo.right
}
qt listview
text:name
color:"#333333"
font.pixelSize: 15 * dpi
font.family: qsTr("微软雅⿊")
}
//删除按钮
Button{
id:btn_del
anchors.right: parent.right
anchors.rightMargin: 15*dpi
iconSource:"./image/del.png"
width  : 20*dpi
height  : width
visible:false
enabled:true
style  : ButtonStyle{
background:Image {
width: sourceSize.width * dpi
height: sourceSize.height * dpi
source:control.iconSource
source:control.iconSource
}
label:Item {}
}
onHoveredChanged: {
hovered ? lor = "#DCDCDC" : lor = "white"
hovered ? btn_del.visible = true : btn_del.visible = true
}
onClicked: {
console.log("del item")
}
}
}
}
}
}
}
在如上的代码中，⿏标的进⼊和退出某个区域，都要进⾏相应的界⾯变换，因此，会将⿏标区域的hoverEnabled: true，这样才能接受onEntered和onExited事件，同事，如果要进⾏⿏标事件的传输，即上层接受到⿏标的点击或双击时，他的⽗控件也想对⿏标事件进⾏相应的处理，则要在单击或双击事件中设置mouse.accepted = false；这样，⿏标事件就可以层层传递下去。
另外，如果两个MouseArea区域重合，则上层的MouseArea会覆盖下层的事件，所以，如果在上⾯的Button⾥⾯也设置了MouseArea，则会覆盖Rectangle⾥⾯的MouseArea，导致出了按钮区域后，矩形框不能处于选中状态，因此可以考虑Button的hovered属性，该属性是⼀个只读属性，可以监测他的改变状态，如下：
onHoveredChanged: {
hovered ? lor = "#DCDCDC" : lor = "white"
hovered ? btn_del.visible = true : btn_del.visible = true
}
然后对⿏标进⼊和退出时做相应的处理，其做的事情和onEntered与onExited中做同样的事情，⿏标进⼊代理矩形区和进⼊关闭按钮时，都会对背景颜⾊进⾏改变，从⽽实现了预期的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。