Lenik
Lenik

Reputation: 14458

Does QML support state inheritance & overriding?

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 { ... }
    }
}

Upvotes: 5

Views: 3340

Answers (1)

DRAX
DRAX

Reputation: 32393

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 { ... }
    }
}

Upvotes: 2

Related Questions