QML技术问题：如何让ListView在周边区域也支持鼠标滚轮滚动

你当前的代码中，ListView通过anchors { fill: parent; margins: 40 }在ScrollView内部留出了40px的空白区域，这部分区域属于ScrollView但不属于ListView。默认情况下滚轮事件只会被鼠标指向的Item响应，所以在空白区域滚动时，事件不会传递给ListView，导致无法触发滚动。

以下是两种可行的解决方案：

方案一：通过WheelHandler转发父容器滚轮事件 #

给最外层的Rectangle添加WheelHandler，捕获整个区域的滚轮事件，手动控制ScrollView的滚动：

import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    height: 400
    width: 300
    color: "steelblue"

    // 捕获整个矩形区域的滚轮事件，转发给ScrollView
    WheelHandler {
        onWheel: {
            scrollView.contentY += angleDelta.y * 0.1
        }
    }

    ScrollView {
        id: scrollView
        anchors.fill: parent
        wheelEnabled: true

        ListView {
            id: listView
            anchors { fill: parent; margins: 40}
            clip: true
            model: appModel

            delegate: Rectangle {
                height: 50
                width: listView.width
                color: colorR
            }
        }
    }

    ListModel {
        id: appModel
        ListElement { colorR: "red"}
        ListElement { colorR: "green"}
        ListElement { colorR: "blue"}
        ListElement { colorR: "cyan"}
        ListElement { colorR: "yellow"}
        ListElement { colorR: "blue"}
        ListElement { colorR: "lightgray"}
        ListElement { colorR: "red"}
        ListElement { colorR: "green"}
        ListElement { colorR: "blue"}
        ListElement { colorR: "cyan"}
        ListElement { colorR: "yellow"; }
        ListElement { colorR: "lightgray"}
    }
}

方案二：改用ScrollView的padding属性（推荐） #

利用ScrollView自带的padding属性实现周边空白，此时整个ScrollView区域都会响应滚轮事件，更符合Qt Quick Controls的设计规范：

import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    height: 400
    width: 300
    color: "steelblue"

    ScrollView {
        anchors.fill: parent
        wheelEnabled: true
        padding: 40 // 用ScrollView的padding替代ListView的margins

        ListView {
            id: listView
            anchors.fill: parent // 填满ScrollView的内容区域
            clip: true
            model: appModel

            delegate: Rectangle {
                height: 50
                width: listView.width
                color: colorR
            }
        }
    }

    ListModel {
        id: appModel
        ListElement { colorR: "red"}
        ListElement { colorR: "green"}
        ListElement { colorR: "blue"}
        ListElement { colorR: "cyan"}
        ListElement { colorR: "yellow"}
        ListElement { colorR: "blue"}
        ListElement { colorR: "lightgray"}
        ListElement { colorR: "red"}
        ListElement { colorR: "green"}
        ListElement { colorR: "blue"}
        ListElement { colorR: "cyan"}
        ListElement { colorR: "yellow"; }
        ListElement { colorR: "lightgray"}
    }
}

说明 #

• 方案二更简洁，因为ScrollView的padding属性本来就是用来控制内容与容器边缘的间距，此时整个ScrollView范围内的滚轮事件都会被处理，无需额外的事件转发逻辑。
• 方案一适合需要对滚轮事件做自定义处理的场景，比如调整滚动速度、添加滚动动画等。

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