Flickable and list view



  • Hi all,

    i am developing an contacts screen in qml in my project, i have given a list view under flickable property, but whenever i try to flick it, the list elements goes out of that particular reactangle, i tried adjusting the height of list view or rectangle, it is not working, here is the following code can anyone tell me what is the mistake in the code,

    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.1
    import QtGraphicalEffects 1.0
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2
    
    
    import "../Common"
    
    Flickable{
        id:flickable
        implicitHeight: phoneContentArea.height-40
        implicitWidth: phoneContentArea.width
    
        property string contactName;
        property string contactNumber;
        Rectangle {
            id: contactsMainRect
            implicitHeight: parent.height
            implicitWidth: parent.width
    
    
            color:"transparent"
            ColumnLayout {
                anchors.fill: parent
    
                ListView{
                    id: contactListView
                    anchors{
                        fill: parent
                        top: parent.top
                        topMargin: 15
                    }
    
                    Layout.fillWidth: true
                    Layout.preferredHeight: contactsMainRect.height-50
                    delegate: ToolButton {
                        id: contactListDelegate
                        implicitWidth: contactsMainRect.width
                        implicitHeight: contactsMainRect.height/10
                        RowLayout {
                            anchors.fill: parent
                            Rectangle{
                                Layout.preferredHeight: 42
                                Layout.preferredWidth: 42
                                radius: Layout.preferredWidth/2
                                color: "#607d8b"
                                anchors{
                                    left: parent.left
                                    leftMargin: 10
                                }
                                Image {
                                    id: contactImage
                                    source: "qrc:/images/ic_person_white_24dp.png"
                                    anchors.centerIn: parent
                                }
                            }
    
                            Label {
                                id: contactLabel
                                anchors{
                                    verticalCenter: parent.verticalCenter
                                    left: parent.left
                                    leftMargin: 70
                                }
                                text: model.title
                            }
    
                            Rectangle{
                                Layout.preferredHeight: 32
                                Layout.preferredWidth: 32
                                radius: width/2
                                color: "#d6d6d6"
                                anchors{
                                    right: parent.right
                                    rightMargin: 15
                                }
                                Image {
                                    id: callImage
                                    source: "qrc:/images/ic_call_black_18dp.png"
                                    anchors.centerIn: parent
                                }
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: {
                                        contactName= contactLabel.text
                                        activateCalling(contactName)
                                        contactNumber=model.num
                                        console.log("conatct number>>" + contactNumber)
                                        callObj.dialVoiceCall(contactNumber)
                                    }
                                }
                            }
                        } // end RowLayout
                    } // end delegate
                    model:  ListModel {
                        ListElement {title: qsTr("Avinash"); num: "9556482322"}
                        ListElement {title: qsTr("Abhiroop"); num: "9556482322"}
                        ListElement {title: qsTr("Arushi"); num: "9556482322"}
                        ListElement {title: qsTr("Debi"); num: "9556482322"}
                        ListElement {title: qsTr("Deepthi"); num: "9556482322"}
                        ListElement {title: qsTr("John"); num: "9556482322"}
                        ListElement {title: qsTr("Jordan"); num: "9556482322"}
                        ListElement {title: qsTr("Kinchit"); num: "9556482322"}
                        ListElement {title: qsTr("Lavanya"); num: "9556482322"}
                        ListElement {title: qsTr("Siddharth"); num: "9556482322"}
                        ListElement {title: qsTr("Tirunavakkarasu"); num: "9556482322"}
                        ListElement {title: qsTr("Vanita"); num: "9556482322"}
                    } // end ListModel
                } // ListView
            } // end ColumnLayout
        }// end of listrect
    }// end flickable
    
    

    Thanks



  • You need to set clip property to true in Flickable component which is by default equals to false. I also tried to put comments on your code, please check it below.

    @Naveen_D said in Flickable and list view:

    Hi all,

    i am developing an contacts screen in qml in my project, i have given a list view under flickable property, but whenever i try to flick it, the list elements goes out of that particular reactangle, i tried adjusting the height of list view or rectangle, it is not working, here is the following code can anyone tell me what is the mistake in the code,

    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.1
    import QtGraphicalEffects 1.0
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2
    
    
    import "../Common"
    
    Flickable{
        id:flickable
        implicitHeight: phoneContentArea.height-40
        implicitWidth: phoneContentArea.width
    
        property string contactName;
        property string contactNumber;
        Rectangle {
            id: contactsMainRect
            implicitHeight: parent.height 
            implicitWidth: parent.width // setting implicitHeight and implicitWidth to parent's height and width is the same when filling it
    
    
            color:"transparent"
            ColumnLayout {  //why adding ColumnLayout when you only have 1 item to fill
                anchors.fill: parent
    
                ListView{
                    id: contactListView
                    anchors{
                        fill: parent
                        top: parent.top
                        topMargin: 15
                    }
    
                    Layout.fillWidth: true
                    Layout.preferredHeight: contactsMainRect.height-50
                    delegate: ToolButton {
                        id: contactListDelegate
                        implicitWidth: contactsMainRect.width
                        implicitHeight: contactsMainRect.height/10
                        RowLayout {
                            anchors.fill: parent
                            Rectangle{
                                Layout.preferredHeight: 42
                                Layout.preferredWidth: 42
                                radius: Layout.preferredWidth/2
                                color: "#607d8b"
                                anchors{ // avoid using anchors if you're using Layout, make use of Layout properties
                                    left: parent.left
                                    leftMargin: 10
                                }
                                Image {
                                    id: contactImage
                                    source: "qrc:/images/ic_person_white_24dp.png"
                                    anchors.centerIn: parent
                                }
                            }
    
                            Label {
                                id: contactLabel
                                anchors{ // avoid using anchors if you're using Layout, make use of Layout properties
                                    verticalCenter: parent.verticalCenter
                                    left: parent.left
                                    leftMargin: 70
                                }
                                text: model.title
                            }
    
                            Rectangle{
                                Layout.preferredHeight: 32
                                Layout.preferredWidth: 32
                                radius: width/2
                                color: "#d6d6d6"
                                anchors{ // avoid using anchors if you're using Layout, make use of Layout properties
                                    right: parent.right
                                    rightMargin: 15
                                }
                                Image {
                                    id: callImage
                                    source: "qrc:/images/ic_call_black_18dp.png"
                                    anchors.centerIn: parent
                                }
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: {
                                        contactName= contactLabel.text
                                        activateCalling(contactName)
                                        contactNumber=model.num
                                        console.log("conatct number>>" + contactNumber)
                                        callObj.dialVoiceCall(contactNumber)
                                    }
                                }
                            }
                        } // end RowLayout
                    } // end delegate
                    model:  ListModel {
                        ListElement {title: qsTr("Avinash"); num: "9556482322"}
                        ListElement {title: qsTr("Abhiroop"); num: "9556482322"}
                        ListElement {title: qsTr("Arushi"); num: "9556482322"}
                        ListElement {title: qsTr("Debi"); num: "9556482322"}
                        ListElement {title: qsTr("Deepthi"); num: "9556482322"}
                        ListElement {title: qsTr("John"); num: "9556482322"}
                        ListElement {title: qsTr("Jordan"); num: "9556482322"}
                        ListElement {title: qsTr("Kinchit"); num: "9556482322"}
                        ListElement {title: qsTr("Lavanya"); num: "9556482322"}
                        ListElement {title: qsTr("Siddharth"); num: "9556482322"}
                        ListElement {title: qsTr("Tirunavakkarasu"); num: "9556482322"}
                        ListElement {title: qsTr("Vanita"); num: "9556482322"}
                    } // end ListModel
                } // ListView
            } // end ColumnLayout
        }// end of listrect
    }// end flickable
    
    

    Thanks



  • @literA2 thanks i have made the changes and i have changed my code according to your comments.


Log in to reply
 

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