如何让不倒翁达到 'base style'

Question

我正在使用 QML 创建一个简单的玻璃杯。当我运行申请时，不倒翁在"Flat Style"。如何将其更改为 "Base Style"（3D 外观）？

您可以在此页面查看“3D Look”： https://doc.qt.io/qt-5/qtquickcontrolsstyles-index.html

靠近顶部，就在样式、基本样式下方

我尝试在 qtquickcontrols2.conf 中设置样式，我在其中添加了：

 [Controls]
 Style=Base

这是我的源代码：

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
    }
}

我得到了一个平面样式的工作玻璃杯。我不知道在哪里告诉 Qt 我想要 'Base Style'（即“3D 外观”）。

注意：我尝试导入各种版本的 QtQuick.Controls 1.x（和 2.x），但它们都导致平面样式或错误。

谢谢。

Answer 1

问题是您正在尝试将 Qt Quick Controls 1 的样式应用于 Qt Quick Controls 2 的项目。因此解决方案是使用适当的项目并避免混合来自不同包的元素，并设置使用 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

我认为在这里指出我找到了一个我最终使用的替代解决方案可能会有用。这与我问的有点不同（如果我更好地解释我想做的事情，我想它会被建议）。因为我认为它可能对将来处于类似情况的其他人有用，所以我认为我应该 post 它。

首先，我按照上面的代码创建了 tumbler，然后学习了如何使用 TumblerStyle 对其进行自定义。在那之后，我发现了一个很好的 post 解释了 QtQuickControls 1 如何演变为 QtQuickControls2 here.

的一些逻辑

那时，我想我可以自定义 QtQuickControl2 Tumbler。最后，我把Tumbler放在了一个Rectangle里面，通过Gradient给Rectangle加上了3D效果。

那么我原来的代码就变成了：

    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) }
            }
        }
    }

我意识到我丢失了边框和阴影？ QtQuickControl 1 Tumbler 自动提供的效果。但是，我的项目中已经有了边框，所以我只是缺少了阴影……这在我下一个版本的待办事项列表中……

最后，我知道文本大小和其他细节需要自定义（因为它们在我的项目中）；这个不倒翁看起来有点尴尬。我认为自定义、样式和调整不属于本文。

如何让不倒翁达到 'base style'

how to get the tumbler to 'base style'

qt

qml

qtquick2

qtquickcontrols

qtquickcontrols2