QQuickImageProvider Class

Ausführliche Beschreibung

QQuickImageProvider wird verwendet, um erweiterte Funktionen zum Laden von Bildern in QML-Anwendungen bereitzustellen. Es ermöglicht, dass Bilder in QML:

• mit QPixmaps anstelle von tatsächlichen Bilddateien geladen werden
• asynchron in einem separaten Thread geladen

Um festzulegen, dass ein Bild von einem Bildanbieter geladen werden soll, verwenden Sie das Schema „image:“ für die URL-Quelle des Bildes, gefolgt von den Bezeichnern des Bildanbieters und des angeforderten Bildes. Beispiel:

Image { source: "image://myimageprovider/image.png" }

Dies legt fest, dass das Bild vom Bildanbieter mit dem Namen „myimageprovider“ geladen werden soll und das zu ladende Bild den Namen „image.png“ trägt. Die QML-Engine ruft den entsprechenden Bildanbieter auf, je nachdem, welche Anbieter über ` QQmlEngine::addImageProvider()` registriert wurden.

Beachten Sie, dass bei den Bezeichnern die Groß-/Kleinschreibung keine Rolle spielt, der Rest der URL jedoch unter Beibehaltung der Groß-/Kleinschreibung weitergegeben wird. Beispielsweise würde der folgende Codeausschnitt zwar ebenfalls festlegen, dass das Bild vom Bildanbieter „myimageprovider“ geladen wird, jedoch ein anderes Bild anfordern als der obige Codeausschnitt („Image.png“ statt „image.png“).

Image { source: "image://MyImageProvider/Image.png" }

Wenn Sie möchten, dass der Rest der URL groß-/kleinschreibungsunabhängig ist, müssen Sie dies in Ihrem Bildanbieter selbst sicherstellen.

Ein Beispiel

Hier sind zwei Bilder. Ihre „ source “-Werte geben an, dass sie von einem Bildanbieter namens „colors“ geladen werden sollen, und die zu ladenden Bilder sind „yellow“ bzw. „red“:

Column {
    Image { source: "image://colors/yellow" }
    Image { source: "image://colors/red" }
}

Wenn diese Bilder von QML geladen werden, sucht es nach einem passenden Bildanbieter und ruft dessen Methode ` requestImage()` oder ` requestPixmap()` auf (abhängig von dessen ` imageType()`), um das Bild zu laden. Die Methode wird mit dem Parameter ` id ` aufgerufen, der für das erste Bild auf „yellow“ und für das zweite auf „red“ gesetzt ist.

Hier ist eine Implementierung eines Bildanbieters, der die vom obigen QML angeforderten Bilder laden kann. Diese Implementierung generiert dynamisch QPixmap Bilder, die mit der angeforderten Farbe gefüllt sind:

class ColorImageProvider : public QQuickImageProvider
{
public:
    ColorImageProvider()
               : QQuickImageProvider(QQuickImageProvider::Pixmap)
    {
    }

    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize) override
    {
       int width = 100;
       int height = 50;

       if (size)
          *size = QSize(width, height);
       QPixmap pixmap(requestedSize.width() > 0 ? requestedSize.width() : width,
                      requestedSize.height() > 0 ? requestedSize.height() : height);
       pixmap.fill(QColor(id).rgba());
       return pixmap;
    }
};

Um diesen Anbieter für QML zugänglich zu machen, wird er bei der QML-Engine unter dem Bezeichner „colors“ registriert:

int main(int argc, char *argv[])
{

    QQuickView view;
    QQmlEngine *engine = view.engine();
    engine->addImageProvider(QLatin1String("colors"), new ColorImageProvider);
    view.setSource(QUrl::fromLocalFile(QStringLiteral("imageprovider-example.qml")));
    view.show();
    return app.exec();
}

Nun können die Bilder erfolgreich in QML geladen werden:

Die vollständige Implementierung finden Sie im Beispiel zum Bild-Provider. Beachten Sie, dass der Provider in diesem Beispiel über „ plugin “ registriert wird, anstatt ihn wie oben gezeigt in der Funktion „ main() “ der Anwendung zu registrieren.

Es ist möglich, „ "@nx" high DPI syntax “ bereitzustellen.

Asynchrones Laden von Bildern

Bildanbieter, die „ QImage “ oder das Laden von Texturen unterstützen, bieten automatisch auch Unterstützung für das asynchrone Laden von Bildern. Um das asynchrone Laden für eine Bildquelle zu aktivieren, setzen Sie die Eigenschaft „ asynchronous “ für das entsprechende „ Image “- oder „ BorderImage “-Objekt auf „ true “. Wenn diese Option aktiviert ist, wird die Bildanforderung an den Anbieter in einem Thread mit niedriger Priorität ausgeführt, sodass das Laden der Bilder im Hintergrund erfolgen kann und die Auswirkungen auf die Leistung der Benutzeroberfläche reduziert werden.

Um das asynchrone Laden von Bildern zu erzwingen – auch bei Bildquellen, bei denen die Eigenschaft „ asynchronous “ nicht auf „ true “ gesetzt ist –, können Sie dem Konstruktor des Bildanbieters das Flag „ QQmlImageProviderBase::ForceAsynchronousImageLoading “ übergeben. Dadurch wird sichergestellt, dass alle Bildanfragen für den Anbieter in einem separaten Thread verarbeitet werden.

Das asynchrone Laden für Bildanbieter, die „ QPixmap “ bereitstellen, wird nur auf Plattformen unterstützt, die über die Funktion „ThreadedPixmaps“ verfügen. Auf Plattformen, auf denen Pixmaps nur im Hauptthread erstellt werden können (d. h. „ThreadedPixmaps“ wird nicht unterstützt), wird der Wert ignoriert und das Bild synchron geladen, wenn „ asynchronous “ auf „ true “ gesetzt ist.

Das asynchrone Laden von Bildern für Anbieter anderer Typen als „ImageResponse“ erfolgt pro Engine auf einem einzigen Thread. Das bedeutet, dass ein langsamer Bildanbieter das Laden aller anderen Anfragen blockiert. Um dies zu vermeiden, empfehlen wir die Verwendung von „ QQuickAsyncImageProvider “ und die Implementierung von Threading auf der Anbieterseite über „ QThreadPool “ oder Ähnliches. Eine vollständige Implementierung finden Sie im Beispiel für den Bildantwort-Anbieter.

Bild-Caching

Von einem `QQuickImageProvider` zurückgegebene Bilder werden automatisch zwischengespeichert, ähnlich wie jedes von der QML-Engine geladene Bild. Wenn ein Bild mit dem Präfix „image://“ aus dem Cache geladen wird, werden ` requestImage()` und ` requestPixmap()` für den entsprechenden Bildanbieter nicht aufgerufen. Soll ein Bild immer vom Bildanbieter abgerufen und überhaupt nicht zwischengespeichert werden, setzen Sie die Eigenschaft „ cache “ für das entsprechende „ Image “- oder „ BorderImage “-Objekt auf „ false “.