如何在 QML 的 Repeater Delegate 上应用 Qt Graphical Effect

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() 函数调用 returns null 因为另一个 Repeater 还没有加载它的项目。此外，函数调用永远不会被重新计算，因为它的参数 none 会改变，所以你总是会得到 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放在一行里，这样你就可以看到了所有代表。

如何在 QML 的 Repeater Delegate 上应用 Qt Graphical Effect

How to apply Qt Graphical Effect on Delegate of Repeater in QML

qt

qml

qtquick2