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")

    TabView{
        id : tabViewId
       // anchors.fill : parent
        width:rootId.width
        height: parent.height;
    
        style: sampleStyle
    
        Tab{
          id :tab1Id
          title: "The Martian"
    
        }
        Tab{
            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
 

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