QML如何动态访问ListView项

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;
        }
    }
}

Answer 1

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 } } } } 

---