I have this structure:
Page{
Column{
ChartView{
height: parent.height/2
}
ChartView{
height: parent.height/2
}
}
}
But doesn’t have a good performance when the Page is popped, apparently due to height’s binding to root Page. I noticed Page’s onHeightChanged handler is called multiple times while the page is being popped and the fading/sliding animation is being executed.
I tried something like this:
Page{
property real rootHeight
onPushed: {
rootHeight = function(){return height}()
}
Column{
ChartView{
height: rootHeight/2
}
ChartView{
height: rootHeight/2
}
}
}
And performance improves, but rootHeight is always equal to full screen height, even when I use this Page inside a NavigationStack. Is there any way of retrieving Page’s dimensions after this Page has been properly accomodated inside a NavigationStack? I noticed that putting an element inside and “doing an ‘anchors.fill: parent’ ” behaves properly, this element gets correct Page’s dimensions and substracts the NavigationStack’s height.
Hence this snippet has this behaviour:
Page{
property real rootHeight
onPushed: {
rootHeight = function(){return height}()
// rootHeight around 850 pixels
}
Rectangle{
anchors.fill: parent
Text{
anchors.centerIn: parent
text: parent.height
// Rectangle's height is properly accomodated,
// being around 810 pixels
}
Component.onCompleted: console.log(height)
// However, this height is still around 850 pixels
}
}
Component.onCompleted inside Page’s root has the same behaviour, Page’s height is still around 850 pixels.
So what I would like to have is this Rectangle’s height unbound from any element and once all animations are completed and elements inside Page are accomodated.
Is this possible?