Tutorial: Custom picker using QML

This tutorial shows you how to create a custom picker using only QML. You'll create a simple app that consists of two columns that display signs of the zodiac. The first column contains items corresponding to month, and the second column contains items corresponding to year. Each item also includes an image. You can scroll through each of the columns to choose a custom combination, which is displayed in a Label below the custom picker.

You will learn to:

  • Create a custom picker using QML
  • Use an ImageView in a custom picker
  • Use a data model to provide information for custom picker entries
Screen showing the custom zodiac picker.

Set up your project

Before you start creating your app, create an empty project in the Momentics IDE, making sure to select the Standard empty project template. If you're not sure how to do this, take a look at Create a new project.

After you finish, a new project appears in the Project Explorer view with the name that you specified.

Add the image assets

The last part of the setup is adding our image resources to the project. The .zip file that's provided below contains images of our zodiac signs.

To import images into your project:

  1. Download the pickers_tutorial_images.zip file.
  2. Extract the images folder to the project's asset folder in your workspace. For example, C:\your_workspace\project_name\assets.
  3. In the Project Explorer view, refresh your project to display the imported images.
Screen showing the image assets used in the sample.

Last modified: 2015-03-31

Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus