Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Custom control with different size rectangle



  • control.png
    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.

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

    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.



  • @Makarand_EB

    GridLayout{
            anchors.fill: parent
            columns : 3
            Repeater{
                model: 13
                Rectangle{
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    border.width: 1
                    Layout.columnSpan: index===0||index===1||index===11||index===12 ? 3 : 1
                    opacity : index===3||index===6||index===9 ? 0 : 1
                }
            }
        }
    

Log in to reply