用qml在qt 5.15中通过将tableview和listmodel数据关联实现一个可通过触摸拖动列头中间的线调节列宽的多列的表格
时间: 2024-03-27 08:37:53 浏览: 134
qml tableview 表格
可以通过以下步骤实现:
1. 创建一个 `TableView` 控件,并将其 `model` 属性设置为一个 `ListModel`,用于存储表格数据。
```qml
TableView {
id: tableView
model: ListModel {
// define properties for each column
ListElement { col1: "data1"; col2: "data2"; col3: "data3" }
ListElement { col1: "data4"; col2: "data5"; col3: "data6" }
// add more items as needed
}
}
```
2. 为 `TableView` 控件添加多个列,并将其 `role` 属性设置为 `model` 中的对应属性。
```qml
TableViewColumn {
role: "col1"
title: "Column 1"
width: 100 // set initial width
}
TableViewColumn {
role: "col2"
title: "Column 2"
width: 100 // set initial width
}
TableViewColumn {
role: "col3"
title: "Column 3"
width: 100 // set initial width
}
```
3. 创建一个 `MouseArea` 控件,用于实现拖动列头中间的线调节列宽。
```qml
MouseArea {
id: headerMouseArea
anchors {
left: parent.left
right: parent.right
top: parent.top
bottom: parent.header.bottom
}
property int dragStartX: 0
property int dragStartWidth: 0
onEntered: {
if (mouseButtons === Qt.LeftButton) {
dragStartX = mouse.x
dragStartWidth = tableView.columnWidthProvider(headerIndex)
}
}
onPositionChanged: {
if (mouseButtons === Qt.LeftButton) {
var delta = mouse.x - dragStartX
tableView.setColumnWidthProvider(headerIndex, dragStartWidth + delta)
}
}
}
```
4. 将 `MouseArea` 控件添加到每个列头中,并将其 `headerIndex` 属性设置为对应列的索引。
```qml
TableViewColumn {
role: "col1"
title: "Column 1"
width: 100 // set initial width
headerDelegate: Rectangle {
color: "lightgray"
height: parent.height
Text {
text: headerData
anchors.centerIn: parent
}
MouseArea {
id: headerMouseArea
anchors.fill: parent
property int headerIndex: 0 // set index of this column
// copy code from previous step
}
}
}
```
5. 重复步骤 4,将 `MouseArea` 控件添加到每个列头中。
这样就完成了一个可通过触摸拖动列头中间的线调节列宽的多列的表格。
阅读全文