Uploaded image for project: 'Qt for MCUs'
  1. Qt for MCUs
  2. QTMCU-145

Code snippet in AnchorChanges is wrong

    XMLWordPrintable

Details

    • All
    • a93561ee33573940ce26f00fc917a0b027740403, 03237697fca6a096defc6b636e668a03d3889f17, 9d1c44f7d65ef2dc10ff5fb72c52a35fe8e49f11 (2.5.1)

    Description

      The original snippet uses AnchorChanges for changing margins, which the page itself says not possible. In fact, it doesn't work when pasted to the Qt Creator and run.

      link : https://doc.qt.io/QtForMCUs-2.4/qml-qtquick-anchorchanges.html#details

      <original> 

      import QtQuick 2.15
Rectangle {
    id: window
    width: 120; height: 120
    color: "black"

    Rectangle { id: anchorRectStart; x: 60; y: 60; height: 60; width: 60; color: "yellow"}
    Rectangle { id: anchorRectEnd; x: 0; y: 0; height: 60; width: 60; color: "blue"}

    Rectangle { id: myRect; color: "red"
        anchors {
            top: anchorRectStart.top
            bottom: anchorRectStart.bottom
            left: anchorRectStart.left
            right: anchorRectStart.right
            topMargin: 10
            bottomMargin: 10
            leftMargin: 10
            rightMargin: 10
        }
    }

    states: State {
        name: "reanchored"

        AnchorChanges {
            target: myRect
            anchors {
                top: anchorRectEnd.top
                bottom: anchorRectEnd.bottom
                left: anchorRectEnd.left
                right: anchorRectEnd.right
                topMargin: 20
                bottomMargin: 20
                leftMargin: 20
                rightMargin: 20
            }
        }
    }
    MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }
}

      The code should be like this. This code worked as intended.

      import QtQuick 2.15
Rectangle {
    id: window
    width: 120; height: 120
    color: "black"    
    Rectangle { id: anchorRectStart; x: 60; y: 60; height: 60; width: 60; color: "yellow"}
    Rectangle { id: anchorRectEnd; x: 0; y: 0; height: 60; width: 60; color: "blue"}  
    Rectangle { 
        id: myRect; color: "red"
        anchors {
            top: anchorRectStart.top
            bottom: anchorRectStart.bottom
            left: anchorRectStart.left
            right: anchorRectStart.right
            topMargin: 10
            bottomMargin: 10
            leftMargin: 10
            rightMargin: 10
        }
    }    
    states: State {
        name: "reanchored"
        AnchorChanges {
            target: myRect
            anchors {
                top: anchorRectEnd.top
                bottom: anchorRectEnd.bottom
                left: anchorRectEnd.left
                right: anchorRectEnd.right
            }
        }
        PropertyChanges {
            target: myRect
            anchors {
                topMargin: 20
                bottomMargin: 20
                leftMargin: 20
                rightMargin: 20
            }
        }
    }
    MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }
}

      Attachments

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            pandaras Panajotis Daras
            mikio_hirai Mikio Hirai
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Gerrit Reviews

                There are no open Gerrit changes