TabBar/StackLayout inside Column

[Mixlu]

Hi,

I would like to implement TabBar with StackLayout in order to switch between different views. I also would like that the selected view render inside a Column.

But my problem is that the selected view is not correctly displayed inside the column (the view is rendered at the top), see screenshot bellow.

Here is my simple implementation (I would like the view to appear between the TabBar and the buttons):

import QtQuick 2.14

import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

ApplicationWindow {
    id: main
    width: 400
    height: 400
    color: "#000000"
    visible : true

    Column {
        spacing: 10

        Text {
            x: 80
            text: "Text"
            color: "#FFFFFF"
        }

        TabBar {
            id: bar
            width: parent.width
            TabButton {
                text: qsTr("Home")
            }
            TabButton {
                text: qsTr("Discover")
            }
            TabButton {
                text: qsTr("Activity")
            }
        }

        StackLayout {
            width: parent.width
            currentIndex: bar.currentIndex
            Item {
                Text {
                    text: qsTr("homeTab")
                    color: "#FFFFFF"
                }
            }
            Item {
                Text {
                    text: qsTr("discoverTab")
                    color: "#FFFFFF"
                }
            }
            Item {
                Text {
                    text: qsTr("activityTab")
                    color: "#FFFFFF"
                }
            }
        }

        RowLayout {
            Button {
                text: "Button 1"
            }

            Button {
                text: "Button 2"
            }
        }
    }
}

Here is a screen of my problem :