QML_OpacityMask

OpacityMask

Item {
    width: 360
    height: 600


    Rectangle {
        width: 360
        height: 600

        ListView {

            width: 350
            height: 200
            anchors.centerIn: parent
            id: myList
            model: myModel
            highlight: highlightBar
            clip: true

            snapMode: ListView.SnapToItem

            headerPositioning: ListView.OverlayHeader


            header: Rectangle {
                  id: headerItem
                  width: myList.width
                  height:50

                  color: "#fafafa"


                }



            OpacityMask {
                source: mask
                maskSource: myList
            }


            OpacityMask {
                source: mask2
                maskSource: headerItem
            }

            LinearGradient {
                id: mask2
                anchors.fill: parent
                start: Qt.point(0, 0)
                end: Qt.point(0, 300)
                gradient: Gradient {
                    GradientStop { position: 0.2; color: "transparent"}
                    GradientStop { position: 0.7; color: "white" }
                }
            }

            LinearGradient {
                id: mask
                anchors.fill: parent
                start: Qt.point(0, 0)
                end: Qt.point(0, 300)
                gradient: Gradient {
                    GradientStop { position: 0.2; color: "transparent"}
                    GradientStop { position: 0.7; color: "white" }
                }
            }






            delegate: Item {
                id: delegateItem
                width: 400
                height: 20
                Text {
                    text: name
                }

                MouseArea {
                    id: mArea
                    anchors.fill: parent
                    onClicked: {
                        myList.currentIndex = index
                    }
                }
            }
        }

        Component {
            id: highlightBar
            Rectangle {
                width: parent.width
                height: 20
                color: "#FFFF88"
            }
        }

        ListModel {
            id: myModel
        }

         Component.onCompleted: {
            for (var i = 0; i < 100; i++) {
                myModel.append({
                    name: " Item  : " + i
                })
            }
        }
    }



}