TabViewStyle: make tabs take all horizontal space



  • Hi

    I'm trying to understand how to make tabs in a TabView take all the available horizontal space. Setting their width is easy:
    @
    style: TabViewStyle {
    id: tabStyle

    frameOverlap: 1
    tab: Rectangle {
    color: styleData.selected ? "steelblue" :"lightsteelblue"
    border.color: "steelblue"
    implicitWidth: Math.max(text.width + 4, 80)
    implicitHeight: 60
    width: tabStyle.control.width / tabStyle.control.count

    radius: 2
    Text {
     id: text
     anchors.centerIn: parent
     text: tabStyle.control.width
     color: styleData.selected ? "white" : "black"
    }
    

    }
    frame: Rectangle { color: "red" }
    leftCorner: Rectangle { color: "cyan" }
    }
    @
    but I don't know how to change their position. tabsAlignment: Qt.AlignHCenter moves the tabs so that their left margin is in the middle of the tabBar... but they're stacked on each other, with the first one hiding the others...
    And I don't see which properties can be used to remedy.



  • Anyone?? This forum isn't very popular it seems... the majority of the threads has 0 replies.



  • I think it simply gets confused by you both setting implicitWidth and width. If you only set implicitWidth to tabStyle.control.width / tabStyle.control.count it works. The implicit width you have set is anyway not used since the tabs always fill the full width.



  • [quote author="Jens" date="1403083037"]I think it simply gets confused by you both setting implicitWidth and width. If you only set implicitWidth to tabStyle.control.width / tabStyle.control.count it works. The implicit width you have set is anyway not used since the tabs always fill the full width.[/quote]
    Wow, a reply from one of the writers of QtQuick Controls, what a honor!
    Thanks for the reply Jens, but doing as u say doesn't work.
    https://github.com/Etchelon/VariousQmlTests
    I've uploaded the project (a Qt Quick Project, just 1 file + the .pro file) and pasted the code above, with your modification, and it doesn't work. Can you please look into it?



  • The issue seems to be an indirect division by 0 and causes further updates to be ignored in this expression:
    @
    implicitWidth: control.width / control.count
    @

    The problem happens during initialization of the view, the count is initially 0. While the code as it stands should not really break, adding a safeguard will make the code evaluate correctly:

    @
    implicitWidth: control.width / Math.max(1, control.count)
    @



  • That's it! Many thanks :)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.