[Problem] Components inheritance and states



  • 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.

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

    Thanks



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.