CODEWITHSUNDEEP
qtqmlqtquick2qtquickcontrols2
vbyzjnlehi
vbyzjnlehi

Reputation: 347

Do you have to completely replace a property value to customise it?

I'm having trouble figuring out how to customize components. Most of the examples showing how to customize replace the background of the component entirely. For example:

menuBar: MenuBar {
...
        background: Rectangle {
            implicitWidth: 40
            implicitHeight: 40
            color: "red"

            Rectangle {
                color: "#21be2b"
                width: parent.width
                height: 1
                anchors.bottom: parent.bottom
            }
        }
}

Why can't I just do something like the following, since when I look in the source for MenuBar.qml it is already using a Rectangle for the background. I'd rather modify the exiting background rather than completely recreating it from scratch.

menuBar: MenuBar {
...
   background.color: "red";
}

Upvotes: 0

Views: 45

Answers (2)

Amfasis
Amfasis

Reputation: 4178

If your sole goal is to avoid replacing the background, you can go with this solution:

MenuBar {
    id: menuBar1

    Binding {
        target: menuBar1
        property: "color"
        value: "red"
    }
}

But I guess you will not like it, since it can get very verbose quickly. You are probably better of writing your own implementation of MenuBar:

//MyMenuBar.qml

MenuBar {

    property alias backgroundColor: theBackground.color

    background: Rectangle {
        id: theBackground
   }
}

This component will inherit all the properties from the standard MenuBar, plus the added backgroundColor property.

Btw, there is the notion of grouped properties but that doesn't work in this case, because background is declared as QQuickItem

Upvotes: 1

JarMan
JarMan

Reputation: 8277

One other option is something that I have yet to find much documentation for. You can look at the source for MenuBar (or whatever other quick control you're interested in), and see what palette property it uses for the background. So this is what I see in the source code:

    background: Rectangle {
        implicitHeight: 40
        color: control.palette.button
    }

So if you just try setting palette.button to something else, it should change the color:

MenuBar {
    palette.button: "red"
}

That will only help with colors. If you want to change any other properties, you're better off just recreating the whole thing.

Upvotes: 0

Related Questions