This chapter will reveal why the Model/View approach in QML is a practical way to stop fighting with the interface. Here you’ll discover: how separating data from delegates dramatically simplifies screen scaling, and typical solutions from professional Qt developers save hours of refactoring. As a result, code becomes cleaner and changes — safer.
3 key views will be covered (ListView, GridView, PathView) and 2 data approaches: ListModel and JSON model, plus the “trump card” for non-standard interfaces — VisualItemModel.
If you skip this chapter, you’ll have to build QML architecture “by feel” from here on — and pay for it with time.
This chapter includes ready-to-use code examples.
Chapter Self-Check
What is a model in QML and must it necessarily contain the data itself?Answer
Correct answer: A model is an element that provides an interface for accessing data. It doesn’t necessarily contain the data itself — it can simply provide access to it.
What is the delegate responsible for and why doesn’t the model contain display information?Answer
Correct answer: The delegate is responsible for displaying each data item individually. Separating data and presentation allows using one model with different visualization methods and simplifies code maintenance.
Why are all view elements (ListView, GridView, PathView) based on the Flickable element?Answer
Correct answer: The Flickable element provides scrolling and content navigation functionality, which all views need to work with large data lists.
How do you access model properties inside the delegate when using a JSON model?Answer
Correct answer: Through the modelData object (for example,
modelData.artist, modelData.album). For ListModel, you can access directly by property name.Why can elements in PathView be scrolled infinitely in any direction?Answer
Correct answer: PathView displays elements in a closed loop — when the end of the list is reached, it automatically continues from the beginning, creating an infinite scrolling effect.
What ListModel methods allow dynamically changing data and why is this needed?Answer
Correct answer: Methods
append(), insert(), remove(), and move(). This makes ListModel a dynamic list, allowing data updates without recreating the model.How is VisualItemModel fundamentally different from ListModel and when should it be used?Answer
Correct answer: VisualItemModel is itself responsible for presenting its elements and doesn’t need a delegate. Used when each element needs to be displayed in an individual manner.
Why is JSON convenient as a model type in QML and does it require a special element?Answer
Correct answer: Thanks to JavaScript integration in QML, JSON data is used directly without a special element — it’s enough to assign it to a variable and use it as a model.
What will happen with the display in GridView if cellWidth and cellHeight are not specified?Answer
Correct answer: Elements won’t be properly placed in the grid, as GridView won’t know the cell size for automatic filling of the display area.
How is the 3D carousel effect created in PathView and what elements are used for this?Answer
Correct answer: PathQuad elements are used to create circular arcs and PathAttribute to change transparency and size of elements depending on their position on the path.
What are the header, footer, and highlight properties for in views?Answer
Correct answer: For adding decorations: header creates a header at the top, footer — a footer at the bottom, and highlight — visual highlighting of the currently selected element.
Why is an import with a namespace identifier (as CDs) used in the JSON model example?Answer
Correct answer: To access the jsonModel variable from the JS file through the namespace (CDs.jsonModel), avoiding name conflicts.
When should VisualItemModel be used instead of ListModel with a delegate?Answer
Correct answer: When each element requires a unique presentation with different colors, sizes, layout — for example, when embedding special elements (banners, dividers) among regular ones.
What role does the pathItemCount property play in PathView?Answer
Correct answer: It determines the number of elements that should be simultaneously visible on screen in the closed loop view.
Practical Assignments
Easy Level
Contact List with JSON Model
Create an application with a contact list using a JSON model. Each contact should contain name, phone number, and email. Display data in a ListView with color highlighting for even and odd elements. Add a simple header “My Contacts”.
Hints: Create a JS file with an array of JSON objects. Import it using
import "file.js" as Contacts. In the delegate, use index % 2 to determine parity. Access data through modelData.name.
Medium Level
Image Gallery with GridView
Develop an image gallery using GridView and ListModel. When clicking on a thumbnail, the image should enlarge and display in a separate area above the list. Implement highlight decoration to highlight the selected element. Add the ability to delete the currently selected image by pressing the Delete key.
Hints: Use the
currentIndex property to track the selected element. For enlarged viewing, create an Image with binding to model.get(gridView.currentIndex).source. The remove(index) method will delete the element. Handle the Keys.onDeletePressed event.
Hard Level
Music Player with PathView 3D Carousel
Create a music player interface with a 3D carousel of album covers (PathView). Implement smooth carousel rotation animation, scaling and transparency effects to create depth. Add a control panel with current track information (using VisualItemModel for different element types: album covers and advertising banners). Integrate the ability to add new albums through dynamic ListModel.
Hints: Use PathQuad to create arcs, PathAttribute for iconScale and iconOpacity. Create VisualItemModel, alternating album elements and banners. The
PathView.onPath property in the delegate will show if the element is visible. For smoothness, add preferredHighlightBegin and preferredHighlightEnd. Methods append() and insert() will allow dynamically adding tracks.
💬 Join the Discussion!
Figured out the Model/View architecture? Have questions about choosing between ListView, GridView, and PathView?
Maybe you created your own unique implementation with VisualItemModel or came up with a creative way to use PathView?
Share your experience, ask questions, or help other readers master the pattern of data and presentation separation!