QML: Implement custom control with rectangles

Question

I want to implement one control with 7 layers of rectangle. Top and bottom 2 rectangles are of the same size. But middle 3 rectangles are 1/3rd of width of the top and bottom 2 rectangles also two of such sets. The spacing between the rectangles will remain same.

How can it be achieved using the minimal code in QML. ( i.e. with 1 repeater or nested repeaters or some way thru models?)

I designed it using repetitive code by simply adding 10 rectangles and anchoring them properly but its not a good practice when things can be done with repeater / model.

Answer 1

Try This

Component{
    id:rec2
    Item{
        property bool flag: true
        width:300
        height:20
        Repeater{
            model:!flag?1:2
        Rectangle{
            anchors.left: (flag && index==1)?parent.left:undefined
            anchors.right: (flag && index==0)?parent.right:undefined
            color: "transparent"
            border.color: "black"
            border.width: 3
            height: parent.height
            width: (flag)?(parent.width/3):parent.width
        }
        }

    }
}

Column{
    anchors.centerIn: parent
    spacing: 10
    Repeater{
        id:repeter
        model: [false,false,true,true,true,false,false]
        Loader{
            sourceComponent: rec2
            onLoaded: item.flag=repeter.model[index]
        }
    }
}