how to get the tumbler to 'base style' - qt

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.

Answer 1

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>

Answer 2

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.