Clearing a Qml ListView selection



  • If I have the following:

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2    
    
    ApplicationWindow {
        title: qsTr("Hello World")
        width: 800
        height: 700
        visible: true
    
        property var myArray: [1, 2, 3, 4, 5, 6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
    
        menuBar: MenuBar {
            Menu {
                title: qsTr("&File")
                MenuItem {
                    text: qsTr("&Open")
                    onTriggered: messageDialog.show(qsTr("Open action triggered"));
                }
                MenuItem {
                    text: qsTr("E&xit")
                    onTriggered: Qt.quit();
                }
            }
        }
    
        Rectangle {
            id: myButton
            anchors.top: parent.top
            anchors.topMargin: 5
            color: "yellow"
            width: 100
            height: 25
            radius: 3
            anchors.horizontalCenter: parent.horizontalCenter
            Text {
                text: "Clear Selection"
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
    
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    myListView.currentIndex = -1
                }
            }
        }
    
        ListView {
            id: myListView
            width: 300
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: myButton.bottom
            anchors.topMargin: 5
            anchors.bottom: parent.bottom
            currentIndex: -1
            //highlightFollowsCurrentItem: false
            highlight: Rectangle {
                color: "pink"
                radius: 3
                width: parent.width - 10
                height: 25
                //y: myListView.currentItem.y
                anchors.horizontalCenter: parent.horizontalCenter
            }
            clip: true
            model: myArray
            delegate: Rectangle {
                width: parent.width - 10
                height: 25
                color: "transparent"
                border.color: "cyan"
                anchors.horizontalCenter: parent.horizontalCenter
                Text {
                    text: myArray[index]
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    anchors.fill: parent
                }
    
                MouseArea {
                    anchors.fill: parent
                    onClicked: myListView.currentIndex = index
                }
            }
        }
    
        MessageDialog {
            id: messageDialog
            title: qsTr("May I have your attention, please?")
    
            function show(caption) {
                messageDialog.text = caption;
                messageDialog.open();
            }
        }
    }
    

    When clicking the Clear Selection button I receive the following:
    qrc:/main.qml:67: TypeError: Cannot read property of null
    qrc:/main.qml:64: TypeError: Cannot read property of null

    How can I clear the selection without getting the error?



  • The way you unselect the current item is correct.
    The warning arise because the parent of the highlight component is no longer valid when no item is selected. For the width property (warning line 64) you can simply use "myListView" instead of parent or to check parent first ( width : parent ? parent.width : 0).



  • Thanks, checking the parent value helped, so I ended up using the following:

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2
    
    ApplicationWindow {
        title: qsTr("Hello World")
        width: 800
        height: 700
        visible: true
    
        property int myMargin: 5
    
        menuBar: MenuBar {
            Menu {
                title: qsTr("&File")
                MenuItem {
                    text: qsTr("&Open")
                    onTriggered: messageDialog.show(qsTr("Open action triggered"));
                }
                MenuItem {
                    text: qsTr("E&xit")
                    onTriggered: Qt.quit();
                }
            }
        }
    
        Rectangle {
            id: myButton
            anchors.top: parent.top
            anchors.topMargin: myMargin
            color: "yellow"
            width: 100
            height: 25
            radius: 3
            anchors.horizontalCenter: parent.horizontalCenter
            Text {
                text: "Clear Selection"
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
    
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    myListView.currentIndex = -1
                }
            }
        }
    
        Rectangle {
            width: 300
            anchors.top: myButton.bottom
            anchors.topMargin: myMargin
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
    
            ListView {
                id: myListView
                anchors.fill: parent
                currentIndex: -1
                spacing: 3
                highlightMoveDuration: 25
                highlight: Rectangle {
                    width: parent ? parent.width - 10 : 0
                    height: parent ? 25 : 0
                    color: "pink"
                    radius: 3
                    anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
                }
                clip: true
    
                model: ListModel {
                    id: myArray
                    Component.onCompleted: {
                        for (var i = 1; i < 46; i++)
                            append({number: i})
                    }
                }
    
                delegate: Rectangle {
                    width: parent ? parent.width - 10 : 0
                    height: parent ? 25 : 0
                    color: "transparent"
                    border.color: "cyan"
                    anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
                    Text {
                        text: number
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        anchors.fill: parent
                    }
    
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            myListView.currentIndex = index
                        }
                    }
                }
            }
        }
    
        MessageDialog {
            id: messageDialog
            title: qsTr("May I have your attention, please?")
    
            function show(caption) {
                messageDialog.text = caption;
                messageDialog.open();
            }
        }
    }

Log in to reply
 

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