Tab bar and tab button

user_10411268 0
Viewed 260

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 {

        }

    }
qml qt
1 Answers

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 {}
}
user_38472550
Related