Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. TabButton implicitWidth Strange Behaviour (in TabBar)
Forum Updated to NodeBB v4.3 + New Features

TabButton implicitWidth Strange Behaviour (in TabBar)

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 1 Posters 202 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    Puya
    wrote on last edited by Puya
    #1

    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"
                }
             }
          }
       }
    }
    
    1 Reply Last reply
    0
    • P Offline
      P Offline
      Puya
      wrote on last edited by
      #2

      I have created a SO question as well in case someone wants to answer there instead:
      https://stackoverflow.com/questions/64267727/qml-why-does-tabbars-implicitwidth-depend-on-binding-inner-tabbuttons-width/64330266

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved