将派生自 QAbstractListModel 的类提供的 QIcon 绑定到 QML Image

Bind a QIcon provided by a class derived from QAbstractListModel to QML Image

本文关键字：绑定 QIcon Image QML 派生 QAbstractListModel      更新时间：2023-10-16

>我尝试将派生自QAbstractListModel的类提供的QIcon绑定到QML图像，如下所示：

Component {
    id: myDelegate
    //...
            Column {
                anchors.verticalCenter: parent.verticalCenter
                spacing: 5
                Image {
                    source: model.DecorationRole
                }
                Text {
                    text: model.DisplayRole
    //...
}

但这会导致此错误：

无法将 QIcon 分配给 QUrl

如何正确执行此操作？

不能将QIcon指定为 QML Image的源。

您需要做的是为图标选择自定义 URL 格式，例如

images://myicons/<icon_id>

此字符串是您设置为Image.source 的 URL 的字符串。

现在，您创建并注册了一个图像提供程序，当您从 QML 发送请求的 URL 时，该提供程序会传递图标：

  • 创建一个QQuickImageProvider的子类，例如 MyIconProvider
  • 覆盖将id作为和参数并返回像素数据的函数requestPixmap

然后，在main.cpp中注册图像提供程序 

MyIconProvider *mip = new MyIconProvider();
engine.addImageProvider("myicons", mip);

我想出了这个解决方案。它有效，但非常欢迎任何建议或改进。

ImageProvider.h 

class ImageProvider : public QQuickImageProvider
{
    public:
        explicit ImageProvider(myModel *myModel);
        QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize);
    signals:
    public slots:
    private:
        myModel *m_myModel;
};

图像提供程序.cpp

ImageProvider::ImageProvider(myModel *myModel) :
    QQuickImageProvider(QQuickImageProvider::Pixmap),
    m_myModel(myModel)
{
}
QPixmap ImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
{
    QModelIndex index;
    bool foundId = false;
    for(int row = 0; row < m_myModel->rowCount(); row++)
    {
        index = m_myModel->index(row, 0);
        QString name = QVariant(m_myModel->data(index, Qt::DisplayRole)).toString();
        if(name == id)
        {
            foundId = true;
            break;
        }
    }
    if(!foundId)
        return QPixmap();
    QIcon icon = m_myModel->data(index, Qt::DecorationRole).value<QIcon>();
    QPixmap pixmap = icon.pixmap(128,128);
    return pixmap;
}

注册图像提供商...

ImageProvider *imageProvider = new ImageProvider(myModel);
view->engine()->addImageProvider(QLatin1String("provider"), imageProvider);

主.qml

Component {
    id: myDelegate
    //...
            Column {
                anchors.verticalCenter: parent.verticalCenter
                spacing: 5
                Image {
                    source: "image://provider/" + model.DisplayRole
                }
                Text {
                    text: model.DisplayRole
    //...
}
相关文章：