QML How to dynamically access ListView items

Question

I have a ListView which has dynamically added Items, and what I kinda want to know is how I could access items for example by index. Specifically, I want to have the color of the item rectangle change when I change the color using the Color Dialog. I guessed it should be maybe possible to first set a variable to the current item before calling the color dialog and then in the onAccepted method change the color of that item using the variable, but I don't know how to achieve anything of this in QML, because I am rather new to QML. Maybe you can offer even a cleaner way to change the color of the item's rectangle when the color dialog was closed (onAccepted). Thx for any help! :)

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.4

Rectangle {
    id: listViewContainer
    width: parent.width/10*9;
    height: 50
    Behavior on height {
        NumberAnimation {
            duration: 100;
        }
    }

    gradient: Gradient {
        GradientStop {position: 0.0; color: "white" }
        GradientStop {position: 1.0; color: "silver" }
    }
    radius: 5
    ColorDialog {
        id: colorDialog
        title: "Please choose a color"
        onAccepted: {
            console.log("You chose: " + colorDialog.color)
            Qt.quit()
        }
        onRejected: {
            console.log("Canceled")
            Qt.quit()
        }
    }

    Component {
        id: playerDelegate
        Item {
            anchors.left: parent.left
            anchors.right: parent.right
            height: 50
            Column {
                Text { text: '<b>Name:</b> ' + name }
                Row {
                    MouseArea {
                        width: 20
                        height: 20
                        onClicked: {
                            colorDialog.visible = true;
                            playerColor = colorDialog.color;
                            //open color dialog
                        }

                        Rectangle {
                            radius: 3
                            anchors.fill: parent
                            color: playerColor
                        }
                    }
                }
            }
        }
    }

    ListView {
        id: playerListView
        anchors.fill: parent
        model:
            ListModel {
                id: playerListViewModel;
                ListElement {
                    name: "Bill Smith"
                    playerColor: "red"
                }
        }
        delegate: playerDelegate
    }
    Button {
        id: addPlayerButton
        anchors.top: playerListView.bottom
        anchors.left: playerListView.left
        anchors.right: playerListView.right
        style: ButtonStyle {
            label: Text {
                text: "Add new player"
                horizontalAlignment: Text.Center
            }
        }
        onClicked: {
            root.addnewPlayer(playerListView); //dont worry about this method
            playerListViewModel.append({name: "Billy", playerColor: "blue"});
            listViewContainer.height += 50;
        }
    }
}

I get an error when I run your example: file:///tmp/untitled3/main.qml:9: TypeError: Cannot read property of null Please post a complete, minimal example. I'm guessing this code was taken out of a larger piece of code, and hence the parent it's referring to is the window? — Mitch

mike510a mike510a · Accepted Answer · 2016-09-08T06:45:04

Here is a sure fire way to make a working colorDialog --

in playerDelegate

 Component {
   id: playerDelegate
   Item {
     anchors.left: parent.left
     anchors.right: parent.right
     height: 50
     Column {
       Text {
         text: '<b>Name:</b> ' + name
       }

      /* Object to store value from color selector */
       Item {
         id: colorSelector


           property color color: "#000000"
           onColorChanged: { playerColor = color; }

       }
/* box to display color */
       Rectangle {

         //Layout.fillWidth: true
         height: 120
         width: 120
         anchors.left: button.right
           //Layout.alignment: Qt.AlignHCenter
         color: colorSelector.color
         border.width: 1
         border.color: "#000000"

       }
/* button to open dialog -- can be mousearea or other clickable object */

       Button {
         id: button
         text: "Browse..."
         onClicked: {
           colorDialog.color = colorSelector.color
           colorDialog.open()
         }
       }

/* actual color dialog for this delegate */




       ColorDialog {
         id: colorDialog
         modality: Qt.ApplicationModal
         title: "Please choose a color"
         onAccepted: colorSelector.color = currentColor
       }
     }
   }
 }

QML How to dynamically access ListView items

1 Answers

in playerDelegate