为包含多个 QQuickPaintedItems 的 QQuickView 实现滚动

Question

So recently I started a project where I want to display a graph showing relations between different datasets.

The graph consists of Edges and Nodes, while both of these classes inherit QQuickPaintedItem and override the paint(QPainter* painter) method. I have another class which stores all Nodes and Edges in two QLists. When I want to display the Graph, the paint method for every Node and Edge is called and is being painted into a QQuickView. I do this by setting a Qml File for the QQuickView (important: The loaded qml File has nothing to do with the actual Graph, everything is painted with the paint-method from QQuickPaintedItem and i haven't exposed anything related to the Graph to Qml. The Qml File is being used to display some controls for the graph) and getting the content item (QQuickItem* from method contentItem()) of the QQuickView and setting it as a parent for every Node and Edge. All of this works fine for me.

Now to my problem: Some of the graphs I wanna display are bigger than my actual view i want to display them in, so to solve this i want to implement horizontal and vertical Scrolling for my View. However I haven't found anything that seems to solve my problem due to the fact that i can't use predefined Qml-Layouts like ListView aso. for my Graph.

Does anyone have an idea how I could implement Scrolling? Is there a way to implement this for my QQuickView or is there are way to expose my two Lists of Nodes and Edges to Qml and implement Scrolling in there?

(If you need some code, feel free to ask. I don't think it makes sense to share some code right now since I'm searching for an idea what to do about this topic in the first place).

Thank you!

Answer 1

If you don't mind rendering everything, what you need is Flickable .

Set the viewable width and height of your Flickable (explicitely, with anchors, or with layouts) and nest your custom item in it and set the contentWidth and contentHeight of the flickable depending on the total size or your custom item.