View Full Version : Change a TabView height following its tab child
volcano
4th August 2016, 07:35
I wanted the tabview height to be based on the sum of the children rect.
Eg: tab1 has height of 24(one label of height 24), so when tab1 is selected the tabview height should be 24
however when tab2 has 3 labels each of height 24, so when tab2 is selected the tabview height should be 72.
Here's a sample code
TabView {
Tab {
title: "tab1"
RowLayout {
Text {
text: "Text1"
}
}
}
Tab {
title: "tab2"
RowLayout {
Text {
text: "Text1"
}
Text {
text: "Text2"
}
Text {
text: "Text3"
}
}
}
}
Kindly advice how to achieve this
anda_skoa
4th August 2016, 11:22
Since both your tabs have rows of buttons, they should have the same height.
But in general you could bind the TabView's size properties to expressions that contain the respective properties of the tabs, e.g. something like
height: Math.max(tab1.height, tab2.height)
If you have an unknown number of tabs, you might need a function in the tab view that iterates through the tabs and calculates the max, and call this function from within the tabs when they change size.
Cheers,
_
volcano
4th August 2016, 11:27
Thanks anda_skoa for the input
this function for two tabs "height: Math.max(tab1.height, tab2.height)" will return 72 always.
I want the height of the tabview to be based on the total height of all children. Can this be done?
Kindly advice
anda_skoa
4th August 2016, 13:04
Maybe I didn't understand you correctly.
Do you want the tab view to be the size of the currently active tab?
This could work for that:
height: getTab(currentIndex).height
Cheers,
_
volcano
5th August 2016, 05:10
Hi anda_skoa,
Thanks for the suggestion. But I'm facing a small problem
Here's the way I set the height in the TabView
height: {
var height
console.log("$$$$$$$$$$$$$$$$$$ Current Index " + currentIndex)
console.log("$$$$$$$$$$$$$$$$$$ Tab at index " + getTab(currentIndex))
height = getTab(currentIndex).childrenRect.height + 40
console.log("$$$$$$$$$$$$$$$$$ Final height" + height)
return height
}
Here's the output
qml: $$$$$$$$$$$$$$$$$$ Current Index 0
qml: $$$$$$$$$$$$$$$$$$ Tab at index undefined
qrc:/qml/controls/CustomTabView.qml:28: TypeError: Cannot read property 'childrenRect' of undefined
It seems the tab isn't ready at the time, is there a workaround for this problem?
Kindly advice
anda_skoa
5th August 2016, 09:58
You could check the result of getTab before calling anything on it.
readonly property Tab currentTab: getTab(currentIndex)
height: currentTab ? currentTab.childrenRect.height : 0
Cheers,
_
volcano
5th August 2016, 10:10
Thanks anda_skoa for the suggestions
However, I noticed that it returns 0 when the tabview is loaded or when he switches the tab the first time.
It works fine when switching tabs the second time
To fix that I tried using Component.onCompleted, but noticed that the count of tabs is 0 when the component is created
Here's the code to fix those problems
onCountChanged:{
if(count == 1){
tabview.height = Qt.binding(function() {
return getTab(currentIndex).childrenRect.height
})
}
}
Is the code mentioned here the right way to do so or is there a more effective way to do so?
Kindly advice
anda_skoa
5th August 2016, 13:13
It looks ok.
Would need to experiement to see if this can be done nicer.
Cheers,
_
Powered by vBulletin® Version 4.2.5 Copyright © 2024 vBulletin Solutions Inc. All rights reserved.