ListView : Showing only initial few data

[Naveen_D]

Hi all

I am using list view to show some information as a list but when i am setting the model it is showing the first 3 data of that list model.
can anyone please tell me what mistake i have done. Here is the code

import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import QtGraphicalEffects 1.0

import "../common"

Flickable {
    id: flickable
    property bool selectAccentColor: false
    contentHeight: root.implicitHeight
    property string name: "ContactsPage"
    property string title: qsTr("Contacts")

    Pane {
        id: root
        anchors.fill: parent
        ColumnLayout {
            anchors.right: parent.right
            anchors.left: parent.left
            LabelHeadline {
                leftPadding: 10
                text: qsTr("All Contacts")
            }
            HorizontalDivider{}
            RowLayout {
                ListView {
                    id: listView
                    anchors.fill: parent
                    implicitHeight: root.height
                    focus: true
                    delegate: Item {
                        id: itemDelegate
                        width: parent.width
                        implicitHeight: 40
                        Row {
                            spacing: 0
                            leftPadding: 10
                            Rectangle {
                                visible: selectAccentColor
                                anchors.verticalCenter: parent.verticalCenter
                                implicitHeight: 32
                                implicitWidth: 48
                                color: primaryColor
                            }
                            Rectangle {
                                anchors.verticalCenter: parent.verticalCenter
                                implicitHeight: 32
                                implicitWidth: 32
                                color: primaryColor
                            }
                            LabelBody {
                                leftPadding: 10
                                anchors.verticalCenter: parent.verticalCenter
                                text: model.title
                            }
                            LabelBody {
                                leftPadding: 30
                                anchors.verticalCenter: parent.verticalCenter
                                text: model.num
                            }
                        } // end Row
                    }// delegateItem
                    model: ListModel {
                        ListElement { title: qsTr("Anoop"); num: "9556482322" }
                        ListElement { title: qsTr("Arohi"); num: "9556482322" }
                        ListElement { title: qsTr("Akash"); num: "9556482322" }
                        ListElement { title: qsTr("Bipin"); num: "9556482322" }
                        ListElement { title: qsTr("Bhoomi"); num: "9556482322" }
                        ListElement { title: qsTr("Chaitanya"); num: "9556482322" }
                        ListElement { title: qsTr("Chinmayee"); num: "9556482322" }
                        ListElement { title: qsTr("Chaya "); num: "9556482322" }
                        ListElement { title: qsTr("Daksh"); num: "9556482322" }
                        ListElement { title: qsTr("Devashish"); num: "9556482322" }
                        ListElement { title: qsTr("Daksha"); num: "9556482322" }
                        ListElement { title: qsTr("Guru"); num: "9556482322" }
                        ListElement { title: qsTr("Lahari"); num: "9556482322" }
                        ListElement { title: qsTr("Meghana"); num: "9556482322" }
                        ListElement { title: qsTr("Madhav"); num: "9556482322" }
                        ListElement { title: qsTr("Nilima"); num: "9556482322" }
                        ListElement { title: qsTr("Neehar"); num: "9556482322" }
                        ListElement { title: qsTr("Siddharth"); num: "9556482322" }
                        ListElement { title: qsTr("Satish"); num: "9556482322" }
                    }
                }// end of list view
            }// RowLayout
        }// ColumnLayout
    }// Pane
    ScrollIndicator.vertical: ScrollIndicator { }

}// end flickable

[dheerendra]

This should help you to fix. It is the size issue all the way from Flickable to your listView.

However we can do better as well. I have just corrected on what you have done.

Flickable {
id: flickable
width: 300;height: 500

Pane {
    id: root
    anchors.fill: parent
    ColumnLayout {
        anchors.fill: parent
        anchors.right: parent.right
        anchors.left: parent.left
        Label {
            leftPadding: 10
            text: qsTr("All Contacts")
        }
        HorizontalDivider{}
        RowLayout {
            anchors.fill: parent
            ListView {
                id: listView
                anchors.fill: parent
        RowLayout {
            anchors.fill: parent
            ListView {
                id: listView
                anchors.fill: parent

}

[Naveen_D]

@dheerendra Thank you for the reply...but if i use height, i am not able to flick it.

[Naveen_D]

Can anyone please guide me further in this matter
Thanks

[dheerendra]

Listview comes by default with flickable. Y r u placing listview in flickable again ?
Check the following example.

import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import QtGraphicalEffects 1.0

Pane {
id: root
width: 300;height : 600
property color primaryColor : "red"
property bool selectAccentColor: false
ColumnLayout {
anchors.right: parent.right
anchors.left: parent.left
anchors.fill: parent
Rectangle {
id : txt
width: root.width;height: 30;color :"blue"
z : 10
Text {
id : txt1
leftPadding: 10
text: qsTr("All Contacts")
}
}
ListView {
id: listView
anchors.top: txt.bottom
width: root.width;height : root.height-100
implicitHeight: root.height
focus: true
delegate: MyDelegate{}
model: MyModel{}
snapMode: ListView.SnapToItem
z : 1
}// end of list view
}// ColumnLayout
}// Pane

[Naveen_D]

@dheerendra Thanks... I got that :)

[dheerendra]

Cool. Move the issue to "SOLVED" state. It helps others as well.

[Naveen_D]

@dheerendra Ya sure....:-)