Everyone knows about how to set a background for Buttons, Popups etc via the background property of these elements. But I am wondering, how can I create such a property myself for my own custom elements? I found a way but it looks pretty ugly and I can't seem to find the qml code for Button, Popup etc where said property is defined. So i played a bit and came up with the idea of using Bindings like this:

Item {
    id: root
    property Item background: Rectangle {
        color: "red"
    }
    Binding {
        target: root.background
        property: "parent"
        value: root
    }
    Binding {
        target: root.background
        property: "anchors.fill"
        value: root
        when: root.background.parent == root
        delayed: true
    }
}

As mentioned that looks pretty tiresome if you need to declare a lot of properties of the child. So, how does Qt do it or what is the proper way of doing it?

CodePudding user response：

// ItemWithBackground.qml
Item {
    property alias background: backgroundLoader.sourceComponent

    Loader {
        id: backgroundLoader
        anchors { fill: parent }
        sourceComponent: Rectangle { color: 'red' } // default background implementation 
    }
}

// Usage example:
ItemWithBackground {
    background: Rectangle {
        color: 'green'
    }
}