Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Flickable within a vertical Listview



  • Hello,

    I have a small issue with my Listview.
    I can not interact with a flickable inside a Listview.

    The shownModel consists of a few Pages. The first one is shown below.

    When i have to much Buttons in the GridView i can not display it all on one Page and i can not display them smaller so i want to make the GridView/Buttons flickable.

    But i can only interact with the ListView.

    Thank you for your inputs on taht...

    ListView {
            id: listView
            anchors.fill: parent
            contentHeight: 3 * parent.height
            model: shownModel
            highlightFollowsCurrentItem: true
            snapMode: ListView.SnapOneItem
    
            Component.onCompleted: {
                listView.positionViewAtIndex(1, ListView.Center)
                componentLoaded = true
            }
    
            onAtYBeginningChanged: {
                if(atYBeginning && componentLoaded && !jumping){
                    realPage--
                    loadPrevPage()
                }
            }
    
            onAtYEndChanged: {
                if(atYEnd && componentLoaded && !jumping){
                    realPage++
                    loadNextPage()
                }
            }
    
            PropertyAnimation{
                id: swipeUp
                target: listView
                property: "contentY"
                from: listView.contentY
                to: listView.contentY - 272
                duration: 250
            }
    
            PropertyAnimation{
                id: swipeDown
                target: listView
                property: "contentY"
                from: listView.content
                to: listView.contentY + 272
                duration: 250
            }
    
            SequentialAnimation{
                id:fadeTransition
                PropertyAnimation{ target: listView; property: "opacity"; from: 1; to: 0.8; duration: 50}
                PropertyAnimation{ target: listView; property: "opacity"; from: 0.8; to: 1; duration: 200}
            }
        }
    

    The first Page in the Listview...

    import QtQuick 2.12
        import QtQuick.Controls 2.5
        import QtQuick.Layouts 1.3
        
        import "qrc:/common/qml"
        
        import SecurityLevel 1.0
        
        Item {
            id: root
        
            width: screenWidth
            height: screenHeight
        
            signal pageSelected(int pageNr)
        
            property var parentView
            property var buttonModel: []
        
            function deactivate() {
            }
        
            Image {
                anchors.fill: parent
                source: "qrc:/common/images/background"
            }
        
            Rectangle {
                width: parent.width
                height: parent.height - 40
                visible: securityManager.serviceAuthorized
        
                color: 'transparent'
                border.color: 'yellow'
                border.width: 2
            }
        
            Headline{
                id: headline
                headlineText: qsTr('Uebersicht Handbetrieb')
                fontsize: 24
                center: true
            }
        
            Flickable {
                id: flickable
                width: parent.width
                height: parent.height - 80
                anchors.top: headline.bottom
                anchors.topMargin: 10
                boundsBehavior: Flickable.StopAtBounds
                contentWidth: width
                contentHeight: height
                clip: true
                flickableDirection: Flickable.HorizontalFlick
                GridLayout {
                    anchors.centerIn: parent
        //            width: parent.width
        //            height: parent.height
                    columns: (buttonModel.length > 12) ? 5 : 4
                    rowSpacing: 10
                    columnSpacing: 10
        
                    Repeater {
                        id: mainRepeater
                        model: buttonModel
        
                        delegate: Button{
                            Layout.preferredWidth: 103
                            Layout.preferredHeight: (buttonModel.length > 8) ? 50 : 80
                            background: Rectangle{
                                border.width: 1
                                border.color: 'lightgrey'
                                color: parent.down ? 'lightgrey' : '#e6e6e6'
                                radius : 2
                            }
                            Label{
                                anchors.fill: parent
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                                font.pixelSize: 18
                                text: modelData
                                wrapMode: Text.Wrap
                            }
                            onClicked: root.pageSelected(index + 1)
                        }
                    }
                }
            }
        }
    

Log in to reply