[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: someModeldelegate: 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: truedelegate: 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!!!