Custom Styling Qt Quick Controls

Question

Chciałbym mieć niestandardowy projekt dla moich Qt Quick Controls. Na przykład chciałbym zmienić kolor tła paska narzędzi, ponieważ nienawidzę domyślnego projektu. Jak mogę to zrobić?

Answer 1

W QT Szybki Controls, istnieje limited styling available poprzez szybkie sterowanie Qt Style przedmiotów, jak ButtonStyle, CheckBoxStyle itp

W chwili obecnej inne style wymagają zagłębiając Qt sources i brudząc z informacji wewnętrznych.

Oto pełny przykład tego, jak można zmodyfikować styl paska narzędzi.

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> 

Answer 2

myślę następujące linie są całkowicie bezużyteczne:

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

Trzeba tylko zrobić coś takiego:

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