Flickable and list view
Solved
QML and Qt Quick
-
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 flickableThanks
-
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 flickableThanks
