Made a toggle button and problem
-
Hey, I made a toggle button that toggles checked (false to true)
then I made a state that activates on button.checked toggle
then I made the toggle make a rectangle appear/disappear (visible)problem is, I have 2 of them, and both work, however:
when I click the first button, it overlaps the second rectangle that appeared and makes it disappear from view (though it is still active).
I think this is because the big rectangle that covers everything (disappearing background) is higher up in the tree, therefor getting some kind of overlay priority?
how to change/fix this? is there a priority command, or do I have to replace everything in a new spot? asking because I really don't want to mess up this UI it's my second attempt at this.
-
Hi can you post the snippet opf the code?
-
RoundButton {
id: browserB
x: 7
y: 144
width: 66
height: 66
text: ""
flat: true
icon.height: 66
icon.width: 66
icon.source: "TestGUI/eyetemp.png"
display: AbstractButton.IconOnly
checked: falseRectangle { id: browserPullMenu anchors.left: parent.right width: 180 height: 66 visible: false } Connections { target: browserB onClicked: { browserB.toggle(true) console.log("clicked") } }
Paired with states:
states: [
State {
name: "WebClicked"; when: browserB.checked
PropertyChanges { target: integratedBrowser; visible: true }
}
,
State {
name: "AddBClicked"; when: addB.checked
PropertyChanges { target: addMenu; visible: true }
}Both buttons have pretty much identical states and base states
-
Alright so after reading through all the documentation I can find, I have tried:
direct connections
state connections
group connections
z stacking
visibility
opacity
enabled/disabled
each one together in statesstill can not find the solution. I read in he documentation that visibility acts in flow (renders highest priority) so to use opacity, but it does the exact same thing.
PS: I am using Qt designer.
somebody gotta know
-
@Lahearle Hi
You didnt show enought code for us to see the problem, but I'm guessing that you have something like this
Rectangle{ id: rectBtn1 Rectangle { id: rectBtn2 } }
You have to change that to somethig like
Rectangle{ id: mainRectangle width: rectBtn1.visible ? rectBtn1.width : rectBtn2.width height: rectBtn1.visible ? rectBtn1.height : rectBtn2.height Rectangle{ id: rectBtn1 } Rectangle { id: rectBtn2 } }
-
@johngod How is this supposed to create equality in the flow scope/visibility activation exactly? I know what the state is, I found it's better to call states/state groups with states at the bottom.
The problem is: whatever is higher in the code (flow scope) is rendered with single "focus" removing the visibility of everything else.
line 10 button is pressed and makes rectangle one visible
line 20 button is pressed (lower down the scope) and makes rectangle2 visible, but it's not because line 10 is higher and has priority. As seen in my GIF -
Okay so this is fixed:
I SIMPLY PUT THE STATES IN THEIR OWN SEPERATE STATE GROUPS, THANKS FOR NOTHING PEOPLE
The "visible" priority flow goes top to bottom in priority, so I figured if I am having priority issues with states, why not make each state it's own state group. (fixed) ez.
Now all state groups have their own priority scope, so whichever group is higher gets render priority (will render below the others), but it won't cancel out and both states will render because its not a single state group that can only do one state at a time apparently.
ez fix no documentation or explanation and the docs website sucks ass and was written by an autistitard with zero explaining skills
-
L Lahearle has marked this topic as solved on