如何在 QML 中对中继器的委托应用 Qt 图形效果

Question

我想将 QtGraphicalEffect ColorOverlay 应用于 Repeater 委托中的 Image。问题是我必须将Image的id设置为ColorOverlay的source，但我不知道id，因为它是由Repeater动态创建的。

import QtQuick 2.4
import QtGraphicalEffects 1.0

Item {
    id:mainItem
    width: 800
    height: 400

    property string vorneColor: "red"

    ListModel {
        id: safeRailModel
        ListElement {name: "vorne"; imageSource:"images/saferail/ring_vorne.png";}
        ListElement {name: "vorneLinks"; imageSource:"images/saferail/ring_vorne_links.png"; }
    }

    Component {
        id: imageDelegate
        Image {
            source: imageSource
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            fillMode: Image.PreserveAspectFit
            opacity: 1
            visible: true
        }
    }

    Repeater {
        id: safeRailRepeater
        model: safeRailModel
        delegate: imageDelegate
    }

    Component {
        id: effectsDelegate
        Item{
            id:effectsItem
            ColorOverlay {
                anchors.fill: safeRailRepeater.itemAt(index)// <-- This doesn't work
                source: safeRailRepeater.itemAt(index)// <-- This doesn't work
                color: vorneColor
            }
        }
    }

    Repeater {
        id: safeRailEffectsRepeater
        model: safeRailModel
        delegate: effectsDelegate
    }
}

如何设置source 和anchors.fill 属性？

我到处搜索，但我只找到了类似于safeRailRepeater.itemAt(index) 或safeRailRepeater.itemAt(index).item 的东西，但前者和后者都不起作用。

旁注：ColorOverlay 不需要位于单独的委托和 Repeater 中。

如果有人能解决这个问题或者可以为我指明正确的方向，那就太好了。

非常感谢！

Answer 1

问题是itemAt() 函数调用返回null，因为另一个Repeater 还没有加载它的项目。此外，函数调用永远不会被重新评估，因为它的参数都不会改变，所以你总是会得到null。

虽然设计有点奇怪；我建议将 ColorOverlay 移动到同一个代表中，正如您提到的，它不必位于单独的 Repeater 中：

import QtQuick 2.0
import QtQuick.Window 2.0
import QtGraphicalEffects 1.0

Window {
    id: mainItem
    width: 800
    height: 400
    visible: true

    property string vorneColor: "red"

    ListModel {
        id: safeRailModel
        ListElement { name: "vorne"; vorneColor: "salmon"; }
        ListElement { name: "vorneLinks"; vorneColor: "steelblue"; }
    }
    Component {
        id: imageDelegateComponent
        Rectangle {
            id: delegate
            color: "grey"
            opacity: 1
            visible: true
            width: 64
            height: 64

            layer.enabled: true
            layer.effect: ColorOverlay {
                color: vorneColor
            }
        }
    }
    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom

        Repeater {
            id: safeRailRepeater
            model: safeRailModel
            delegate: imageDelegateComponent
        }
    }
}

使用Item 的layer API 是一种指定图形效果的便捷方式。

我还将Image 更改为Rectangle，因为我们无权访问这些图像，并将Repeater 放在一行中，以便您可以看到所有代表。