как заставить тумблер "базовый стиль" - PullRequest
Новая
       112

как заставить тумблер "базовый стиль"

3 голосов
/ 22 октября 2019

Я создаю простой тумблер с QML. Когда я запускаю приложение, тумблер находится в «Flat Style». Как мне поменять его на «Базовый стиль» (3D Look)?

Вы можете увидеть «3D-вид» на этой странице: 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
    }
}

Я получаю рабочий тумблер в стиле Flat. Я понятия не имею, где сказать Qt, что мне нужен «Базовый стиль» (т.е. «3D-взгляд»).

Примечание: я пытался импортировать различные версии QtQuick.Controls 1.x (ииз 2.x), но все они приводят к плоскому стилю или ошибке.

Спасибо.

Ответы [ 2 ]

3 голосов
/ 22 октября 2019

Проблема в том, что вы пытаетесь применить стиль 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>

enter image description here

0 голосов
/ 23 октября 2019

Я подумал, что здесь было бы полезно отметить, что я нашел альтернативное решение, которое я в итоге использовал. Это было несколько другое, чем то, что я спросил (если бы я лучше объяснил, что я пытался сделать, я думаю, что это было бы предложено). Поскольку я думаю, что это может быть полезно для других, которые в будущем столкнутся с подобной ситуацией, я решил опубликовать это.

Сначала я работал над созданием тумблера в соответствии с приведенным выше кодом, затем научился настраивать его. это с TumblerStyle. После этого я нашел хороший пост, объясняющий некоторую логику того, как QtQuickControls 1 превратился в QtQuickControls2 здесь .

В тот момент я решил, что могу просто настроить QtQuickControl2 Tumbler. В конце я помещаю тумблер в прямоугольник и добавляю 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. Однако в моем проекте уже была граница, поэтому мне не хватало только тени ... и это в моем списке дел для следующего выпуска ...

Наконец, я знаю размер текста идругие детали должны быть настроены (как они есть в моем проекте);этот Неваляшка выглядит немного неловко. Я полагал, что настройка, стилизация и корректировки не относятся к этой статье.

enter image description here

...