如何在qml中屏蔽列表视图?

时间:2016-12-07 17:38:37

标签: qt qml

我有一个列表视图,需要被图像屏蔽。 因为我使用了一个高亮组件,其宽度需要根据滚动来减少。 这段代码可以吗?如果有任何不妥之处请告诉我一些方法。

Item{
        id: test
        x: 0
        y: 0
        width: 1920
        height: 720


        ListView {
            id: source_list
            x: 0
            y: 0
            width: 600
            height: 720
            spacing: 40
            model: mediaSongsModel
            delegate: mediaSongsDelegate
            focus: true
            interactive: true
            highlightFollowsCurrentItem: true
            highlightMoveDuration: 0
            highlight: highlightBar
            snapMode: ListView.SnapOneItem
            preferredHighlightBegin:260/scaleFactor
            preferredHighlightEnd: 260/scaleFactor
            highlightRangeMode : ListView.ApplyRange

        }

        layer.enabled: true
        layer.effect: OpacityMask {

            maskSource:Item {
                width: 100
                height: 500

                Image{
                    id :crop
                     x: 0
                     y: 0
                     width: 600
                     height: 720
                     source :"image/bg.png"

                }

            }

        }

    }

1 个答案:

答案 0 :(得分:0)

你已经做过的事情:

import QtQuick 2.7
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 600
    height: 600

    Rectangle {
        id: rect
        width: 400
        height: 400
        anchors.centerIn: parent
        color: "black"
        visible: (img.status == Image.Ready)
        ListView {
            anchors.fill: parent
            model: 30
            delegate: Text { text: "itemmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm" + index; color: "yellow" }
        }
        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: img
        }
    }

    Image {
        id: img
        source: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1024px-Google_%22G%22_Logo.svg.png"
        width: 400
        height: 400
        anchors.centerIn: parent
        visible: false

    }


}

但我认为你不能掩盖鼠标事件。