Question

I have a CoolButton which have a pressed state:

// CoolButton.qml:
BorderImage {
    ...
    states: State {
        name: "pressed"
        when: mouseArea.pressed == true
        PropertyChanges { target: shade; opacity: 0.5 }
    }
}

And the MenuButton extends CoolButton:

// MenuButton.qml:
CoolButton {
    ...
    states: State {
        name: "pressed"
        PropertyChanges { ... }
    }
}

However, the pressed state defined in the MenuButton seems not work at all. Is it hidden by the pressed state defined in the CoolButton? And how can I override it?

Should it be something like this?

// MenuButton.qml:
CoolButton {
    ...
    states: State {
        name: "pressed"
        extend: "CoolButton.pressed"
        PropertyChanges { ... }
    }
}

Answer 1

I am new to QML, but as far as I know you can’t extend or override defined components.
Instead you can encapsulate them, something like this:

// CoolButton.qml:
BorderImage {
    ...
    states: State {
        name: "pressed"
        when: mouseArea.pressed == true
        PropertyChanges { target: shade; opacity: 0.5 }
    }
}

and encapsulation can look like this:

// MenuButton.qml:
CoolButton {
    property alias cb: encapsulatedCB
    CoolButton {id: encapsulatedCB; }
    ...

    states: State {
        name: "pressed"
        PropertyChanges { ... }
    }
}