Tab bar and tab button - qt

Question

I want to create Tabs. So using Tab bar and Tab buttons i am creating tabs and using stack layout i am loading the respecting screen.
Note: i dont want to use loader. Using only Stack layout how can i load the screen.
Please suggest how can i do that?
Item {
id:screenTabs
property var tabname : [qsTr("Tab1"),qsTr("Tab2"),qsTr("Tab3"),qsTr("Tab4"),qsTr("Tab5")]
property var tabScreen : ["qrc:/Tabscreen1.qml","qrc:/Tabscreen2.qml","qrc:/Tabscreen3.qml","qrc:/Tabscreen4.qml","qrc:/Tabscreen5.qml"]
width : parent.width
height : parent.height
TabBar
{
id: bar
width: parent.width*0.95
anchors {
top: parent.top
topMargin: 15
left: parent.left
leftMargin: 10
}
Repeater
{
model: tabname.length
TabButton
{
text: tabname[index]
}
}
}
StackLayout
{
id: stacklyt
width: parent.width
height: parent.height
currentIndex: bar.currentIndex
anchors {
top: bar.bottom
}
Repeater
{
model: tabScreen.length
Loader
{
width: parent.width
height: parent.height
source: tabScreen[index]
}
}
}
}
Also without using loader i am doing below shown way but this is not what i am expecting:
StackLayout {
id: stackLayout
width: parent.width
height: parent.height
currentIndex: bar.currentIndex
anchors.top: bar.bottom
Item {
}
Item {
}
Item {
}
Item {
}
Item {
}
}

Answer 1

If you don't want to use the Loader I think you have to instantiate the component given the name (and not the URI) and put them in a Container type (here the StackLayout) as you mention in your second solution.
without using loader i am doing below shown way but this is not what i am expecting
Why is this not what you expect? Did you replace Item with your components? You might have to add an import statement for your components if you are getting an import error.
StackLayout
{
id: stacklyt
width: parent.width
height: parent.height
currentIndex: bar.currentIndex
anchors.top: bar.bottom
Tabscreen1 {}
Tabscreen2 {}
Tabscreen3 {}
Tabscreen4 {}
Tabscreen5 {}
}