Qt World Summit: Register Today!

[SOLVED] How to fix anchor/clipping problems when scaling a GridView

  • I implemented a "zoom" feature by allowing to adjust the scale property of a GridView that wraps at the right edge:

    GridView {
      scale: zoomLevel
      transformOrigin: Item.TopLeft
      anchors.top: commandArea.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: statusArea.top

    However, although the anchors are constant, when I zoom in, the content exceeds the right border and when I zoom out, the content is clipped above the bottom border.

    I was able to fix the issues using the following properties:

    anchors.rightMargin: (scale - 1.0) * width
    anchors.bottomMargin: -(height * (1.0 - scale))

    However, I get "binding loop" errors related to these two lines in the console every time I adjust the zoom level. While it seems to work anyway, the errors indicate that it's a bit of a hack... Is there a better way to do this? If not, can I just ignore the errors?

  • Moderators

    Hi @pholz,
    I suspect this is because the width of GridView is binded to rightMargin (right side spacing) of the GridView itself. So when the width of GridView changes it affects the rightMargin which in turn will affect the width of GridView (it will become thinner) and thus this goes on (loop).

  • @p3c0 I see. Any ideas what to use instead?

  • Moderators

    @pholz Try assigning using = instead of binding.

  • @p3c0 seems to work, thanks!

    new code:

    onScaleChanged: {
        anchors.rightMargin = (scale - 1.0) * width;
        anchors.bottomMargin = -(height * (1.0 - scale));