Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

ScrollView & QQuickPaintedItem



  • Hello there. I'm trying to use ScrollView with my custom class View derived from QQuickPaintedItem but scroll bars not working.

    Here is some qml code:

    ScrollView {
    	anchors.top: _topBar.bottom
    	anchors.bottom: _footer.top
    	anchors.left: _leftBar.right
    	anchors.right: parent.right
    
    	clip: true
    	wheelEnabled: false
    
    	ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
    	ScrollBar.vertical.policy: ScrollBar.AlwaysOn	
    		
    	View {
    		id: view
    		anchors.fill: parent			
    	}
    }
    

    It works properly with Image but not with my View.
    The problem is i want to draw some data with QPainter in C++ backend and this image can be very wide. So i want to use ScrollBars to navigate. Maybe i should use another classes and techniques?

    UPDATE:
    Thanks to brute force (and Qt Docs) I found a solution. ScrollView wants to know how big the content is (View). Thus you should specify the contentWidth & contentHeight properties (these are the Pane properties, which is the basic element for ScrollView).

    NOTE: the anchors.fill: parent is needed too.

    So the working code is here:

    ScrollView {
    	anchors.top: _topBar.bottom
    	anchors.bottom: _footer.top
    	anchors.left: _leftBar.right
    	anchors.right: parent.right
    
    	clip: true
    	wheelEnabled: false
    
    	ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
    	ScrollBar.vertical.policy: ScrollBar.AlwaysOn	
    
    	contentWidth: 5000
    	contentHeight: 5000
    
    	View {
    		id: view
    		anchors.fill: parent
    	}		
    }
    


  • @Quawetim Hi, I would suggest you to remove the anchors in View item. This Item have to set himself the width and height it requires, so ScollView can do the job. With ancors.fill: parent width and height are link to ScollView, so no need for scrollbars!



  • @KroMignon, without anchors QML/Qt draws nothing at all. Just empty space on the screen, and there are no errors in the output. It seems that QML/Qt wants the width/height of the View or something else, but when i specifying this (in QML), nothing is drawn either.



  • @Quawetim I mean this:

    ScrollView {
    	anchors.top: _topBar.bottom
    	anchors.bottom: _footer.top
    	anchors.left: _leftBar.right
    	anchors.right: parent.right
    
    	clip: true
    	wheelEnabled: false
    
    	ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
    	ScrollBar.vertical.policy: ScrollBar.AlwaysOn	
    
    	View {
    		id: view
    		//anchors.fill: parent
    	        width: 5000
    	        height: 5000
    	}		
    }
    


  • @KroMignon, it does not works. Also empty space. I added solution to the first post.



  • @Quawetim Sorry I made a mistake, should beimplicitHeightandimplicitWidth`, like this small project (Qt 5.12.5)

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    Window {
       visible: true
       width: 640
       height: 480
       title: qsTr("Hello World")
    
       ScrollView {
           anchors.fill: parent
    
           clip: true
           wheelEnabled: false
    
           ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
           ScrollBar.vertical.policy: ScrollBar.AlwaysOn
           Rectangle {
               implicitWidth: 5000
               implicitHeight: 5000
               gradient: Gradient {
                   GradientStop { position: 0.0; color: "lightsteelblue" }
                   GradientStop { position: 1.0; color: "blue" }
               }
           }
       }
    }
    ``


  • @KroMignon, yep, it works. But is there any difference between implicitWidth/Height in View/Rectangle and contentWidth/Height in ScrollView? Which practice is better?



  • @Quawetim I don't know which is better. For my comprehension, it is easier to use implicitHeight/implicitWidth of the item to be scrolled.

    For example, when the item is a ListView, implicitHeight is automatically updated when an element from the ListView is changed/added/removed.
    Your View item only have to set implicitHeight/implicitWidth and dynamically the ListView will adapt the scollbars limits/positions