QML List with inline editable items

Delete instructional text in italic

This article explains how to ... Replace the abstract text with a short paragraph (or sentence) describing what the topic covers.

Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use

Article Metadata

---

Article

Created: (10 Feb 2012)

Last edited: kkrish (24 Jan 2012)

Introduction

This is a simple QML list example. User can edit list item by long tap on the list item, after long press list will be in editable mode and user can enter anything and press ok button to modify the list.

Here you can see the code in action.

Source code

import QtQuick 1.1
 
Rectangle {
    id: root
    property int indextoEdit: -1
    height: 640
    width: 360
    ListModel {
        id: listModel
        ListElement {
            contactName: "Rozer"
            editable: 1
        }
        ListElement {
            contactName: "Smith"
            editable: 1
        }
        ListElement {
            contactName: "David"
            editable: 1
        }
        ListElement {
            contactName: "John"
            editable: 1
        }
        ListElement {
            contactName: "Smith"
            editable: 1
        }
        ListElement {
            contactName: "Aany"
            editable: 1
        }
        ListElement {
            contactName: "Harry"
            editable: 1
        }
        ListElement {
            contactName: "Bob"
            editable: 1
        }
        ListElement {
            contactName: "Rozer"
            editable: 1
        }
        ListElement {
            contactName: "Abrahim"
            editable: 1
        }
        ListElement {
            contactName: "Jorden"
            editable: 1
        }
        ListElement {
            contactName: "Nick"
            editable: 1
        }
        ListElement {
            contactName: "Peter"
            editable: 1
        }
    }
 
    //ListView delegate
    Component {
        id: contactDelegate
        Rectangle {
            id: contactDelegateRectangle
            height: 80
            width: parent.width
            border.width: 2
 
            Item {
                id: contactDelegateTextRect
                height: parent.height
                width: parent.width
                opacity: editable == 1 ? 1 : 0
                Text {
                    id: contactDelegateText
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    text: index + ". " + contactName
                    color: "red"
                }
            }
 
            Item{
                id: contactDelegateEditRect
                height: parent.height
                width: parent.width
                anchors.left: parent.left
                opacity: editable == 0 ? 1 : 0
                z: 1
                TextInput{
                    id: contactDelegateEdit
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    text: contactName
                    width:parent.width - 80
                    z: 1
                }
                Rectangle{
                    id: contactDelegatebtn
                    height: parent.height
                    width: 80
                    anchors.right: parent.right
                    color: "black"
                    border.width: 5
                    Text {
                        id: btnText
                        text: "Ok"
                        color: "white"
                        anchors.fill: parent
                        anchors.centerIn: parent.Center
 
                    }
                    MouseArea {
                        id: innermousearea
                        anchors.fill: parent
                        enabled: true
                        onClicked: {
                            innermousearea.enabled = false
                            mousearea.enabled = true
                            console.log("innermousearea : " + root.indextoEdit)
                            listModel.set(root.indextoEdit, {"editable" : 1, "contactName" : contactDelegateEdit.text})
                            root.indextoEdit = -1
                        }
                    }
                }
            }
            MouseArea {
                id: mousearea
                anchors.fill: parent
                enabled: true
                onClicked: {
                    console.log("index : " + index + " root.indextoEdit : "+ root.indextoEdit)
                }
 
                onPressAndHold: {
                    if(root.indextoEdit == -1){
                        root.indextoEdit = index
                        listModel.set(index, {"editable" : 0})
                        innermousearea.enabled = true
                        mousearea.enabled =false
                    }
                }
            }
 
            states: [
                State {
                    name: "selected"
                    when: mousearea.pressed
                    PropertyChanges {target: contactDelegateRectangle; color: "lightblue"}
                }
            ]
        }
    }
 
//ListView
    ListView {
        id: contactList
        anchors.fill: parent
        model: listModel
        delegate: contactDelegate
    }
}

Summary

Add categories below. Remove Category:Draft when the page is complete or near complete