Creating QML Controls from Scratch

Here's How to Create QML Controls for Embedded and Mobile Projects

By Chris Cortopassi

QML provides a powerful and flexible framework for developing user interfaces (UI). The basic elements provided are low level, so you typically need to build up the components of your UI into widget-like controls. Creating a set of common QML controls can greatly reduce the overall development effort of your project.

Back in 2017, we published a five-part series called Creating QML Controls From Scratch. In the series, we showed developers like you how to build a set of bare-bones QML controls to use as a starting point for the controls in a mobile or embedded project. Once created, these controls could be modified to suit the specific needs of any project.

The initial series generated so much interest that we've decided to update and extend it to cover additional controls, offering you the tools you need to succeed on your next mobile or embedded project.

From this blog page (think of it as the series index) you can immediately access parts 1-5: Button, CheckBox/RadioButton, Switch, Slider, and ScrollBar. (You can also access the index from the Part 1/Button blog.) Each of these installments has been carefully updated to reflect the latest technical advances. As for the new content, links to more controls will be added regularly (every few weeks) so check back often. We've started with the most basic controls and are working our way up in terms of complexity.

Here's the complete list of QML controls we're developing in this series:

  1. Button
  2. CheckBox and RadioButton
  3. Switch
  4. Slider
  5. ScrollBar
  6. ProgressBar
  7. Spinner
  8. Dialog
  9. PageDots
  10. Tabs
  11. Table
  12. TimePicker
  13. DatePicker
  14. BarChart
  15. LineChart
  16. PieChart
  17. Keyboard

Find this content helpful? Looking for more QML and Qt-related technical content? Check out our blog and webinars.