examples/wheelhandler/FlickableUsage.qml

0001 /* SPDX-FileCopyrightText: 2021 Noah Davis <noahadvs@gmail.com>
0002  * SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
0003  */
0004
0005 import QtQuick
0006 import QtQuick.Controls as QQC2
0007 import org.kde.kirigami as Kirigami
0008
0009 QQC2.ApplicationWindow {
0010     id: root
0011
0012     width: flickable.implicitWidth
0013     height: flickable.implicitHeight
0014     visible: true
0015
0016     Flickable {
0017         id: flickable
0018
0019         anchors.fill: parent
0020         implicitWidth: wheelHandler.horizontalStepSize * 10 + leftMargin + rightMargin
0021         implicitHeight: wheelHandler.verticalStepSize * 10 + topMargin + bottomMargin
0022
0023         leftMargin: QQC2.ScrollBar.vertical.visible && QQC2.ScrollBar.vertical.mirrored ? QQC2.ScrollBar.vertical.width : 0
0024         rightMargin: QQC2.ScrollBar.vertical.visible && !QQC2.ScrollBar.vertical.mirrored ? QQC2.ScrollBar.vertical.width : 0
0025         bottomMargin: QQC2.ScrollBar.horizontal.visible ? QQC2.ScrollBar.horizontal.height : 0
0026
0027         contentWidth: contentItem.childrenRect.width
0028         contentHeight: contentItem.childrenRect.height
0029
0030         Kirigami.WheelHandler {
0031             id: wheelHandler
0032             target: flickable
0033             filterMouseEvents: true
0034             keyNavigationEnabled: true
0035         }
0036
0037         QQC2.ScrollBar.vertical: QQC2.ScrollBar {
0038             parent: flickable.parent
0039             height: flickable.height - flickable.topMargin - flickable.bottomMargin
0040             x: mirrored ? 0 : flickable.width - width
0041             y: flickable.topMargin
0042             active: flickable.QQC2.ScrollBar.horizontal.active
0043             stepSize: wheelHandler.verticalStepSize / flickable.contentHeight
0044         }
0045
0046         QQC2.ScrollBar.horizontal: QQC2.ScrollBar {
0047             parent: flickable.parent
0048             width: flickable.width - flickable.leftMargin - flickable.rightMargin
0049             x: flickable.leftMargin
0050             y: flickable.height - height
0051             active: flickable.QQC2.ScrollBar.vertical.active
0052             stepSize: wheelHandler.horizontalStepSize / flickable.contentWidth
0053         }
0054
0055         Grid { // Example content
0056             columns: Math.sqrt(visibleChildren.length)
0057             Repeater {
0058                 model: 1000
0059                 delegate: Rectangle {
0060                     implicitWidth: wheelHandler.horizontalStepSize
0061                     implicitHeight: wheelHandler.verticalStepSize
0062                     gradient: Gradient {
0063                         orientation: index % 2 ? Gradient.Vertical : Gradient.Horizontal
0064                         GradientStop { position: 0; color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1) }
0065                         GradientStop { position: 1; color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1) }
0066                     }
0067                 }
0068             }
0069         }
0070     }
0071 }