qmlqqmlcomponent

QML: How to add children to a base component's child instead of the root object of the component?


I have a base component named MyChart.qml like this

Item {
    id: root
    
    ChartView {
        id: myChartView
    }
    
    RowLayout {
        id: myToolbar
        }
    }
}

So it's basically a chart with a toolbar underneath it. I inherit this component in another component like this:

MyChart {
    *List of Children*
}

Here, how can I add the List of Children to myToolbar instead of root of the MyChart component?


Solution

  • Every item has the property data which is used as default property when you add an object inside another. Default property mean if you don't specify any property is assumed to be that one.

    eg: States has default property states: [], so you can do

    States {
       State{},
       State{}
    }
    

    beacause they all refer to that default property. So, about your example it's enough to expose the default property of the component you want to be the direct father of your component

    MyChart.qml

    Item {
       id: root
       
       default property alias data: myToolbar.data
       
       ChartView {
          id: myChartView
       }
       
       RowLayout {
          id: myToolbar
       }
    }
    

    Now any child coponent you use will be added directly inside the rowlayout

    MyChart {
        Rectangle { width: 100; height: 100; color:"red"}
        Rectangle { width: 100; height: 100; color:"skyblue"}
    }