Rich von Lehe
Rich von Lehe

Reputation: 1552

QML: Extract information from repeater

In the snippet of code below I'm displaying a variable number of TextEdit items, each one being in a Rectangle which is the delegate of a repeater. When I hit the 'Play' button, the slot for that will need to collect the player names and call a Q_INVOKABLE method (not shown) to pass that data to the C++ backend. For the purposes of this question I'm just trying to display the player names in the onClicked slot of the Play button but am not sure how. I left '???' where I am trying to figure out how to retrieve information inside the rectangle of each delegate instance.

At this point I'm open to a solution to this approach or just being told that I'm approaching this the wrong way. I'm really pretty new to the QML side of Qt.

Thanks

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Item {
    id: root
    property int playerCount: playerCountSelect.currentValue

    RowLayout {
        id: layout
        anchors.top: parent.top
        anchors.topMargin: 5
        spacing: 6
        anchors.horizontalCenter: parent.horizontalCenter

        Label {
            text: "Enter number of players"
        }

        ComboBox {
            id: playerCountSelect
            model: [2, 3, 4]
        }
    }

    RowLayout {
        id: mainRow
        anchors.centerIn: parent
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 6

        RoundButton {
            text: "Play"
            width: 40
            radius: 2
            font.pointSize: 12
            onClicked: {
                for (var i =0; i < playerList.count; i++) {
                    console.log(playerList.itemAt(i).???)
                }
            }
        }

        Column {
            spacing: 6
            Repeater {
                id: playerList
                model: root.playerCount

                Rectangle {
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: 120
                    height: 32

                    TextEdit {
                        font.pointSize: 12
                        text: "Player " + (index+1) + " name"
                    }
                }
            }
        }

        RoundButton {
            text: "Quit"
            width: 40
            radius: 2
            font.pointSize: 12
        }
    }
}

Upvotes: 1

Views: 1211

Answers (1)

JarMan
JarMan

Reputation: 8277

You just need to expose the property you want in the Repeater's delegate.

            Repeater {
                id: playerList
                model: root.playerCount

                Rectangle {
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: 120
                    height: 32

                    // Expose the player name
                    property alias playerName: textField.text

                    TextEdit {
                        id: textField
                        font.pointSize: 12
                        text: "Player " + (index+1) + " name"
                    }
                }
            }

Then you can access that property in your print statement by doing this:

console.log(playerList.itemAt(i).playerName)

Upvotes: 2

Related Questions