QML/QT：TableView垂直滚动条鼠标正常但触摸无响应求助

这个问题我之前在做Qt Quick触摸应用时也碰到过，核心原因是Qt Quick Controls 1.x的滚动条对触摸交互支持不完善，再加上你代码里同时导入了1.x和2.x的Controls组件，容易引发冲突。咱们一步步拆解问题和解决办法：

为什么触摸滚动条没反应？ #

1. Controls版本冲突：你同时导入了QtQuick.Controls 1.4和2.5，两个版本的组件命名有重叠（比如ScrollBar、TableView），Qt可能会优先加载某个版本，但触摸事件的处理逻辑在两个版本里差异很大，导致触摸交互失效。
2. 1.x滚动条的触摸缺陷：Controls 1.x是基于传统桌面端设计的，默认只给滚动条绑定了鼠标事件，自定义style里的纯Rectangle元素（你的handle和scrollBarBackground）没有处理触摸事件的逻辑，所以触摸操作没响应。

修复方案 #

方案1：切换到Qt Quick Controls 2.x（强烈推荐） #

Controls 2.x是为触摸优先的场景重新设计的，原生支持触摸拖动、点击滚动条背景等操作，样式系统也更灵活。修改后的代码如下：

import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 2.5

Window {
    width: 641
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 640
        height: 200
        anchors.fill: parent

        TableView {
            id: tv
            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
            verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn

            TableViewColumn {
                role: "title"
                title: "Title"
                width: 100
            }
            TableViewColumn {
                role: "author"
                title: "Author"
                width: 200
            }

            model: libraryModel1

            // 自定义垂直滚动条样式
            verticalScrollBar: ScrollBar {
                id: scrollBar
                width: 10
                radius: width / 2
                background: Rectangle {
                    color: "#DBDDDD"
                    radius: scrollBar.width / 2
                }
                handle: Rectangle {
                    color: "#2EA2EC"
                    radius: scrollBar.width / 2
                }
            }

            ListModel {
                id: libraryModel1
                ListElement { title: "A Masterpiece"; author: "Gabriel" }
                ListElement { title: "Brilliance"; author: "Jens" }
                ListElement { title: "Outstanding"; author: "Frederik" }
                ListElement { title: "A Masterpiece"; author: "Gabriel" }
                ListElement { title: "Brilliance"; author: "Jens" }
                ListElement { title: "Outstanding"; author: "Frederik" }
                ListElement { title: "A Masterpiece"; author: "Gabriel" }
                ListElement { title: "Brilliance"; author: "Jens" }
                ListElement { title: "Outstanding"; author: "Frederik" }
            }
        }
    }
}

这个版本的滚动条不需要额外处理触摸事件，就能完美支持鼠标和触摸操作。

方案2：修复Controls 1.x的触摸支持（兼容旧项目） #

如果因为项目限制不能切换到2.x，可以给自定义滚动条元素手动添加触摸事件处理逻辑：

import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    width: 641
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 640
        height: 200
        anchors.fill: parent

        TableView {
            id: tv
            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
            verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn

            TableViewColumn {
                role: "title"
                title: "Title"
                width: 100
            }
            TableViewColumn {
                role: "author"
                title: "Author"
                width: 200
            }

            model: libraryModel1

            style: TableViewStyle {
                decrementControl: Rectangle { width: 0; visible: false }
                incrementControl: Rectangle { width: 0; visible: false }
                scrollToClickedPosition: true

                handle: Rectangle {
                    visible: true
                    implicitWidth: 10
                    radius: width/2
                    color: "#2EA2EC"

                    // 添加触摸拖动逻辑
                    TouchArea {
                        anchors.fill: parent
                        property real startY: 0
                        property real startScrollPos: 0

                        onPressed: {
                            startY = touchPoints[0].y;
                            startScrollPos = tv.contentY;
                        }

                        onUpdated: {
                            const delta = touchPoints[0].y - startY;
                            // 根据内容高度和可视区域的比例计算滚动量
                            const scrollRatio = tv.contentHeight / tv.visibleHeight;
                            tv.contentY = startScrollPos - delta * scrollRatio;
                        }
                    }
                }

                scrollBarBackground: Rectangle {
                    visible: true
                    width: 10
                    radius: width/2
                    color: "#DBDDDD"

                    // 添加点击背景滚动逻辑
                    TouchArea {
                        anchors.fill: parent
                        onPressed: {
                            const clickRatio = mouseY / height;
                            tv.contentY = (tv.contentHeight - tv.visibleHeight) * clickRatio;
                        }
                    }
                }
            }

            ListModel {
                id: libraryModel1
                ListElement { title: "A Masterpiece"; author: "Gabriel" }
                ListElement { title: "Brilliance"; author: "Jens" }
                ListElement { title: "Outstanding"; author: "Frederik" }
                ListElement { title: "A Masterpiece"; author: "Gabriel" }
                ListElement { title: "Brilliance"; author: "Jens" }
                ListElement { title: "Outstanding"; author: "Frederik" }
                ListElement { title: "A Masterpiece"; author: "Gabriel" }
                ListElement { title: "Brilliance"; author: "Jens" }
                ListElement { title: "Outstanding"; author: "Frederik" }
            }
        }
    }
}

这里通过给handle和scrollBarBackground添加TouchArea，手动将触摸事件映射到TableView的滚动逻辑上，实现触摸拖动和点击滚动的功能。

额外注意事项 #

• 尽量避免同时导入QtQuick.Controls 1.x和2.x，这会导致组件命名冲突，引发不可预期的行为。
• 如果使用Controls 2.x，确保项目的Qt版本至少是5.12（你当前导入的是2.5，对应Qt 5.12+），这样能获得更好的触摸支持和稳定性。

内容的提问来源于stack exchange，提问作者Rich Bair