PDA

View Full Version : Building TabBar in QML - Loader doesn't show all the Rectangles



TheIndependentAquarius
20th March 2015, 10:11
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
}
}


This gets shown as follows:
11023

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

anda_skoa
20th March 2015, 11:52
You anchor all elements of the repeater to the same position.

Put the Repeater into a Column or ColumnLayout

Cheers,
_

TheIndependentAquarius
23rd March 2015, 09:59
Repeater in the Loader and the Loader is in the Row. What point am I missing?

anda_skoa
23rd March 2015, 11:12
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,
_