how to get the tumbler to 'base style'

Question

I am creating a simple tumbler with QML. When I run the application, the tumbler is in the "Flat Style". How to I change it to the "Base Style" (the 3D Look)?

You can see the "3D Look" at this page: https://doc.qt.io/qt-5/qtquickcontrolsstyles-index.html

Near the top, right under Styles, Base Style

I tried setting the Style in qtquickcontrols2.conf, where I added:

 [Controls]
 Style=Base

This is my source code:

import QtQuick 2.13
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Tumbler {
        id: tumbler
        x: 290
        y: 140
        model: 10
    }
}

I get a working Tumbler in a Flat Style. I have no idea where to tell Qt that I want the 'Base Style' (i.e., the '3D Look').

Note: I have tried to import various versions of QtQuick.Controls 1.x (and of 2.x), but they all result in a Flat Style or an error.

Thank you.

Welcome to SO! When you place a question try to add a minimum content: input sample, expected output sample, what did you try, research and where are you stacked. So regarding "I have tried various", could you show us? Edit your post, please. — David García Bodego, Oct 22 '19 at 03:46
Thanks. I realize that was ambiguous...I confess I don't clearly remember everything that I tried, since I'd been beating my head against this for several hours, and didn't have a clear understanding of the problem. Thankfully, the answer below has shed a lot of light on the subject for me. I was able to get his example running; I now need to read up to better understand Qt and how to integrate it into my project. I'll aim for an improved posts. Thanks! — Marcelo, Oct 22 '19 at 05:18
Made a __slight__ change/improvement to the post, per David's comment. — Marcelo, Oct 22 '19 at 06:54

score 3 · Accepted Answer · answered Oct 22 '19 at 03:53

The problem is that you are trying to apply a style of Qt Quick Controls 1 to an item of Qt Quick Controls 2. So the solution is to use the appropriate item and avoid mixing elements from different packages, and set the style using QT_QUICK_CONTROLS_1_STYLE.

main.qml

import QtQuick 2.13
import QtQuick.Window 2.12

import QtQuick.Extras 1.4 as QQE

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    QQE.Tumbler { // https://doc.qt.io/qt-5/qml-qtquick-extras-tumbler.html
        id: tumbler
        x: 290
        y: 140
        QQE.TumblerColumn {
            model: 10
        }
    }
}

main.cpp

#include <QtGui>
#include <QtQml>

int main(int argc, char *argv[]) {
    qputenv("QT_QUICK_CONTROLS_1_STYLE", "Base");
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);
    return app.exec();
}

qml.qrc

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
    </qresource>
</RCC>

Hello Eyllanesc, Thanks so much for explaining that, and for such a quick reply. I couldn't find much on Tumbler or TumblerStyle, no matter how I tried to Google it. This has been a tremendous help... I'll start building on what you explained. Many thanks!! — Marcelo, Oct 22 '19 at 05:18
just went through the tour (tks for the link) and marked it as correct. — Marcelo, Oct 22 '19 at 06:46

score 1 · Answer 2 · answered Oct 23 '19 at 05:27

I thought it may be useful to note here that I found an alternative solution that I ended up using. It was just somewhat different that what I asked (if I better explained what I was trying to do, I think it would have been suggested). Since I think it may be useful for others who are in a similar situation in the future, I figured I should post it.

First, I worked through creating the tumbler per the code above, then learned how to customize it with TumblerStyle. After that, I found a good post explaining some of the logic on how QtQuickControls 1 evolved into QtQuickControls2 here.

At that point, I figured I could just customize the QtQuickControl2 Tumbler. In the end, I put the Tumbler inside a Rectangle, and added the 3D effect to the Rectangle via a Gradient.

Then my original code became:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Controls.Material 2.12

    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")

        Rectangle {

            anchors.centerIn: parent
            height: Math.round(parent.height/2)
            width: Math.round(parent.width/5)

            antialiasing: true;

            Tumbler {
                id: tumbler

                anchors.fill: parent
                model: 10
            }

            gradient: Gradient {
                GradientStop { position: 0.0; color: Material.color(Material.Grey,Material.Shade500) }
                GradientStop { position: 0.5; color: "transparent" }
                GradientStop { position: 1.0; color: Material.color(Material.Grey,Material.Shade500) }
            }
        }
    }

I realize that I lost the border and shadow? effects that were automatically provided by the QtQuickControl 1 Tumbler. However, I already had a border in my project, so I was only missing the shadow...and that's on my to-do list for the next release...

Lastly, I know the text size and other details need to be customized (as they are on my project); this Tumbler looks a bit awkward. I figured that the customizing, styling & adjustments don't belong in this article.

how to get the tumbler to 'base style'

2 Answers2