[SOLVED] ListView inside ListView (Scrolling issue)

maxim.prishchepa

Hello, i make a little cheat with grouping elements and put one ListView inside other ListView, everithing displaying ok, but have a little issue, when user try to scroll elements pressing to the top list view element - everithing is ok, when user press to the internal ListView and try to scroll up (from the bottom of the device to the top) apliccation don't responce to this gesture. But if try to scroll down (from top to bottom) - everithing is ok, and one more, if start scrolling down, and then scroll up - everithing is ok too..

How know, what is the magic is here? :)

shav

Hi,

Could you share some code? Without code hard to say what's wrong there.

maxim.prishchepa

Yep:
@ // ListViewChild.qml
ListView {
id: canvas
clip: true
model: someModel

delegate: Component {
    Rectangle {
        id: rootListItem
        anchors.left: parent.left
        width: canvas.width
        height: image.height + label.paintedHeight
        MouseArea {
            anchors.fill: parent
            onClicked: {
               ...
            }
        }
        Image {
            id: image
            anchors.leftMargin: 5
            anchors.left: parent.left
            width: 25
            height: 25
            fillMode: Image.PreserveAspectCrop
            source: fieldFromModel1
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: grayLine.height *0.5
        }
        Rectangle {
            color: parent.color
            anchors.left: image.right
            anchors.leftMargin: label.paintedHeight *0.8
            anchors.right: parent.right
            height: label.paintedHeight + labelSecond.paintedHeight + labelSecond.anchors.topMargin
            anchors.verticalCenter: parent.verticalCenter
            Text {
                id: label
                anchors.left: parent.left
                font.bold: true
                elide: Text.ElideRight
                text: fieldFromModel2
            }
            Text {
                id: labelSecond
                anchors.left: parent.left
                anchors.right: labelThird.left
                anchors.top: label.bottom
                anchors.topMargin: label.paintedHeight *0.5
                anchors.rightMargin:label.font.pixelSize * 3
                color: "gray"
                clip: true
                elide: Text.ElideRight
                textFormat: Text.RichText
                horizontalAlignment: Text.AlignLeft
                text: fieldFromModel3
            }
            Text {
                id: labelThird
                anchors.right: parent.right
                anchors.rightMargin: label.paintedHeight *0.5
                anchors.bottom: parent.bottom
                text: fieldFromModel4
                color: "gray"
            }
        }
        Rectangle {
            id: grayLine
            height: label.paintedHeight *0.12
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.leftMargin: label.paintedHeight *0.5
            anchors.rightMargin: label.paintedHeight *0.5
            color: "#eeefef"
            visible: model.index === 0 ? false: true
        }
    }
}

}
@

maxim.prishchepa

@
ListView {
id: rootListView
clip: true

delegate:   Component {
                Rectangle {
                    id: rootDelegate
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: visibleArea.height + chList.height
                    Column {
                        anchors.fill: parent
                        Rectangle {
                            height: 1
                            anchors {
                                left: parent.left
                                right: parent.right
                            }
                            color: "#0a4c86"
                        }

                        Rectangle {
                            anchors.left: parent.left
                            anchors.right: parent.right

                            id: visibleArea

                            height: headerText.paintedHeight * 3

                            color: "#9b9c9c"

                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    collapsedRole = !collapsedRole
                                }
                            }

                            Image {
                                id: arrowImage

                                anchors {
                                    verticalCenter: parent.verticalCenter
                                    left: parent.left
                                    leftMargin: headerText.paintedHeight / 2
                                }

                                source: "action_expand_arrow.png"
                                height: width
                                width: headerText.paintedHeight

                            }

                            Text {
                                id: headerText
                                anchors {
                                    left: arrowImage.right
                                    leftMargin: headerText.paintedHeight / 2
                                    right: groupIcon.left
                                    verticalCenter: parent.verticalCenter
                                }
                                elide: Text.ElideRight
                                font.bold: true
                                color: "white"
                                text: displayRole
                            }
                            Image {
                                anchors {
                                    verticalCenter: parent.verticalCenter
                                    right: parent.right
                                    rightMargin: headerText.paintedHeight / 2
                                }

                                id: groupIcon
                                source: groupImageRole
                                height: width
                                width: headerText.paintedHeight * 2
                            }
                        }

                        ListViewChild {
                            boundsBehavior: Flickable.StopAtBounds
                            height: delegateHeight * chList.count + spacing * chList.count
                            id: chList
                            anchors.left: parent.left
                            anchors.right: parent.right
                            model: rootDelegate.ListView.view.model.getChildModel(index)
                        }
                    }

                    state: collapsedRole ? "collapsed" : "null"

                    states: [
                        State {
                            name: "collapsed"
                            PropertyChanges {
                                target: chList
                                height: 0
                                opacity: 0
                            }
                            PropertyChanges {
                                target: arrowImage
                                rotation: -90
                            }
                        }
                    ]
                    transitions: [
                        Transition {
                            NumberAnimation { target: chList; property: "height"; duration: 200 }
                            NumberAnimation { target: chList; property: "opacity"; duration: 200 }
                            NumberAnimation { target: arrowImage; property: "rotation"; duration: 200 }
                        }
                    ]
                }
            }

model: groupedModel

}
@

maxim.prishchepa

how i understand, for resolveing my issue, i need disable flicking area at the ListView (child list view). some one know, how to do that?

shav

Hi,

Did you try 'interactive' property? By default this property is true. If you need to turn off interaction with ListView you can set this property to false.
@
interactive: false
@

maxim.prishchepa

shav WOW!!!! SUPPER!!!! tnx a lot! this is solve my issue!!!