Change a TabView height following its tab child

[volcano]

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

TabView {
    Tab {
        title: "tab1"

        RowLayout {
            Text {
                text: "Text1"
            }
        }
    }
    Tab {
        title: "tab2"

        RowLayout {
            Text {
                text: "Text1"
            }
            Text {
                text: "Text2"
            }
            Text {
                text: "Text3"
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

Kindly advice how to achieve this

[anda_skoa]

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)

height: Math.max(tab1.height, tab2.height)

To copy to clipboard, switch view to plain text mode 

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]

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]

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

height: getTab(currentIndex).height

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[volcano]

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
    }

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
    }

To copy to clipboard, switch view to plain text mode 

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]

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

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

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

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[volcano]

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

onCountChanged:{
        if(count == 1){
            tabview.height = Qt.binding(function() {
                return getTab(currentIndex).childrenRect.height
            })
        }
    }

To copy to clipboard, switch view to plain text mode 

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]

It looks ok.

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

Cheers,
_