ScrollView & QQuickPaintedItem

Quawetim

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
	}		
}

KroMignon

@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!

Quawetim

@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.

KroMignon

@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
	}		
}

Quawetim

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

KroMignon

@Quawetim Sorry I made a mistake, should be implicitHeightandimplicitWidth`, 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" }
           }
       }
   }
}
``

Quawetim

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

KroMignon

@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