在qtquick 2,用一个tableview和listmodel关联实现一可通过触摸调节列宽的多列表格
时间: 2024-03-16 13:48:06 浏览: 88
qtableview和model配合使用,实现复杂功能
3星 · 编辑精心推荐
可以通过使用TableView的headerDelegate来实现可通过触摸调节列宽的多列表格。
首先,需要创建一个自定义的headerDelegate,在该delegate中实现调节列宽的功能。代码如下:
```
import QtQuick 2.0
Item {
id: headerDelegate
property int columnIndex: -1
property int minWidth: 20
Rectangle {
id: headerDelegateRect
color: "#F6F6F6"
border.width: 1
border.color: "#CCCCCC"
Text {
id: headerDelegateText
text: model.display
font.bold: true
anchors.centerIn: parent
}
MouseArea {
id: headerDelegateMouseArea
anchors.fill: parent
cursorShape: Qt.SizeHorCursor
property int startX: 0
property int startWidth: 0
onPressed: {
startX = mouse.x
startWidth = tableView.columnWidthProvider(columnIndex)
}
onPositionChanged: {
if (mouse.buttons & Qt.LeftButton) {
var delta = mouse.x - startX
var newWidth = startWidth + delta
newWidth = Math.max(minWidth, newWidth)
tableView.setColumnWidth(columnIndex, newWidth)
}
}
}
}
}
```
然后,在TableView的columnDelegate中使用该headerDelegate,并将其与ListModel关联。代码如下:
```
import QtQuick 2.0
TableView {
id: tableView
width: 600
height: 400
columnWidthProvider: function(column) { return columnWidths[column] }
onColumnWidthChanged: {
for (var i = 0; i < columnWidths.length; ++i) {
columnWidths[i] = tableView.columnWidthProvider(i)
}
}
ListModel {
id: myModel
ListElement {
name: "John"
age: 30
}
// add more elements here
}
property var columnWidths: [100, 100]
delegate: Rectangle {
color: row % 2 == 0 ? "#F6F6F6" : "white"
height: 30
Text {
text: model.name
anchors.left: parent.left
anchors.leftMargin: 10
verticalAlignment: Text.AlignVCenter
}
Text {
text: model.age
anchors.left: column1.right
anchors.leftMargin: 10
verticalAlignment: Text.AlignVCenter
}
Rectangle {
width: 1
height: parent.height
color: "#CCCCCC"
anchors.left: column1.right
}
Rectangle {
width: 1
height: parent.height
color: "#CCCCCC"
anchors.left: column2.right
}
Item {
id: column1
width: tableView.columnWidthProvider(0)
height: parent.height
headerDelegate {
Text {
text: "Name"
}
columnIndex: 0
}
}
Item {
id: column2
x: column1.right
width: tableView.columnWidthProvider(1)
height: parent.height
headerDelegate {
Text {
text: "Age"
}
columnIndex: 1
}
}
}
}
```
这样,就可以实现可通过触摸调节列宽的多列表格了。
阅读全文