Flickable and list view

[Naveen_D]

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

[literA2]

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

[Naveen_D]

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