qml 给Rectangle加滚动条，并用鼠标滚轮实现滚动

可以使用ScrollView来实现Rectangle的滚动条，代码如下：

ScrollView {
    width: 200
    height: 200
    Rectangle {
        width: 300
        height: 600
        color: "red"
    }
}

鼠标滚轮可以通过在ScrollView中添加一个MouseArea并监听wheel事件来实现滚动，代码如下：

ScrollView {
    id: scrollView
    width: 200
    height: 200
    Rectangle {
        id: content
        width: 300
        height: 600
        color: "red"
    }
    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onWheel: {
            scrollView.contentY += wheel.angleDelta.y / 120 * 20
            wheel.accepted = true
        }
    }
}

相关问题

qml 给Rectangle加滚动条

可以通过在Rectangle中添加一个ScrollView来实现滚动条功能。具体可以参考以下代码：

Rectangle {
    id: rect
    width: 200
    height: 200

    ScrollView {
        id: scroll
        anchors.fill: parent

        Rectangle {
            width: rect.width
            height: rect.height * 2
            color: "orange"
        }
    }
}

在此例子中，ScrollView占据了整个矩形的区域，并且包含了一个高度是矩形两倍的内部矩形。当内部矩形超出ScrollView的显示范围时，就会出现滚动条。

qml中使用Rectangle实现滚动效果

在 QML 中，我们可以使用 Rectangle 或 Item 来实现滚动效果。下面是一个简单的例子：

import QtQuick 2.12
import QtQuick.Controls 2.12

Rectangle {
    id: container
    width: 200
    height: 200
    clip: true // 遮罩

    Rectangle {
        id: content
        width: container.width
        height: 400 // 内容高度大于容器高度，以便出现滚动条
        color: "blue"
        Text {
            text: "Scrollable content"
            anchors.centerIn: parent
            color: "white"
        }
    }

    ScrollBar.vertical: ScrollBar {}
    ScrollIndicator.vertical: ScrollIndicator {}
    ScrollArea {
        id: scrollArea
        anchors.fill: parent
        contentItem: content
        clip: true
        // 滚动条跟随内容变化
        onContentWidthChanged: {
            if (content.width > container.width) {
                scrollBar.visible = true
            } else {
                scrollBar.visible = false
            }
        }
        onContentHeightChanged: {
            if (content.height > container.height) {
                scrollBar.visible = true
            } else {
                scrollBar.visible = false
            }
        }
    }
}

上述代码中，我们使用了一个包含了蓝色背景和一行文本的 Rectangle 作为内容。然后我们创建了一个容器 Rectangle 作为滚动区域，并将其 clip 属性设置为 true，以便实现遮罩效果。接着我们创建了一个 ScrollArea，将内容 Rectangle 设置为其 contentItem 属性，以实现滚动效果。最后，我们还添加了一个垂直滚动条 ScrollBar 和一个滚动指示器 ScrollIndicator。

当内容高度或宽度大于容器高度或宽度时，滚动条会自动出现。滚动条的位置和大小会随着内容的滚动而变化。