TabViewStyle: make tabs take all horizontal space

Etchelon

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.

Etchelon

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

Jens

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.

Etchelon

[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?

Jens

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

Etchelon

That's it! Many thanks :)