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 }
}
}
↧