qt - 如何在 QML 中对中继器的委托(delegate)应用 Qt 图形效果

Question

我想应用 QtGraphicalEffect ColorOverlay到 Image在 Repeater代表。问题是我必须设置 id的Image作为 source的ColorOverlay ，但我不知道 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
        }
    }
}

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

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