Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

TabBar/StackLayout inside Column



  • 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 :
    2cc5f8e8-7f50-4ec5-9994-4214fc6fe5a1-image.png