[Interest] QtQuick Controls 2 and Designer: Should I use Styles or Customize?

Shantanu Tushar shaan7in at gmail.com
Thu Mar 15 15:47:45 CET 2018


Hi,

I work on a desktop application thats written with QtQuick/QML with a
custom non-native look'n'feel (screenshots at [1]). Recently we've
started using QtQuick Designer for all new UI code to make it easier
for the dev and the design guy to work together.

Now, the biggest issue I've faced with using the Designer and QQC2 is
theming the controls. There are two approaches as per
https://doc.qt.io/qt-5.10/qtquickcontrols2-customize.html -

1. Creating a Custom Style
* In this approach I can create .qml files for Button, CheckBox etc
and instruct QQC2 to load my style at runtime
+ One can drag-n-drop the controls from the standard "Qt Quick -
Controls 2" from the Designer Library.
- My style implementation must do precise calculations for
implicitHeight/implicitWidth, padding etc (for example see the
implementation of a built-in style like Material)
- The problem is that I couldn't find a way to ask QtQuick Designer to
load my style so that the Form looks the same as the running app (I've
enabled using emulation layer built with current Qt)
- If I use Style-specific C++ Extensions, attached properties do not
show up in the QtQuick Designer Properties section. So our design guy
can't use them. (See the left side of [2])

2. Customizing a Control
* In this approach I can create .qml files for Button, CheckBox etc
and instead of "import QtQuick.Controls 2.2" I can "import mycontrols"
+ The controls show up properly themed even in the designer which
helps because now its closer to what will be rendered in the actual
application.
+ I don't have to add code to calculate implicitWidth/implicitHeight
etc because they're inherited from the base Control. For example by
Button.qml can just say "Button {}" and it'll be enough.
- In my Button.qml I can add additional properties (like "property
string iconSource") but they don't show up in Designer Properties
section. So our design guy can't use them. (See right side of [2])
- Because "QtQuick.Controls 2.2" is no longer imported, I need to make
sure I create qml file for every control I want to use, even if I am
not overriding their looks.
- Not possible to drag-n-drop the controls from the standard "Qt Quick
- Controls 2" from the Designer Library.

Using any of these approaches has their own problems which prevents us
from using the Designer. Any suggestions/workarounds on how I can use
a custom look'n'feel but still be able to use the Designer and its
Property section?

[1] https://www.sostronk.com/app
[2] https://i.imgur.com/cZrtqkR.png

Thanks!

-- 
Shantanu Tushar    (UTC +0530)
shantanu.io



More information about the Interest mailing list