QML - Why does TabBar's implicitWidth depend on binding inner TabButton's width to its implicitWidth?

Question

Why in the following code implicitWidth of TabBar changes when I comment out width: implicitWidth in TabButtons? Why does the fact that I am setting width of a component to be equal to its implicitWidth change the implicitWidth? Also, I thought width was set to implicitWidth by default anyways when width is not explicitly set. So I don't understand why doing width: implicitWidth would have any effects. Here is the code:

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 {
            model: bar.contentModel
         }


         TabButton {
            id: homeTabButton
            width: implicitWidth // I cannot comment this out
            text: qsTr("Home")
         }
         TabButton {
            id: discoverTabButton
            width: implicitWidth // I cannot comment this out
            text: qsTr("Discover")
         }
         TabButton {
            id: activityTabButton
            width: implicitWidth // I cannot comment this out
            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"
            }
         }
      }
   }
}

Answer 1

U have assigned an implicit width before

implicitWidth: Math.max(homeTabButton.implicitWidth, discoverTabButton.implicitWidth, activityTabButton.implicitWidth)

that's why when u comment width in tabButton it taking width as 0.

use

width: Math.max(homeTabButton.implicitWidth, discoverTabButton.implicitWidth, activityTabButton.implicitWidth)

in your code and comment that width in tabButton ans see.