[Alberto Blanque]

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?

[GüntherFelgo Team]

Hi!

The page-height changes if used inside a navigation stack as the NavigationBar of NavigationStack takes up some space.

You can retrieve the height of navigation bar for the current Theme (iOS, Android) with:
dp(Theme.navigationBar.height)

 

So I guess in your case, you would want to do something like:

    rootHeight = page.height - dp(Theme.navigationBar.height)

[Alberto Blanque]

Excellent, thanks sir