[Interest] QtQuick Controls 2 and Designer: Should I use Styles or Customize?
Jérôme Godbout
godboutj at amotus.ca
Wed Apr 11 17:02:12 CEST 2018
Look nice, but what exactly does the function SoStronk.contextPropertyForQmlObject(obj, string) does ?
________________________________
From: Shantanu Tushar <shaan7in at gmail.com>
Sent: April 11, 2018 9:29 AM
To: Jérôme Godbout
Cc: Thomas Hartmann; interest at qt-project.org
Subject: Re: [Interest] QtQuick Controls 2 and Designer: Should I use Styles or Customize?
Hi,
Thanks for the suggestion. I ended up implementing it like this-
$ cat theme/v2/Theme.qml
pragma Singleton
import QtQuick 2.10
import QtQuick.Window 2.3
Item {
visible: false
GlassColors {
id: glassColors
}
PlatinumColors {
id: platinumColors
}
readonly property var colors: glassColors
readonly property var dialogColors: platinumColors
...
...
}
$ cat theme/v2/ThemeContext.qml
import QtQuick 2.10
Item {
id: root
visible: false
readonly property var _inheritedTheme:
SoStronk.contextPropertyForQmlObject(root.parent, "theme")
readonly property bool _inheritedDialogColors: _inheritedTheme &&
_inheritedTheme.dialogColors ? true : false
property bool dialogColors: false
readonly property var colors: dialogColors ||
_inheritedDialogColors ? Theme.dialogColors : Theme.colors
}
where contextPropertyForQmlObject is a C++ function which returns the
value of a property under the context of the specified object.
Its used like this-
$ cat SoStronkStyle/Button.qml
import QtQuick 2.10
import QtQuick.Templates 2.3 as T
import SoStronk.theme 0.2
T.Button {
id: control
ThemeContext {
id: theme
}
...
// access theme.colors.foregroundColor
And whenever I create a dialog-
ThemeContext {
id: theme
dialogColors: true
}
So then any Button accessing theme.colors will end up referring to
dialogColors :)
On 9 April 2018 at 21:35, Jérôme Godbout <godboutj at amotus.ca> wrote:
> You could have a property inside the controler to select the proper theme
> value with a fallback, your theme singleton would then need to have
> different set of color.
>
>
> Theme
>
> {
>
> id: component
>
> property var defaultTheme: panelTheme
>
> property var mainTheme: ...
>
> property var panelTheme: ...
>
>
> function getTheme(prop)
>
> {
>
> if(prop && component.hasOwnProperty(prop))
>
> return component[prop];
>
> return component.defaultTheme;
>
> }
>
> }
>
>
> T.Button
>
> {
>
> id: component
>
> color: Theme.getTheme(component.customTheme).backgroundColor
>
> }
>
>
> // use style with default theme
> Button
> {
> }
>
> // Button with theme color
> Button
> {
> property string customTheme: 'mainTheme'
> }
>
> As for loading a multiple different template I think it would be impossible.
>
> ________________________________
> From: Interest <interest-bounces+godboutj=amotus.ca at qt-project.org> on
> behalf of Shantanu Tushar <shaan7in at gmail.com>
> Sent: April 9, 2018 11:30 AM
> To: Thomas Hartmann
> Cc: interest at qt-project.org
> Subject: Re: [Interest] QtQuick Controls 2 and Designer: Should I use Styles
> or Customize?
>
> Hi,
>
> I've been slowly implementing these suggestions and so far the results
> have been great. My button style looks like this-
>
> import QtQuick 2.9
> import QtQuick.Templates 2.1 as T
>
> import My.theme 0.2
>
> T.Button {
> // Here i use properties like Theme.backgroundColor, Theme.textColor etc
> }
>
> However, I just hit a roadblock which deals with multiple styles in
> the same application. Our designer has created two sets of theme
> colors - Glass and Dark, Glass it to be used on the "Main window" of
> our application and Dark is used on rest of the dialogs. See
> https://www.sostronk.com/assets/tilt-a780c798bf78e6c5.png
>
> Now, because Theme is a singleton, there is no way for me to define a
> different set of colors for a Dialog. Any suggestions on how to
> achieve this?
>
> Thanks,
>
> On 26 March 2018 at 19:37, Shantanu Tushar <shaan7in at gmail.com> wrote:
>> Hi Thomas,
>>
>> I've tried both your suggestions in a PoC project and it works! My
>> actual app will need some refactoring to get the ball rolling but I
>> think this will work fine.
>>
>> Thanks a lot,
>>
>>
>> On 16 March 2018 at 19:32, Thomas Hartmann <Thomas.Hartmann at qt.io> wrote:
>>> Hi,
>>>
>>>
>>> I would suggest solution number 1 (Creating a Custom Style).
>>>
>>>
>>> To get the designer to show your custom style you have to configure it in
>>> qtquickcontrols2.conf.
>>>
>>> You can do this in the editable combo box in the form editor if
>>> qtquickcontrols2.conf does exist.
>>>
>>> You can refer to the Qt Quick Controls 2 Flat Style example
>>> (https://doc.qt.io/qt-5.10/qtquickcontrols2-flatstyle-example.html).
>>>
>>> You can use QT_QUICK_CONTROLS_STYLE_PATH to specify additional paths that
>>> are used to lookup Qt Quick Controls 2 styles.
>>>
>>> You can also write your own QML plugin (2. Customizing a Control), but
>>> you
>>> have to create a QML file for every control
>>>
>>> and you have to implement a full plugin/import. For these customized
>>> controls to show up in the item library you have to provide a .metainfo
>>> file. You can look at the origin Qt Quick Controls 2 implementation for
>>> reference.
>>>
>>>
>>> I hope this solves your issue.
>>>
>>>
>>> Kind Regards,
>>>
>>> Thomas Hartmann
>>>
>>>
>>>
>>> _______________________________________________
>>> Interest mailing list
>>> Interest at qt-project.org
>>> http://lists.qt-project.org/mailman/listinfo/interest
>>>
>>
>>
>>
>> --
>> Shantanu Tushar (UTC +0530)
>> shantanu.io
>
>
>
> --
> Shantanu Tushar (UTC +0530)
> shantanu.io
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
--
Shantanu Tushar (UTC +0530)
shantanu.io
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20180411/54afca5d/attachment.html>
More information about the Interest
mailing list