Details
-
Suggestion
-
Resolution: Done
-
P3: Somewhat important
-
None
-
None
-
qtquickcontrols: ff4162dea7d8e53a437f3282e237a50b6f1893a6
Description
We have to show the '+' button on the right of last tab, if all tabs are visible and there is free space to show the button.
Else (if not all tabs are visible) show the '+' button in the right corner (also with '<', '>' buttons to scroll tabs).
To determine that all tabs visible now we use following workaround:
TabView {
id: tabView
...
// Workaround to calculate total tabs width
property Flickable tabRow: findChild(tabView, "tabrow") // child ListView
property real tabsWidth: tabRow ? tabRow.contentWidth : 0
property bool allTabsVisible: width > tabsWidth + 20 // place for '+' button
function findChild(item, objectName) {
const children = item.children;
for (var i = children.length; --i >= 0; ) {
var child = children[i];
if (!child.objectName)
continue;
if (child.objectName === objectName)
return child;
child = findChild(child, objectName);
if (child)
return child;
}
return null;
}
style: TabViewStyle {
...
tabBar: Rectangle {
...
Button {
x: tabsWidth + 1
visible: allTabsVisible
...
rightCorner: Row {
...
Button {
visible: !allTabsVisible
Please add 'tabsWidth' readonly property to TabView or TabViewStyle as alias of internal ListView's contentWidth (objectName: "tabrow").