Solved Trouble while changing color of rectangle in a Component
-
Hello,
I'm new to QML and I'm trying to make a component wich is a Rectangle with 3 others smaller rectangles it look like that :
For this component I have named the three rectangles rect1, rect2, rect3. I would like to change the rectX color depending on a value I give.
For example when I send 2 I change the color of rect2 to red.From here I have a ui.qml and a .qml file I supposed this is normal.
I supposed that the ui.qml is dedicated to UI only so I'm trying to make this function in the .qml file.signal changingState(int state) onChangingState: handlerChangingState(state) function handlerChangingState(state){ switch(state){ case 0: rect1.color: "grey"; rect2.color: "grey"; rect3.color: "grey"; break; case 1: rect1.color: "red"; rect2.color: "grey"; rect3.color: "grey"; break; case 2: rect1.color: "grey"; rect2.color: "red"; rect3.color: "grey"; break; case 3: rect1.color: "grey"; rect2.color: "grey"; rect3.color: "red"; break; } }
But here my problem is that when I write rect1.color: "grey" I have this error :
Expression statements should be assignments, calls or delete expressions only
I don't really understand what is wrong with this code. Can you please help me. Maybe I'm totally wrong to make this kind of function in the .qml file please correct me If I am.
Thank you
-
@DavidM29 hello,
In your handlerChangingState function you are using QML syntax :
rect1.color : "grey"; // QMLuse js syntax :
rect1.color = "grey"; // jsand see if this is simpler solution for you :
import QtQuick 2.0 Rectangle { property int active : 0 Row{ anchors.bottom: parent.bottom height: parent.height/3 width:parent.width*0.8 anchors.horizontalCenter: parent.horizontalCenter spacing: (width - (3*30)) / 2 Rectangle{ width: 30 height: parent.height color: active===1 ? "red" : "gray" } Rectangle{ width: 30 height: parent.height color: active===2 ? "red" : "gray" } Rectangle{ width: 30 height: parent.height color: active===3 ? "red" : "gray" } } }
-
Thank you, it was simple...
I take a look at your code