Change a TabView height following its tab child

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

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

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

Code:

---

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,
_

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

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:

Code:

---

height: getTab(currentIndex).height

---

Cheers,
_

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

Code:

---

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

You could check the result of getTab before calling anything on it.

Code:

---

readonly property Tab currentTab: getTab(currentIndex)
height: currentTab ? currentTab.childrenRect.height : 0

---

Cheers,
_

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

Code:

---

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

It looks ok.

Would need to experiement to see if this can be done nicer.

Cheers,
_