Made a toggle button and problem

Lahearle

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.

Lahearle

Dev_Unknown

Hi can you post the snippet opf the code?

Lahearle

@Dev_Unknown

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: false

    Rectangle {
        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

Lahearle

Okay so update: I changed the order of the states and now when I press the second button it makes the white rectangle disappear entirely, meaning it's a state priority issue (likely)

Lahearle

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 states

still 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

johngod

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

Lahearle

@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

Lahearle

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

GrecKo

@Lahearle no need to use states for that, add 2 boolean properties, bind the visibility of your Rectangles to that and make the buttons change those bools.
Also no need to be insulting and entitled.