Detailed QML ListView

ListView in QML is roughly the same as Android ListView, which is a list view and one of the most commonly used components.It allows users to scroll off-screen data into the view by sliding (finger down, mouse down, mouse wheel), while the original data on the screen will scroll out of view.A feature of QML ListView is that developers need to define a model, that is, the data displayed by ListView, or ListItem.

Flickable

ListView in QML inherits from the Flickable draggable and flickable component.So some ListViews of Flickable have them. Let's introduce Flickable

Here is an example of using Flickable. In this example, Flickable contains a large image. The view cannot display the entire image at a time, but the view can be dragged by dragging and sliding.There is a scroll bar.
Example source code: flickable

The layout of this example is as follows:

When moving the view down to the right:

Some properties of flickable are marked in the above picture to facilitate understanding of the layout of flickable.
originX and originY are the origin of the content, and their values ​​always refer to the upper-left corner of the content, regardless of the layout orientation.Usually, it is (0, 0), which is the position of the origin of the coordinate system.But ListView and GridView need to be aware that their originX and originY are not necessarily (0, 0), they may have arbitrary origin due to item size change or item insertion/removal outside the visible area.Note that this property is read-only.

content and contentY refer to the relative origin of the Flickable view, which corresponds to the origin of the image in the example above.If there is no sliding, then their values ​​are the same as originX and originY, and the view will change after sliding. For example, if you slide 100 points to the right, then the value of contentX is (originX + 100).If you slide down 100 points, the value of contentY is (originY + 100).You can move the view by changing the values ​​of content and contentY. If you set their values ​​to (originX, originY), the view will return to its original position.

The width and height of a flickable refer to the width and height of its view.

contentWidth and contentHeight indicate the width and height of the displayed content. In the above example, the corresponding picture width and height, the value in the example is larger than the flickable width and height.