importing multiple styles in one file

mzimmers

Hi all -

I just chased down a display problem involving TabBar and TabButton. At the top of my file was:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts

import QtQuick.Controls.Basic
import QtQuick.Controls.Material
import QtQuick.Controls.Fusion
...

(Material was the style selected.)

Removing the "Fusion" line fixed the issue. So, my question is, was I wrong to try to import multiple styles? And if so, how does one use different styles for different platforms? (I'm building for Windows and Android, and eventually for Linux.)

Thanks...

johngod

Hi @mzimmers
In my app I only imported:

import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQml.Models 2.15

Then I added a conf file called qtquickcontrols2.conf , in the same resource of the qml files, the content is the following:

; This file can be edited to change the style of the application
; Read "Qt Quick Controls 2 Configuration File" for details:
; https://doc.qt.io/qt/qtquickcontrols2-configuration.html

[Controls]
Style=Material

[Material]
Theme=Dark

;Theme=Light
;Accent=BlueGrey
;Primary=BlueGray
;Foreground=Brown
;Background=Grey

The syle is defined in this the conf file, but this can be overrided at running with QQuickStyle::setStyle() has you are doing. This works for me.

JoeCFD

@mzimmers said in importing multiple styles in one file:

QtQuick.Controls

it seems a global setting is needed. For example:
QQuickStyle::setStyle("Material");

Check the setting for Qt5 or 6

https://doc.qt.io/qt-6/qtquickcontrols2-styles.html
Default Styles

If no style is explicitly set, a default style will be used. The style that is used depends on the operating system:

Android: Material Style
Linux: Fusion Style
macOS: macOS Style
Windows: Windows Style

https://doc.qt.io/qt-5/qtquickcontrols2-styles.html

mzimmers

@JoeCFD I'm already setting the style in main.cpp, exactly as you show. But that import line changes the appearance. I don't know whether this is a bug in the TabBar implementation, or the style mechanism, or perhaps some obscure build option, but having multiple style imports definitely causes problems for me.

ekkescorner

@mzimmers have you read this?
https://doc.qt.io/qt-6/qtquickcontrols-changes-qt6.html#runtime-and-compile-time-style-selection
BTW: haven't done multi-styles. this is from discussion at Qt Discord community

mzimmers

@ekkescorner that's an interesting link. I'm setting the style at run time, using the QQuickStyle::setStyle() call. But I don't really understand the use of the separate subdirectories for each style. As an example, when I want to set the style accent, I currently have to do this:

    Component.onCompleted: {
        if (styleName === "Material") {
            Material.accent = Colors.primaryPurple
        } else if (styleName === "Fusion") {
            Fusion.accent = Colors.primaryPurple
        } else if (styleName === "Basic") {
            Basic.accent = Colors.primaryPurple
        }
    }

I don't see how the use of the subdirectories would help unless I duplicate my file and change the style-specific code, which I doubt is how they are intended to be used.

ekkescorner

@mzimmers haven't done this by myself yet.
but here's the link from Discord:
https://discord.com/channels/457523061650882570/878107280325894205/1022486178647257158

mzimmers

@ekkescorner if I understand what that guy is doing, there absolutely MUST be a better way of doing this. He's creating separate directories to override anything that is style-specific, and (presumably) duplicating code accordingly. Maybe it works for him, but that's not going to work for me.

Thanks for the link, though. It is an interesting approach.

ekkescorner

@mzimmers for me it also looks not as aneasy way to combine the styles.
Have thought it should be easy to have e Material Style App and use some of the iOS style controls together.
ATM I have decided to stay with Material Style only, which is no problem for my mobile business apps and its most important for my customers having the same UI/UX on all platforms.

johngod

Hi @mzimmers
In my app I only imported:

import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQml.Models 2.15

Then I added a conf file called qtquickcontrols2.conf , in the same resource of the qml files, the content is the following:

; This file can be edited to change the style of the application
; Read "Qt Quick Controls 2 Configuration File" for details:
; https://doc.qt.io/qt/qtquickcontrols2-configuration.html

[Controls]
Style=Material

[Material]
Theme=Dark

;Theme=Light
;Accent=BlueGrey
;Primary=BlueGray
;Foreground=Brown
;Background=Grey

The syle is defined in this the conf file, but this can be overrided at running with QQuickStyle::setStyle() has you are doing. This works for me.