qt कस्टम स्टाइलिंग क्यूटी त्वरित नियंत्रण




design qml (2)

मैं अपने क्यूटी कंट्रोल के लिए कस्टम डिज़ाइन करना चाहता हूं। उदाहरण के लिए, मैं एक टूल बार के पृष्ठभूमि का रंग बदलना चाहता हूं, क्योंकि मुझे डिफॉल्ट डिज़ाइन से नफरत है। मैं उसे कैसे कर सकता हूँ?


मुझे लगता है कि निम्नलिखित पंक्तियां पूरी तरह बेकार हैं:

QObject *topLevel = engine.rootObjects().value(0);
QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
window->show();

आपको बस कुछ करना चाहिए:

QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();

Qt त्वरित नियंत्रण में, क्यूटी कंट्रोल शैलियाँ आइटम, जैसे ButtonStyle , CheckBoxStyle स्टाइल आदि के द्वारा सीमित स्टाइल उपलब्ध है

फिलहाल, अन्य शैलियों को क्यूटी स्रोतों में delving और आंतरिक विवरण के साथ गड़बड़ की आवश्यकता होती है।

यहां एक पूर्ण उदाहरण है कि टूलबार की शैली को कैसे संशोधित किया जा सकता है।

main.qml

import QtQuick 2.1
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.0

ApplicationWindow {
    toolBar: ToolBar {
        id: toolbar
        Component.onCompleted: toolbar.data[0].item.children = [newRectangle];
        property Item _newRectangle: Rectangle {
            // The rectangle within the ToolBarStyle's panel
            // Gleaned from:
            // http://qt.gitorious.org/qt/qtquickcontrols/source/
            //   c304d741a27b5822a35d1fb83f8f5e65719907ce:src/styles/Base/ToolBarStyle.qml
            id: newRectangle
            anchors.fill: parent
            gradient: Gradient{
                GradientStop{color: "#a00" ; position: 0}
                GradientStop{color: "#aaa" ; position: 1}
            }
            Rectangle {
                anchors.bottom: parent.bottom
                width: parent.width
                height: 1
                color: "#999"
            }
        }
        RowLayout {
            ToolButton { iconSource: "image://images/img1" }
            ToolButton { iconSource: "image://images/img2" }
        }
    }
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickWindow>
#include <QImage>
#include <QPainter>
#include <QQuickImageProvider>
#include <QDebug>

class ImageProvider : public QQuickImageProvider
{
public:
    ImageProvider() : QQuickImageProvider(QQuickImageProvider::Image) {}
    QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize) {
        QImage img(32, 32, QImage::Format_ARGB32_Premultiplied);
        img.fill(0); // transparent
        QPainter p(&img);
        p.setRenderHint(QPainter::Antialiasing);
        p.translate(16, 16);
        p.scale(14, 14);
        p.setPen(QPen(Qt::black, 0.1));
        if (id == "img1") {
            p.drawEllipse(QPointF(0, 0), 1, 1);
        }
        else if (id == "img2") {
            p.drawLine(-1, -1, 1, 1);
            p.drawLine(-1, 1, 1, -1);
        }
        *size = img.size();
        return img;
    }
};

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.addImageProvider("images", new ImageProvider);
    engine.load(QUrl("qrc:///main.qml"));
    QObject *topLevel = engine.rootObjects().value(0);
    QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
    window->show();
    return app.exec();
}

main.qrc

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




qml