Hi. I have a select level scene in my game. When the player completes a level, I want the select level scene to update the button for that level. I use a repeater for my buttons and I’m trying to update the button using a property binding but this doesn’t work. I could use the ‘repeater.itemAt()’ function but my levels are spread across several repeaters (repeater1, repeater2, etc) so the code gets a bit messy. I’ve pasted some sample code below:
Main.qml
import Felgo 3.0
import QtQuick 2.0
import "common"
GameWindow {
id: gameWindow
width: 480
height: 320
property int levels: 4
property int currentLevel: 0
property var levelsComplete: [0,0,0,0]
// bg
Rectangle{
anchors.fill: parent
color: "#ece468"
}
// instructions
Text {
anchors.horizontalCenter: parent.horizontalCenter
y: 50
text: "Click on a button to complete the level!"
font.pixelSize: 20
}
// levels
Row {
id: row
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
spacing: 10
Repeater {
id: repeater
model: levels
MenuButton {
text: modelData+1
width: 40
height: 40
isComplete: levelsComplete[modelData] === 1
onClicked: {
currentLevel = modelData
// ...
// load a level
// ...
// repeater.itemAt() works as expected
// repeater.itemAt(currentLevel).isComplete = true
// property binding doesn't work
levelsComplete[currentLevel] = 1
console.debug(JSON.stringify(levelsComplete))
}
}
}
}
}
MenuButton.qml
import QtQuick 2.0
Item {
id: button
// this will be the default size, it is same size as the contained text + some padding
width: buttonText.width + paddingHorizontal*2
height: buttonText.height + paddingVertical*2
// the horizontal margin from the Text element to the Rectangle at both the left and the right side.
property int paddingHorizontal: 10
// the vertical margin from the Text element to the Rectangle at both the top and the bottom side.
property int paddingVertical: 5
// access the text of the Text component
property alias text: buttonText.text
// this handler is called when the button is clicked.
signal clicked
property bool isComplete: false
Rectangle {
id: normal
anchors.centerIn: parent
width: parent.width
height: parent.height
color: "#e9e9e9"
radius: 10
}
Text {
id: buttonText
anchors.centerIn: parent
font.pixelSize: 18
color: "black"
}
Rectangle {
id: green
visible: isComplete
anchors.fill: parent
color: "#63fd78"
radius: 10
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
if(!isComplete)
button.clicked()
}
onPressed: button.opacity = 0.5
onReleased: button.opacity = 1
}
}
Thanks,
Phil