Jesper K. Pedersen

PathView is closely related to PathAnimation: it's a view that arranges its elements on an arbitrary path. The delegates instantiated by the PathView will move, like a carousel, on the path provided by the user. In extra features, we specify how to transform each delegate as it moves along the path (by modifying arbitrary properties such as scale, opacity, and so on).

Qt Quick Layouts are highly effective for automatically positioning and resizing elements. Acting as positioners, layouts organize their children based on criteria such as vertical, horizontal, or grid arrangements. Unlike positioners, they can also resize elements and provide a more comprehensive API for managing size control.

This video is about the "clip" property. You can set it on any item in order to make it clip its children to its geometry. What has it to do with views? It's quite simple: ListView is generally an element where you always want clipping to be enabled, otherwise the entries in your list will "leak" outside of its borders.

Entries in a ListView can be grouped in sections. In this video we will present a little trick to make the section collapse when clicked. Consider it a little exercise -- it requires a bit of creativity and knowledge about how QML works.

ListView can be customized in many ways! There are plenty of knobs and levers to control ListView's behavior. We can highlight the current index, we can have keyboard navigation, we can control its scrolling and even have section headings. In this video we'll explore a few of these customization options.

This video introduces two important building blocks: positioners elements and the Repeater element. Positioners are used to automatically place their children side by side or one below each other, and so on. The Repeater element creates a number of elements driven by a data model. By placing a Repeater into a positioner, we can create elements driven by data and arrange them, all automatically.

ListView is probably the most important component for model/view programming in QML. ListView supports flicking, it creates and destroys elements on demand (to be able to work with very big datasets), and so on. This video introduces ListView and its basic usage.

In this module we will explore the different possibilities to create animations in QML. Animations are a first-class citizen in QML; pretty much any property can be easily animated by using one of the many available animation types. We'll kickstart the first video of the series by showing you how to create and control animations and aggregate them together to build more complex ones (sequential, parallel, and so on).

Time for a little trick! When creating custom animations, it may help to run them in slow motion – just for debugging purposes, of course. This is doable by writing some C++ code, but requires poking into Qt internals. Just use GammaRay™ instead!

Flipable is a convenience component in Qt Quick that shows two different arbitrary elements: one on its front, and one on its back. Like a postcard, we can rotate the Flipable and see the other element. Flipable does not come with a built-in animation; we have to create one ourselves to make it look nicer.

In this video we'll introduce states and transitions in QML. States are a very convenient way to centralize the property values of a set of items in a user interface built in QML. While states define the values themselves, transitions define how to animate the change of the values corresponding to a state change.

Designers sometimes want to move a graphic element alongside a custom path, specified via bezier curves or SVG paths. PathAnimation is the tool for this job in QML; this video teaches you how to use it.

Qt's model/view framework is one of Qt's most challenging aspects. While list models are relatively straightforward, tree models require handling custom indexes, causing developers frustration for over a decade. Adding proxy models for filtering/sorting and communication through proxy stacks to base models increases complexity. Custom delegates are needed for different painting and event handling per row, column, or cell.

Components handling keyboard input must manage focus properly. Focus propagation between components is tricky in QML since the "focus" property has global effects. When multiple components need keyboard focus simultaneously, we must limit the "focus" property's consequences. The FocusScope element handles this by containing focus within specific areas.

Never store business-related state in QML - all business logic belongs in C++. However, UI-related state (like list view scroll position) may be stored in components. This video shows introducing ad-hoc properties in component elements that act as local variables for UI state management while maintaining proper separation of concerns.

QML code typically creates all elements immediately, which works for simple examples but wastes resources in complex applications. Creating all screens, pages, and dialogs on startup would consume excessive resources and slow application launch. The Loader component solves this by creating elements on demand, improving performance and resource management.

In the fourth module of our "Introduction to Qt / QML" series we explore components: that is, how to reuse QML code by encapsulating it in a separate piece that we can then create as many times as needed. In this video, the basics of creating an "out-of-line" component is defined as well as how to define a proper API for our components.

To complete the discussion about defining the interface of a component, this session shows how to add functions to a component ("methods"), as well as signals. Declarative programming is also discussed and why certain designs match QML's spirit much better than others.

In this video we discuss how sizing works when creating a reusable component, including how to make components that have adequate width and height out of the box. We also showcase GammaRay, the free software introspection tool for Qt applications developed by KDAB.

This video discusses keyboard handling in Qt Quick. Whether you have a physical keyboard, a virtual one, or maybe some special hard keys, you may want to have the elements in your scene react to the keypresses. There are a few ways to manage keyboard input: from just using an element such as TextInput, that solves the whole problem for us, to actually having custom logic to handle keyboard events.