CODEWITHSUNDEEP
imageuser-interfaceqml
David Eaton
David Eaton

Reputation: 564

Creating UI in QT/QML using 1 image with all states of UI control

I am looking to create a new QML control using PNG images. I would normally use 1 image for each state (Example hover, clicked, disabled). I have noticed that some developers use 1 image with all states of the control in 1 image.. like this...

enter image description here

I would like to learn how to use images like these, I imagine it's useful for creating different styles by modifying a template of a unique design.

So my question is how to use an image and only show one state at a time?

Here is a sample image to use. I would like to create a simple bullet image in QML that does the following.

  1. Never clicked show grey,
  2. Hovered it shows yellow,
  3. Clicked it shows orange.

Here is the image to use.

enter image description here

What I can't figure out is how to use only part of the image per state.

Thanks.

Upvotes: 0

Views: 145

Answers (1)

Mitch
Mitch

Reputation: 24416

Your best bet might be to use QQuickImageProvider for this. Here's an example that shows how to subclass it. You could probably also do it with a shader like mentioned in the other answer on that page.

If you want an easier way to achieve your original workflow of using one image per state, you should check out the Imagine style.

Upvotes: 1

Related Questions