Qml ListView实现选中操作

说明

ListView默认没有选中行的功能。实现选中的功能,需要在代理模型中实现。

代码如下

ListView {
id : m_listView
anchors.fill: parent
anchors.margins: 20
clip: true
model: ["A","B","C","D","E"]
delegate: numberDelegate
spacing: 5
focus: true
}

Component {
id: numberDelegate

Rectangle {
width: ListView.view.width
height: 40
color: ListView.isCurrentItem?"#157efb":"#53d769" //选中颜色设置
border.color: Qt.lighter(color, 1.1)
Text {
anchors.centerIn: parent
font.pixelSize: 10
text: modelData + index
}

MouseArea {
anchors.fill: parent
onClicked: m_listView.currentIndex = index  //实现item切换
}
}
}

效果如下:
Qml ListView实现选中操作_第1张图片

你可能感兴趣的:(Qt)