如何在 QML 中为矩形创建滚动条

Posted 2023-02-16

【中文标题】如何在 QML 中为矩形创建滚动条

【英文标题】：how to create a scrollbar for rectangle in QML

【发布时间】：2016-11-06 04:33:55

【问题描述】：

像网页一样，当内容超出矩形时，会有一个滚动条。 还有其他人可以帮助我吗？ 我试过用listview，但不能在矩形中使用它

【问题讨论】：

提供更多细节可能会有所帮助，也许是您尝试过的代码 sn-p。

试试ScrollView

【参考方案1】：

文档中有一个示例，如何在没有 Flickable 的情况下使用 ScrollBar：

import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle 
    id: frame
    clip: true
    width: 160
    height: 160
    border.color: "black"
    anchors.centerIn: parent

    Text 
        id: content
        text: "ABC"
        font.pixelSize: 160
        x: -hbar.position * width
        y: -vbar.position * height
    

    ScrollBar 
        id: vbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Vertical
        size: frame.height / content.height
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    

    ScrollBar 
        id: hbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Horizontal
        size: frame.width / content.width
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    

【讨论】：

我认为你可以在这样一个基本项目上获得该功能真是太酷了。 :)

这应该像今天（2017 年 12 月）一样工作吗？因为这不是我尝试的时候。并且没有找到那两个 qt 页面。

使用 Qt 5.9.3 和 Qt 5.10.0 为我工作。我已经更新了链接。

【参考方案2】：

将矩形添加到 flickable 中解决了我的问题

import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.5
import QtQuick 2.8
Item 
    id: item1
    visible: true
    width: 800
    height: 600
    ScrollView 
        id: frame
        clip: true
        anchors.fill: parent
        //other properties
        ScrollBar.vertical.policy: ScrollBar.AlwaysOn
        Flickable 
            contentHeight: 2000
            width: parent.width
            Rectangle 
                id : rectangle
                color: "#a7c4c6"
                radius: 6
                //visible: !busyIndicator.running
                anchors.fill: parent