[Problem] Components inheritance and states

X-Krys

Hi,

I'm building a qml components library and I've got trouble with qml inheritance and states.

Here is an example where i'm created a Button.qml then I want to create a ToggleButton component that inherits from Button.
The Toggle can be checked or not so it has 4 more states than a regular Button.

Button.qml :
@

Item {

id:root

property alias focused : mouseArea.containsMouse

...

MouseArea {
    id:mouseArea

    ...

}

states: [

    State {
        name: "DISABLED"
        ...
    },

    State {
        name: "DOWN"
        ...
    },

    State {
        name: "OVER"
        when: root.focused
    }

   ]

}
@

And my ToggleButton.qml :

@

Button {

id:root

property bool checked: false

...

states: [
    State {
        name: "DISABLED_AND_SELECTED"
        ...
    },

    State {
        name: "DOWN_AND_SELECTED"
        ...
    },

    State {
        name: "OVER_AND_SELECTED"
        when: checked && root.focused
    },

    State {
        name: "UP_AND_SELECTED"
        when: checked
    }

   ]

}
@

First of all I don't know why but first I expected the states list from Button to be replaced by the state list from ToggleButton since I put a new State array for the "states" property.

But I realized that the state list from ToggleButton is actually concatenated with the state list from Button : when I do @print(states.length)@ the result is 7.

My second issue is that the "OVER_AND_SELECTED" state is never reached cause the state "OVER" take precedence on it since the engine take the first valid "when" condition it finds. Since the ToggleButton states are concatenated with the Button states the "OVER" condition from Button is being read before the "OVER_AND_SELECTED" condition.

Is my first issue a bug from QML ?
Any idea how to get this working ?

Thanks

ixSci

While I know nothing about concatenation validness I can suggest you a fix for the second problem:
@Button {
id:root
property bool checked: false
...
StateGroup{
states: [
State {
name: "DISABLED_AND_SELECTED"
...
},
State {
name: "DOWN_AND_SELECTED"
...
},
State {
name: "OVER_AND_SELECTED"
when: checked && root.focused
},
State {
name: "UP_AND_SELECTED"
when: checked
}
]
}
}@