Nominate our 2022 Qt Champions!

When is TabViewStyle's styleData.availableWidth valid?

  • I created a simple Tab View inside an ApplicationWindow with a style taken directly from the Qt Quick Controls gallery example. If I don't change the width of the TabView everything works like I would expect. If I use anchor.fill to change the width or even width: parent.width, the tabs do not appear. If I give ApplicationWindow and id of rootId and use width: rootId.width, the tabs show up again. Below is the full code from the qml file. The only thing I changed about the style from the example in gallery was the path to the images.

    I haven't experimented much with custom styling. Is this a bug in the framework or am I doing something illegal? I would guess the problem has something to do with styleData.availableWidth but that's really just a guess.

    Using the Qt 5.3.2 release.

    @import QtQuick 2.3
    import QtQuick.Controls 1.2
    import QtQuick.Controls.Styles 1.2

    ApplicationWindow {
    id : rootId
    visible: true
    width: 640
    height: 480
    title: qsTr("TabView Style Test")

        id : tabViewId
       // anchors.fill : parent
        height: parent.height;
        style: sampleStyle
          id :tab1Id
          title: "The Martian"
            id : tab2Id
            title:"Andy Weir"
    property Component sampleStyle: TabViewStyle {
        tabOverlap: 16
        frameOverlap: 4
        tabsMovable: true
        frame: Rectangle {
            gradient: Gradient{
                GradientStop { color: "#e5e5e5" ; position: 0 }
                GradientStop { color: "#e0e0e0" ; position: 1 }
            border.color: "#898989"
            Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
        tab: Item {
             property int totalOverlap: tabOverlap * (control.count - 1)
            implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, borderImageId.sourceSize.width)
            implicitHeight: borderImageId.sourceSize.height
            BorderImage {
                id: borderImageId
                anchors.fill: parent
                source: styleData.selected ? "tab_selected.png" : "tab.png"
                border.left: 30
                smooth: false
                border.right: 30
            Text {
                text: styleData.title
                anchors.centerIn: parent
        leftCorner: Item { implicitWidth: 12 }



Log in to reply