qt5.15中如何做一个可通过触摸调节列宽的多列的列表

在 Qt 5.15 中，你可以使用 QML 中的 TableView 组件来实现一个可通过触摸调节列宽的多列列表。下面是一个简单的示例：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    visible: true
    width: 600
    height: 400

    TableView {
        id: tableView
        anchors.fill: parent
        model: ListModel {
            ListElement {
                name: "Alice"
                email: "alice@example.com"
            }
            ListElement {
                name: "Bob"
                email: "bob@example.com"
            }
            ListElement {
                name: "Charlie"
                email: "charlie@example.com"
            }
        }

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

        TableViewColumn {
            role: "email"
            title: "Email"
            width: 200
        }

        TableViewColumn {
            role: "phone"
            title: "Phone"
            width: 200
        }

        // 添加一个触摸区域，用于调节列宽
        Rectangle {
            id: touchArea
            z: 1
            anchors.fill: parent
            opacity: 0
            MouseArea {
                anchors.fill: parent
                drag.target: touchArea
                drag.axis: Drag.XAxis
                drag.minimumX: 50 // 最小宽度
                drag.maximumX: parent.width - 50 // 最大宽度
                onReleased: {
                    // 更新列宽
                    tableView.columns[dummyColumn.index].width = dummyColumn.width
                    dummyColumn.width = 0
                }
            }
        }

        // 添加一个虚拟列，用于显示拖动效果
        TableViewColumn {
            id: dummyColumn
            visible: false
            width: 0
        }

        // 监听列的宽度变化，更新虚拟列的位置和宽度
        onColumnWidthChanged: {
            dummyColumn.width = 0
            var i = 0
            for (var column in tableView.columns) {
                dummyColumn.index = i++
                if (column === this) {
                    break
                }
                dummyColumn.x += column.width
            }
        }

        // 显示虚拟列的拖动效果
        ItemDelegate {
            id: dragDelegate
            width: dummyColumn.width
            height: parent.height
            opacity: 0.5
            visible: dummyColumn.width > 0
            text: dummyColumn.title
            font.bold: true
            background: Rectangle {
                color: "lightblue"
                border.color: "blue"
                border.width: 1
            }
        }
    }
}

这个示例创建了一个 TableView，包含三个 TableViewColumn，每列的宽度都是 200。添加了一个触摸区域 touchArea，用于调节列宽。添加了一个虚拟列 dummyColumn，用于显示拖动效果。在列宽度变化时，更新虚拟列的位置和宽度。在拖动时，显示虚拟列的拖动效果。

当你通过拖动触摸区域来调节列宽时，虚拟列会跟随你的手指移动，并且实时更新宽度。当你松开手指时，更新实际列的宽度，并隐藏虚拟列。