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

TabButton implicitWidth Strange Behaviour (in TabBar)



  • Hi. How come in this code the implicitWidth of TabBar changes when I comment out width: implicitWidth in TabButtons? (I am trying to create a vertical TabBar) Why does the fact that I am setting width of a component to be its implicitWidth (which I assumed was the default behavior anyway when width is not set) change the implicitWidth? You can run this example with qmlscene:

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    import QtQuick.Layouts 1.15
    
    Item {
       id: root
       height: 480
       width: 640
    
       RowLayout {
          anchors.fill: parent
    
          TabBar {
             id: bar
             Layout.fillHeight: true
             implicitWidth: Math.max(homeTabButton.implicitWidth, discoverTabButton.implicitWidth, activityTabButton.implicitWidth)
    
             background: Rectangle {
                color: "yellow"
             }
    
             contentItem: ListView {
                // orientation: ListView.Horizontal
                model: bar.contentModel
             }
    
    
             TabButton {
                id: homeTabButton
                width: implicitWidth
                text: qsTr("Home")
             }
             TabButton {
                id: discoverTabButton
                width: implicitWidth
                text: qsTr("Discover")
             }
             TabButton {
                id: activityTabButton
                width: implicitWidth
                text: qsTr("Activity")
             }
          }
    
          StackLayout {
             Layout.fillWidth: true
             Layout.fillHeight: true
             currentIndex: bar.currentIndex
             Pane {
                id: homeTab
                background: Rectangle {
                   color: "blue"
                }
             }
             Pane {
                id: discoverTab
                background: Rectangle {
                   color: "red"
                }
             }
             Pane {
                id: activityTab
                background: Rectangle {
                   color: "green"
                }
             }
          }
       }
    }
    

Log in to reply