在qt quick 2中通过tableview和listmodel关联实现一个可通过触摸调节列宽的多列的表格

下面是一个通过 `TableView` 和 `ListModel` 实现可通过触摸调节列宽的多列表格的示例：

import QtQuick 2.0
import QtQuick.Controls 2.5

TableView {
    id: tableView
    width: 400
    height: 400
    model: ListModel {
        ListElement {
            name: "Tom"
            age: 20
            gender: "Male"
        }
        ListElement {
            name: "Jerry"
            age: 25
            gender: "Male"
        }
        ListElement {
            name: "Mickey"
            age: 30
            gender: "Male"
        }
    }

    // 设置列宽调节器
    headerVisible: true
    cornerVisible: true
    horizontalHeaderItemDelegate: Rectangle {
        color: "#f0f0f0"
        height: parent.height
        width: headerData.width
        Text {
            text: headerData.display
            font.bold: true
            anchors.centerIn: parent
        }
        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.SizeHorCursor
            property int dragStartX: 0
            property int columnWidth: headerData.width
            onPressed: {
                dragStartX = mouse.x
                columnWidth = headerData.width
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
                    headerData.width = columnWidth + mouse.x - dragStartX
                }
            }
        }
    }

    TableViewColumn {
        role: "name"
        title: "Name"
        width: 100
    }

    TableViewColumn {
        role: "age"
        title: "Age"
        width: 100
    }

    TableViewColumn {
        role: "gender"
        title: "Gender"
        width: 100
    }
}

这个 `TableView` 显示了一个包含三个元素（Tom，Jerry 和 Mickey）的 `ListModel`，每个元素有三个属性：name、age 和 gender。然后，我们在 `TableView` 中定义了三个 `TableViewColumn`，分别显示 name、age 和 gender 属性。最后，在 `TableView` 上设置了列宽调节器，允许用户通过触摸调节列宽。