Building TabBar in QML - Loader doesn't show all the Rectangles

[TheIndependentAquarius]

import QtQuick 2.4
import QtQuick.Window 2.2
 
Window
{
    visible: true
    height: 500
    width: 500
 
    property VisualItemModel contentToBeShownOnTabClick : visualItemModelDemo
    property variant tabLabels                    : ["Navigation", "Payload", "System Control"]
 
    VisualItemModel
    {
        id: visualItemModelDemo
 
        Rectangle
        {
            id: navigationTab
            color: "green"
            height: 200
            width: 200
        }
        Rectangle
        {
            id: navigationTab1
            color: "darkgreen"
            height: 200
            width: 200
        }
        Rectangle
        {
            id: navigationTab2
            color: "lightgreen"
            height: 200
            width: 200
        }
    }
 
    MainForm
    {
        Component
        {
            id: tabsOnBottomComponent
            Repeater
            {
                model:   tabLabels
                // The Tabs
                Rectangle
                {
                    id:             tabsOnBottom
                    // This anchoring places the tabs on the outer top of the parent rectangle.
                    anchors.top:    parent.bottom
                    anchors.topMargin: 180
                    color:          "lightsteelblue"
                    border.color:   "steelblue"
                    border.width:   2
                    implicitWidth:  Math.max ((labelTabsBottom.width + 4), 80)
                    implicitHeight: 20
                    radius:         2
                    // Tabs Text/Label
                    Text
                    {
                        id:                 labelTabsBottom
                        anchors.centerIn:   parent
                        color:              "white"
                        rotation:           0
                        // With reference to mode: tabLabels
                        text:               modelData
                        font.pointSize:     11
                    }
 
                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:    bottomTabClicked (index);
                    }
                }
            }
        }
 
 
        Rectangle
        {
            // The things which get displayed on clicking of a tab will be shown in this rectangle.
            id:           areaForTabContents
            border.color: "black"
            border.width: 10
            height:       parent.height
            width :       parent.width
            color :       "pink"
 
            // These are the tabs displayed in one row - horizontally.
            Row
            {
                id:      horizontalTabs
 
                Loader
                {
                    anchors.fill: parent
                    sourceComponent: tabsOnBottomComponent
                }
            }
        }
 
        anchors.fill: parent
    }
}

import QtQuick 2.4
import QtQuick.Window 2.2

Window
{
    visible: true
    height: 500
    width: 500

    property VisualItemModel contentToBeShownOnTabClick : visualItemModelDemo
    property variant tabLabels                    : ["Navigation", "Payload", "System Control"]

    VisualItemModel
    {
        id: visualItemModelDemo

        Rectangle
        {
            id: navigationTab
            color: "green"
            height: 200
            width: 200
        }
        Rectangle
        {
            id: navigationTab1
            color: "darkgreen"
            height: 200
            width: 200
        }
        Rectangle
        {
            id: navigationTab2
            color: "lightgreen"
            height: 200
            width: 200
        }
    }

    MainForm
    {
        Component
        {
            id: tabsOnBottomComponent
            Repeater
            {
                model:   tabLabels
                // The Tabs
                Rectangle
                {
                    id:             tabsOnBottom
                    // This anchoring places the tabs on the outer top of the parent rectangle.
                    anchors.top:    parent.bottom
                    anchors.topMargin: 180
                    color:          "lightsteelblue"
                    border.color:   "steelblue"
                    border.width:   2
                    implicitWidth:  Math.max ((labelTabsBottom.width + 4), 80)
                    implicitHeight: 20
                    radius:         2
                    // Tabs Text/Label
                    Text
                    {
                        id:                 labelTabsBottom
                        anchors.centerIn:   parent
                        color:              "white"
                        rotation:           0
                        // With reference to mode: tabLabels
                        text:               modelData
                        font.pointSize:     11
                    }

                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:    bottomTabClicked (index);
                    }
                }
            }
        }


        Rectangle
        {
            // The things which get displayed on clicking of a tab will be shown in this rectangle.
            id:           areaForTabContents
            border.color: "black"
            border.width: 10
            height:       parent.height
            width :       parent.width
            color :       "pink"

            // These are the tabs displayed in one row - horizontally.
            Row
            {
                id:      horizontalTabs

                Loader
                {
                    anchors.fill: parent
                    sourceComponent: tabsOnBottomComponent
                }
            }
        }

        anchors.fill: parent
    }
}

To copy to clipboard, switch view to plain text mode 

This gets shown as follows:
now.png

whereas I want it to see 3 rectangles there side by side.

[anda_skoa]

You anchor all elements of the repeater to the same position.

Put the Repeater into a Column or ColumnLayout

Cheers,
_

[TheIndependentAquarius]

Repeater in the Loader and the Loader is in the Row. What point am I missing?

[anda_skoa]

The Row has a single element, the Loader.
Usually a Row, Column or Grid is used when you have multiple child items and want them position automatically.

What you want is to have the Repeater populate the Row, so the Row needs to be the parent of the Repeater.

Cheers,
_