Javascript 如何在鼠标事件上更改QML的TableView中的行的颜色?
因此,当用户单击一行时,该行的颜色应该改变。 这就是我尝试过的。它不起作用 这里Javascript 如何在鼠标事件上更改QML的TableView中的行的颜色?,javascript,qt,qml,qt5,Javascript,Qt,Qml,Qt5,因此,当用户单击一行时,该行的颜色应该改变。 这就是我尝试过的。它不起作用 这里table是我的QMLTableView的id 让默认颜色为蓝色,单击时应更改为红色 rowDelegate: Rectangle { id: rowDel color: { var activeRow = table.curre
table
是我的QMLTableView
的id
让默认颜色为蓝色,单击时应更改为红色
rowDelegate:
Rectangle
{
id: rowDel
color:
{
var activeRow = table.currentRow === styleData.row;
(activeRow ? mouse_area.pressed ? "red" : "blue" : "white")
}
border.width: 1
height: 52
width: 2000
MouseArea
{
id: mouse_area
anchors.fill: parent
}
}
解决方案
而不是使用styleData.selected
例子
下面是我为您编写的一个示例,用于演示建议的解决方案:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 1.4
Window {
width: 320
height: 200
visible: true
title: qsTr("TableView")
ListModel {
id: libraryModel
ListElement {
title: "A Masterpiece"
author: "Gabriel"
}
ListElement {
title: "Brilliance"
author: "Jens"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
}
TableView {
id: table
anchors.fill: parent
model: libraryModel
rowDelegate: Rectangle {
color: styleData.selected ? "red" : "blue"
width: 2000
height: 40
border.width: 1
}
TableViewColumn {
role: "title"
title: "Title"
width: 100
}
TableViewColumn {
role: "author"
title: "Author"
width: 200
}
}
}
结果
提供的示例产生以下结果:
选择第二行
选中最后一行。如果在鼠标earea中添加一个单击的
处理程序,它会被调用吗?(在里面放一份打印声明。)