Thursday November 23, 2017 by Mitch Curtis | Comments
Back in April we wrote about image-based styling for Qt Quick Controls 2. Since then, we have made good progress and nailed down some aspects that were still under consideration. We call the new style "Imagine".
[embed]https://youtu.be/WGmjObx6AkM[/embed]
The style works by scanning a directory of images and applying those images to the controls. For example, when a Button is created, the style will look for button-background.9.png (or button-background.png for non-resizable buttons). As an example of what that image could look like, here's button-background.9.png from the default assets:
When the user presses the button, the style then looks for button-background-pressed.9.png (or button-background-pressed.png). In the case of the default assets, that would look like this:
The .9.png extension represents 9-Patch images. Using this format, we're able to encode information about how the control should look when it is resized into the image itself. Combine this with the pre-defined file naming convention and you've got a style that can be customized without ever touching QML, giving designers complete control over what they do best, and allowing developers to focus on writing applications, not styles.
To provide a starting point for creating your own style, we've created a complete asset template in Sketch:
For those who prefer Illustrator or Photoshop, we've provided smaller templates, each with their own example that uses the assets:
The Imagine style is available with Qt 5.10. For more information, see the documentation.
Download the latest release here: www.qt.io/download.
Qt 6 was created to be the productivity platform for the future, with next-gen 2D & 3D UX and limitless scalability.
Find webinars, use cases, tutorials, videos & more at resources.qt.io
Check out all our open positions here and follow us on Instagram to see what it's like to be #QtPeople.
Näytä tämä julkaisu Instagramissa.Henkilön Qt (@theqtcompany) jakama julkaisu