[SOLVED] ListView inside ListView (Scrolling issue)



  • 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? :)



  • Hi,

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



  • 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
            }
        }
    }
    

    }
    @



  • @
    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
    

    }
    @



  • 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?



  • 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
    @



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.