在 QML (Qt6) 中对图像进行颜色叠加

Question

在 Qt5 的 QML 中，我可以使用 ColorOverlay 将颜色应用于图像。

但是在Qt6中，它不再存在了。

在 Qt6 的 QML 中为图像着色的最佳方法是什么？

Answer 1

根据对您问题的评论以及我的修改，我设法找到了两种在 Qt 6 QML 中为图像/图标着色的方法：

1. Stephen Quan 的解决方案 - 简单，但锁定居中布局

通过Button类的

icon

属性实现，例如：

Button {
    // ... 

    icon.source:  "<IMAGE_SOURCE>"
    icon.color: "<IMAGE_COLOUR>"

    icon.width: <IMAGE_WIDTH>
    icon.height: <IMAGE_HEIGHT>

    // ...
}

不幸的是，图像垂直和水平居中并且无法更改。

2.

IconImage

类 - 完全布局可定制

该类提供开箱即用的

color

属性，使您可以轻松更改图像颜色，同时还使您能够根据需要放置它，因为它是一个单独的类。

以下示例演示了如何使用它来创建更复杂的按钮，例如文本和图像，感谢

contentItem

属性：

Button {
    // ...

    contentItem: Item {
        id: content

        IconImage {
            id: <IMAGE_ID>
            source: "<IMAGE_SOURCE>"
            width: <IMAGE_WIDTH>
            height: <IMAGE_HEIGHT>
            color: "<IMAGE_COLOUR>"
        }

        // ...
        // other elements classes like Text, etc. 
        // ...
    }

    // ...
}

总结

像往常一样，问题没有“最佳”解决方案。由您决定您非常需要哪一个。第一个是最简单的设置，而第二个是最可定制的。